{"id":13913,"date":"2023-12-07T12:59:31","date_gmt":"2023-12-07T18:59:31","guid":{"rendered":"https:\/\/www.mrc-productivity.com\/docs\/?post_type=ht_kb&p=13913"},"modified":"2024-03-06T09:41:37","modified_gmt":"2024-03-06T15:41:37","slug":"featured-component-selector","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/featured-component-selector","title":{"rendered":"Featured Component Selector"},"content":{"rendered":"\n

The Component Selector includes many predesigned element templates that can be added to the page in order to make the UI more helpful. These predesigned elements include cards, tabs, buttons, statistical widgets, etc. <\/p>\n\n\n\n

Once an element template has been selected and added to your page, you can customize the look\/style of the element by changing background colors, font colors, icons, etc. Additionally, you can further customize the element by changing content to hard-coded text or even import data values from another application.<\/p>\n\n\n\n

Cards<\/h2>\n\n\n\n

Card elements offer a content container and includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. <\/p>\n\n\n\n

Once selected, any of the placeholder text can be substituted for hard-coded text, data values from the current app or importing data values from a different application<\/a><\/strong>.<\/p>\n\n\n\n

Card\/Containers<\/h3>\n\n\n\n
\"\"\/<\/a><\/figure>\n\n\n\n

Formatted Cards with Images\/Icons<\/h3>\n\n\n\n
\"\"\/<\/a><\/figure>\n\n\n\n

Tabs<\/h2>\n\n\n\n

Tabbed panels offer a polished navigation container that can include different content on a single page separated by tabbed groups. <\/p>\n\n\n\n

After inserting a tab panel, you are able to change the header tab text and the main content inside the tab body. Additionally, once the tabbed element is selected in m-Painter, you can add additional tabs from the Element Panel.<\/p>\n\n\n\n

Basic Tabs<\/h3>\n\n\n\n
\"\"\/<\/a><\/figure>\n\n\n\n

Lined Tabs<\/h3>\n\n\n\n
\"\"\/<\/a><\/figure>\n\n\n\n

Vertical Tabs<\/h3>\n\n\n\n
\"\"\/<\/a><\/figure>\n\n\n\n

Solid Tabs<\/h3>\n\n\n\n
\"\"\/<\/a><\/figure>\n\n\n\n

Tabs with Icons<\/h3>\n\n\n\n
\"\"\/<\/a><\/figure>\n\n\n\n

Tabs with Badges<\/h3>\n\n\n\n
\"\"\/<\/a><\/figure>\n\n\n\n

Statistical Widgets<\/h2>\n\n\n\n

These elements allow you to display data points along with an icon for a quick and visually appealing graphical representation of total values.<\/p>\n\n\n\n

After inserting a stat widget, you can change the icon used, any accompanying text, and the data total value.<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n
\"\"\/<\/a><\/figure>\n\n\n\n

Progress Bar\/Doughnut Value<\/h3>\n\n\n\n

If utilizing a widget with a progress bar or doughnut circle, the widget can dynamically render the completed portion of the line. <\/p>\n\n\n\n

In order to ensure the line and value make logical sense to the user, make sure the returned value is between 0 – 100.<\/p>\n\n\n\n

Built-in Data Value<\/h4>\n\n\n\n

Once the widget is inserted into the page, click on the highlight the numeric value placeholder in the stat widget.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Once highlighted, use the left-hand component panel to select Insert Totals & Percentages<\/a><\/strong> in order pull in the data value you wish to plot in the widget.<\/p>\n\n\n\n

Alternative Data Value<\/h4>\n\n\n\n

If you wish to pull the data value from an alternative location (i.e. Current app data field, Custom Freemarker variables, import, etc) you can do so by selecting the “STAT CARD”. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Once the STAT CARD is selected, from the right-side Element Panel, select “Edit HTML”. In the source, find the top level element with the ‘mrc-stat-widget-card’ class and within this <div> find the attribute for “data-stat-field”. Configure this by inserting the substitution value or variable. Additionally, find the “mrc-stat-value” <span> element. Change this placeholder value to ‘{val}’ (without the quotes). <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

At runtime, the line and value will render with the appropriate data value.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Buttons<\/h2>\n\n\n\n

Insert a button as a clickable element to serve as a hyperlink <\/a><\/strong>to another page or application. Alternatively, use a button in combination with the Toggle Conditional Rendering<\/a><\/strong> feature to show\/hide other elements on the page.<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n
\"\"\/<\/a><\/figure>\n\n\n\n

Badges<\/h2>\n\n\n\n

Badge elements are a great way to place emphasis on a counter value or labeling component. A common use case is implementing a Notification Badge<\/a><\/strong>.<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

Data Lists<\/h2>\n\n\n\n

A Data List component allows you to retrieve and render data from an external application or data model and apply this to a presentation element within the current application. The selected Data List element will repeat itself for each record found in a retrieved data set.<\/p>\n\n\n\n

More on using Data Lists can be found here<\/a><\/strong>. <\/p>\n\n\n\n

Basic Table List<\/h3>\n\n\n\n
\"\"\/<\/a><\/figure>\n\n\n\n

Basic Unordered List<\/h3>\n\n\n\n
\"\"\/<\/a><\/figure>\n\n\n\n

Basic Vertical Card List<\/h3>\n\n\n\n
\"\"\/<\/a><\/figure>\n\n\n\n

Horizontal Card List<\/h3>\n\n\n\n
\"\"\/<\/a><\/figure>\n\n\n\n

Icon<\/h2>\n\n\n\n

A variety of Font Awesome icons are available to add to your application. You can style this element to change its size, color, etc.<\/p>\n\n\n\n

The selected icon will be placed at the position of your cursor in m-painter.<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

Status<\/h2>\n\n\n\n

Statues are tied to workflow objects within Maintenance applications. However, adding a status field allows you to utilize status workflows built within other applications.<\/p>\n\n\n\n

Click here<\/a> <\/strong>to learn more about the Workflow Status feature.<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

Map<\/h2>\n\n\n\n

Insert a Google map to your page while customizing plot point locations as well as marker text for each plot point.<\/p>\n\n\n\n

Click here<\/a> <\/strong>to learn more about inserting Google Maps.<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

Image<\/h2>\n\n\n\n

This feature allows you to insert an image to the page from an image file on the m-Power server or a web address. Substitute the filename in the image path with a data field from your application to create an image that will dynamically display to your end user based on the record displayed.<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

Image Path on the Server<\/h3>\n\n\n\n

Enter the directory path to find the image file on the server. Include the file name in the path. Use the “Append Fields to Path” pulldown to append data field substitutions into your path.<\/p>\n\n\n\n

For example, \/mrcjava\/images\/products\/A1060.jpg.<\/code> Alternatively, if using a dynamic substitution as the file name, the path might look like this; \/mrcjava\/images\/products\/${row.PRODNUM?url}.jpg<\/code><\/p>\n\n\n\n

Height\/Width<\/h3>\n\n\n\n

Optionally, set the height and width of your image. If a size is not set, the image will render as it appears directly in the image file.<\/p>\n\n\n\n

Do not specify the unit of measure as this is already set in pixels.<\/p>\n\n\n\n

Alt Text<\/h3>\n\n\n\n

This attribute provides alternative text\/information for an image if a user for some reason cannot view it (because of slow connection, an error in the source path, or if the user uses a screen reader).<\/p>\n","protected":false},"excerpt":{"rendered":"

The Component Selector includes many predesigned element templates that can be added to the page in order to make the UI more helpful. These predesigned elements include cards, tabs, buttons, statistical widgets, etc. Once an element template has been selected and added to your page, you can customize the look\/style…<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[255],"ht-kb-tag":[],"class_list":["post-13913","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-mpainter"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/13913","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/comments?post=13913"}],"version-history":[{"count":12,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/13913\/revisions"}],"predecessor-version":[{"id":14075,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/13913\/revisions\/14075"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=13913"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=13913"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=13913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}