{"id":1489,"date":"2010-02-15T03:45:50","date_gmt":"2010-02-15T09:45:50","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/docs\/?page_id=1489"},"modified":"2023-12-07T11:18:32","modified_gmt":"2023-12-07T17:18:32","slug":"create-dropdowns-in-m-painter","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/create-dropdowns-in-m-painter","title":{"rendered":"Create Dropdowns in m-Painter"},"content":{"rendered":"\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Click <a href=\"https:\/\/www.mrc-productivity.com\/legacy\/m-painter-app-prop\/create-dropdowns-in-m-painter\">here<\/a> to view the legacy documentation for this feature.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>Dropdowns are a vital UX component that makes life easier for your end-user by giving them a choice of options at run-time, rather than a free-form text input. This documentation will explain how to implement via m-Painter.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Video Walkthrough<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Creating Dropdowns in m Painter\" width=\"643\" height=\"362\" src=\"https:\/\/www.youtube.com\/embed\/-K8VRK4Sd8I?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<h2 class=\"wp-block-heading\">Implementation<\/h2>\n\n\n\n<p>Click on any input box. Within the right side element panel, select &#8220;Convert to&#8230;&#8221; and pick &#8220;Drop-down list.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/ddl1.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-info\">This documentation largely assumes you will want to create a drop-down list. That being said, the same process outlined here will also work for radio buttons, checkboxes, and comboboxes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Select Data Source<\/h3>\n\n\n\n<p>You will now be taken to a Wizard that will help guide you through the process. The first step is to tell m-Painter where the data from your dropdown list will be located.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/ddl2.png\" alt=\"\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Data Model &#8212; Choose this option if you would like to use a pre-existing data model (or would like to create one right now).<\/li>\n\n\n\n<li>m-Power Application &#8212; Choosing this option will let you select from a list of pre-existing Option List retrievals.<\/li>\n\n\n\n<li>Query Current App &#8212; (Not available in Maintainers) &#8212; This option will query the current application&#8217;s data to come up with a distinct list of available options. Depending on the overall size of the result set, this option could be quite slow.<\/li>\n\n\n\n<li>Quicklist &#8212; This allows you to create your own reusable static dropdown list. The best use cases for this are when the list of options is relatively low, relatively unchanging, and a database table for this list doesn&#8217;t exist. <\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Data Model Dropdown Lists<\/h3>\n\n\n\n<p>Select the Data Model you wish to use, or conversely, create a new data model. In either case, ensure that you have specified which field will be the List value and which will be the List description.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/ddl3.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>After selecting your data model, click the green &#8220;Next: List Configuration&#8221; option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/ddl4.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>If you want your dropdown list to be required, remove the Blank Option Text. If you would like to change your dropdown to a different type, you can also do that here.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">m-Power Application Dropdown Lists<\/h3>\n\n\n\n<p>Selecting this choice, you are brought to a list of all Option List retrievals built in this dictionary. After selecting one, click the green &#8220;Next: List Configuration&#8221; option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/ddl4.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>If you want your dropdown list to be required, remove the Blank Option Text. If you would like to change your dropdown to a different type, you can also do that here.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Query Current App Dropdown Lists<\/h3>\n\n\n\n<p>As this option already knows where the data is coming from, you are immediately brought into the configuration screen:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/ddl5.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Choose Ascending\/Descending to control the order of the data found in the dropdown list. If you want your dropdown list to be required, remove the Blank Option Text. If you would like to change your dropdown to a different type, you can also do that here.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Quicklist Dropdown Lists<\/h3>\n\n\n\n<p>More information about Quicklists can be found <a href=\"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/quick-lists\">here<\/a>.<\/p>\n\n\n\n<p>After selecting an existing (or creating a new) quicklist, you will be brought to the configuration screen:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/ddl6.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>If you want your dropdown list to be required, remove the Blank Option Text. If you would like to change your dropdown to a different type, you can also do that here.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Non Dropdown List Options<\/h2>\n\n\n\n<p>While dropdown lists are the most prevalent choice in terms of replacing text boxes with predefined lists, m-Power supports these other options as well. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comboboxes<\/h3>\n\n\n\n<p>Comboboxes allow users to still pick an option from a dropdown list, but they also have the ability to type within the input. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/ddl7.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Radio Buttons<\/h3>\n\n\n\n<p>Radio buttons will display all available options to the user at once. In m-Painter you can specify on how many options you would like to appear on each line.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/ddl8.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Bootstrap Buttons<\/h3>\n\n\n\n<p>Like Radio Buttons, Bootstrap buttons will display all options available at one time. However, much improved, the area for a user to click the actual button is much larger so the user experience is improved considerably.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/ddl9.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Checkboxes<\/h3>\n\n\n\n<p>Available in very limited use case scenarios, checkboxes allow your user to select more than 1 value.  In m-Painter you can specify on how many options you would like to appear on each line.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/ddl10.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><a class=\"anchor\" name=\"a5\"><\/a>Other Notes<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To remove a dropdown list, select the dropdown list and click the edit button within the blue menu. Then click the red &#8220;Remove Option List&#8221; button.<\/li>\n\n\n\n<li>If you select &#8220;Radio Buttons&#8221; and a &#8220;Blank Option Text&#8221;, the text will receive its own radio button.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Overview Dropdowns are a vital UX component that makes life easier for your end-user by giving them a choice of options at run-time, rather than a free-form text input. This documentation will explain how to implement via m-Painter. Video Walkthrough Implementation Click on any input box. Within the right side&#8230;<\/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-1489","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\/1489","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=1489"}],"version-history":[{"count":17,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1489\/revisions"}],"predecessor-version":[{"id":13914,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1489\/revisions\/13914"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=1489"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=1489"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=1489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}