{"id":9058,"date":"2018-05-21T14:46:25","date_gmt":"2018-05-21T19:46:25","guid":{"rendered":"https:\/\/www.mrc-productivity.com\/docs\/?page_id=9058"},"modified":"2023-12-06T15:43:33","modified_gmt":"2023-12-06T21:43:33","slug":"bootstrap-key-features","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/bootstrap-key-features","title":{"rendered":"Bootstrap Key Features"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>mrc is proud to announce the rollout of the latest edition to m-Power: The Bootstrap templates. These templates were designed to not only look fantastic on a PC, but also be fully responsive down to mobile devices. We&#8217;ve also chocked these templates full of many new features (the notable ones are listed below). Finally, these templates were built off of the Bootstrap 4.0 standards &#8212; which should allow developers to easily customize these using many of the numerous classes pre-built into the framework. This documentation will break down these key features based on the following perspectives:<\/p>\n\n\n\n<p><a name=\"end\"><\/a>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">End-User Benefits of Bootstrap Features<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Video Overview<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Key Bootstrap Features for Endusers\" width=\"643\" height=\"362\" src=\"https:\/\/www.youtube.com\/embed\/ALxq0qUi5LQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Multi-column sort<\/h3>\n\n\n\n<p>Users can now sort by multiple columns at one time via this user interface. However, users can continue, so long as it has been enabled, to reorder by clicking on the column heading.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"\/docs\/images\/sort0.png\" alt=\"\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Column Selection\/Re-order<\/h3>\n\n\n\n<p> Disabled by default (via application properties). Once enabled, users can use this interface in one of two ways. First they can drag any column of their choosing by clicking and dragging on the horizontal arrows to the left of the column heading. Secondly, they can open the dialog to choose columns as hidden or shown. All preferences are saved in the browser via a cookie.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/reorder0.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-danger\"><strong>Note:<\/strong> This property is not supported in the Grid maintainer templates. This feature is also not intended to be used in conjunction with the sticky header feature in reports.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Filtering Visibility<\/h3>\n\n\n\n<p>Any run-time filters that haves been specified will be on display directly between the navigation panel and the application title. This allows end-users to always have visibility to their current search parameters. Further, developers can choose a 3rd option (available via the compile options) that will automatically include the filter boxes directly above the data table. This may be optimal for applications where only a few filtering options exist.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/filter0.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">List\/Detail View<\/h3>\n\n\n\n<p> There is a button on all grid based Bootstrap templates that allow users to toggle between a traditional grid based view and a Detail view. The detail view consists of a data listing on the left. When one is clicked, the pertinent details will be displayed on the right. Developers can choose if the grid or the detail view should be the default view (via application properties).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/bootstrap0.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Responsiveness<\/h3>\n\n\n\n<p> Mobile support comes in the way of responsive design. Responsive design, by definition, allows the application layout to change on-the-fly based on the end-user&#8217;s device. These templates will always use 100% of the screen real estate by default and then reorganize the on-screen elements based on available space. For a traditional grid based template, developers can edit the grid based design as well as either side the detail view.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"\/docs\/images\/webphone0.png\" alt=\"\" width=\"665\" height=\"252\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Placeholder Text<\/h3>\n\n\n\n<p>By default, all input boxes utilize default placeholder text that is in place to guide end-users with suggestions. These can be edited via the Input properties window. More information <a rel=\"noopener\" href=\"\/docs\/bootstrap\/text-field-properties\" target=\"_blank\">here<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pulldown Menus<\/h3>\n\n\n\n<p> End-users who utilize our Data Listing with Web Form template will see a new pulldown menu that separates the available action modes. This means allowing end-users to interact with larger buttons that should reduce in any end-user confusion.<\/p>\n\n\n\n<p><img decoding=\"async\" src=\"\/docs\/images\/pulldown0.png\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sticky Headers <\/h3>\n\n\n\n<p>Disabled by default, sticky headers allow the end-user to always see the column heading on-screen no matter how far they may have scrolled down the page.<br><b>Note:<\/b> This feature is not intended to be used in conjunction with the column re-order feature.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Menu Navigation<\/h3>\n\n\n\n<p>Additional navigation options, such as left or right side navigation is available for Bootstrap Data Dictionaries via the Servlet Properties. Look for the following properties to modify: &#8220;Left Side Navigation Menu&#8221; and &#8220;Header Menu Display Type.&#8221; Below is a screen shot of the left side navigation option.<\/p>\n\n\n\n<p><img decoding=\"async\" src=\"\/docs\/images\/leftnav0.png\"><\/p>\n\n\n\n<p><a name=\"dev\"><\/a>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Developer Benefits of Bootstrap Features<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Form Layout<\/h3>\n\n\n\n<p>Developers can now rearrange elements on any single row template directly within m-Painter\u2019s graphical interface. This includes adding new rows\/columns as well as rearranging existing elements. More information can be found <a rel=\"noopener\" href=\"\/docs\/bootstrap\/form-layout\" target=\"_blank\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/panelLayout3.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Pulldowns<\/h3>\n\n\n\n<p>We use pulldown menus throughout the m-Power interface (think of the cogwheel on the Manage application screen) \u2014 it allows you to put several menu items in one space \u2014 accessible when clicking on a button\/element. More information can be found <a rel=\"noopener\" href=\"\/docs\/bootstrap\/m-painter-pulldown-menu\" target=\"_blank\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/pulldown5.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Edit Element Dialog<\/h3>\n\n\n\n<p>The edit element dialog was added as it gives developers the chance to tinker with any HTML element by only looking at a specific section at a time. Better still, new navigation has been added to let developers travel the element\u2019s parent, children, or siblings. We\u2019ve even added the ability to add several dozen common elements to the page (such as progress bars, cards, buttons, alerts, and badges, to name a few.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conditional Rendering<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/conditionalvisibilitypanel.png\" alt=\"\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>You probably already know that m-Power comes with a bunch of features already available to plug into your apps to help you secure what a user can see at run-time (role based menuing and user privileges to name two).<\/p>\n\n\n\n<p>This feature lets you harness these two features more easily by giving you a button to click on to implement in your app without having to delve into specific syntax. <\/p>\n\n\n\n<p>Imagine you have a scenario where only salesman should see customers\u2019 contact information. You could use this feature to ensure that anyone outside of the salesman group would not have access to this information. Additionally, this feature also includes an additional feature that will conditionally hide or show elements based on a user\u2019s input. So for an example, if a user specifies that an order has been closed, you can automatically show the \u201cDate Closed\u201d input. Otherwise, this element will remain hidden. More information can be found <a rel=\"noreferrer noopener\" href=\"https:\/\/www.mrc-productivity.com\/docs\/bootstrap\/visibility-controls-via-m-painter\" target=\"_blank\">here<\/a>.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Text Input Dialog<\/h3>\n\n\n\n<p>Developers want to do all sorts of interesting things with inputs; From making them required, to setting auto focus, to wanting to customize it in ways we haven\u2019t yet considered. <\/p>\n\n\n\n<p>To help facilitate this need, we\u2019ve updated our \u201cInput Properties\u201d input to be able to add these types of features in without having to dive into the source code. More information can be found <a rel=\"noreferrer noopener\" href=\"https:\/\/www.mrc-productivity.com\/docs\/bootstrap\/text-field-properties\" target=\"_blank\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/text-field-props.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Popup Dialog Options<\/h3>\n\n\n\n<p>Occasionally, developers create maintenance applications within Popup Dialogs. The trouble then becomes what to do with that popup dialog once the record is submitted? Sometimes the need is to just close the window, other times it might be to refresh the page, while others you may want to redirect elsewhere. We\u2019ve improved this process by giving developers a simple UI to make these selections within m-Painter. More information can be found <a rel=\"noopener\" href=\"\/docs\/m-painter-app-prop\/working-with-links#Dialog\" target=\"_blank\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/hoveroptions0.png\" alt=\"\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Overview mrc is proud to announce the rollout of the latest edition to m-Power: The Bootstrap templates. These templates were designed to not only look fantastic on a PC, but also be fully responsive down to mobile devices. We&#8217;ve also chocked these templates full of many new features (the notable&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[263],"ht-kb-tag":[],"class_list":["post-9058","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-bootstrap-templates"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/9058","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=9058"}],"version-history":[{"count":27,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/9058\/revisions"}],"predecessor-version":[{"id":13891,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/9058\/revisions\/13891"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=9058"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=9058"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=9058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}