Toggle switches are an alternative option to a checkbox input. Clicking the switch will slide the toggle to the “enabled” option. This input option works best when there is a single value to submit to the database, such as ‘Y’, ‘N’, ‘Active’, ‘Inactive’, etc.<\/p>\n\n\n\n To implement a toggle switch, you must be using a Maintainer application. <\/p>\n\n\n\n In the Field Settings tab of your maintenance application, change the “Basic field attributes” dropdown to “Form validation and auditing”. Find the field that you would like to create a toggle switch over.<\/p>\n\n\n\n In the Validity Relation column, select the “Check box” option. In the Validity Value column, enter the value you want to write to the database when the switch is toggled on.\u00a0<\/p>\n\n\n\n After compiling the maintainer, open m-Painter and locate your checkbox field in your maintainer form page. <\/p>\n\n\n\n Select to highlight the checkbox element. On the right-side Element Panel, select the “Convert Input to…’ dropdown and select “Toggle Switch”<\/p>\n\n\n\n Selecting this will immediately convert the checkbox to a toggle switch.<\/p>\n\n\n\n The default text for the enabled\/disabled toggle are ‘Yes’ and ‘No’. You have the option of customizing the text for these different statuses. <\/p>\n\n\n\n Select the toggle switch in m-Painter and from the Element Panel -> Element Options, scroll down to the “Toggle Switch Options” section. Here you can set the desired “Checked Text” and the “Unchecked Text”.<\/p>\n\n\n\n Note: <\/strong>If changing the toggle text options, you will also need to override the width and max-width styles of the toggle switch in order to accommodate the longer text. To do this, select the “Styling Overrides” section from the Element Panel and click “Class and Style Attributes”. <\/p>\n\n\n\n Set the following style and change the px size to best suit your needs: width: 100px; max-width: 100px;<\/p>\n\n\n\n Save and run your maintainer.<\/p>\n\n\n\n An alternative display option for radio buttons, you can choose to render Bootstrap themed buttons. <\/p>\n\n\n\n To implement, select the input you wish to add the button group. Then from the Element Panel, select “Insert Option List”. <\/p>\n\n\n\n Select which datasource type will be used to populate the button group: Data Model, m-Power Application, or Quicklist.<\/p>\n\n\n\n Next, choose the specific dataset to available buttons items from.<\/p>\n\n\n\n Finally, in the List Configuration screen select the “Bootstrap Buttons” from the Option List Style.<\/p>\n\n\n\n If do not want an option for the user to select\/submit a “blank”, be sure to remove the ‘Select a value’ text from the “Blank option text” input.<\/p>\n\n\n\n While inputs typically default to traditional input boxes, developers can convert these to other inputs. Most m-Power users are familiar with converting inputs to a drop-down list or a combobox, m-Painter now supports two new input options: Toggle Switches and Bootstrap Radio buttons.\u00a0 Toggle Switches Toggle switches are an alternative…<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[255],"ht-kb-tag":[306,303,305],"class_list":["post-13664","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-mpainter","ht_kb_tag-bootstrap","ht_kb_tag-form","ht_kb_tag-input"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/13664","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=13664"}],"version-history":[{"count":3,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/13664\/revisions"}],"predecessor-version":[{"id":13669,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/13664\/revisions\/13669"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=13664"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=13664"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=13664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"\/](\"\/docs\/vue-images\/toggleNo.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/vue-images\/toggleYes.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"https:\/\/www.mrc-productivity.com\/techblog\/images\/toggleswitch1.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/vue-images\/toggleBox.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/vue-images\/toggleElementPanel.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/vue-images\/toggleFinal.jpg\")
<\/figure>\n\n\n\nToggle Switch Options<\/h3>\n\n\n\n
![\"\"\/](\"\/docs\/vue-images\/toggleOptions.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/vue-images\/toggleStyleOverride.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/vue-images\/toggleInactive.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/vue-images\/toggleActive.jpg\")
<\/figure>\n\n\n\nBootstrap Radio Buttons<\/h2>\n\n\n\n
![\"\"\/](\"\/docs\/vue-images\/buttonsList.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/vue-images\/buttonsInput.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/vue-images\/buttonsDatasourceType.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/vue-images\/buttonsQuicklist.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/vue-images\/buttonsListStyle.jpg\")
<\/figure>\n\n\n\n<\/figure>\n","protected":false},"excerpt":{"rendered":"