{"id":10481,"date":"2018-12-18T10:24:03","date_gmt":"2018-12-18T16:24:03","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/techblog\/?p=10481"},"modified":"2023-12-06T14:03:25","modified_gmt":"2023-12-06T20:03:25","slug":"creating-toggle-switches-in-bootstrap-applications","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/techblog\/?ht_kb=creating-toggle-switches-in-bootstrap-applications","title":{"rendered":"Creating Toggle Switches in Bootstrap applications"},"content":{"rendered":"\n

Overview<\/h2>\n\n\n\n

Click here<\/a> to access current documentation for this feature.<\/em><\/p>\n\n\n\n

Bootstrap dictionaries support the use of Toggle Switches.  To implement these, you must be using a Maintainer application. This post will walk you through how to add this to your maintainer form.<\/p>\n\n\n\n

A visual of a toggle switch can be seen here<\/a>. Toggle switches work for fields that have one of two possible values, such as ‘Yes’ or ‘No’, ‘0’ or ‘1’, ‘Male’ and ‘Female’, etc.<\/p>\n\n\n\n

Implementation<\/h2>\n\n\n\n

In the Field Settings tab of your maintenance application, find the field that you would like to create a toggle switch for. This should be a field that only accepts two values (Yes\/No, 0 or 1, Male or Female, etc.)<\/p>\n\n\n\n

In the validity relation (\u2018Validity Rel\u2019) column, select \u2018CB\u2019 for checkbox. In Validity Check Value, enter here the value you want to write to the database when the switch is toggled on. <\/p>\n\n\n\n

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

Compile the application (if rebuilding an existing app, make sure to overwrite the HTML on the maintainer form). Open m-Painter and locate your field in your maintainer form page. There should be a checkbox here. Right-click on the row and use the ‘User Interface’ -> ‘Edit Element’ tool to bring up the HTML source. <\/p>\n\n\n\n

 By default, the checkbox and label will look like this: <\/p>\n\n\n\n

<label>\n<input ${checked('active',row.active,'y')}=\"\" class=\"mrcinput\" ${disabled('active')}=\"\" id=\"ACTIVEY\" name=\"ACTIVE\" type=\"checkbox\" value=\"Y\" \/> Y<\/label><\/code><\/pre>\n\n\n\n
Change this to:<\/p>\n\n\n\n
<div class=\"toggleSwitch\"><\/strong>
<input ${checked('active',row.active,'y')}=\"\" class=\"mrcinput\" ${disabled('active')}=\"\" id=\"ACTIVEY\" name=\"ACTIVE\" type=\"checkbox\" value=\"Y\" \/>
<label for=\"ACTIVEY\"><\/label><\/div><\/strong><\/code><\/pre>\n\n\n\n
 The value inside <label for=\"ACTIVEY<\/strong>\"><\/em><\/code> has to match the ID value in id=\"ACTIVEY<\/strong>\"<\/em><\/code><\/p>\n\n\n\n
After pressing ‘OK’ and saving your changes, you should visually see on the maintainer form at runtime the checkbox is now a toggle switch (If not, clear your browser cache completely and refresh the application)<\/p>\n\n\n\n
\"\"\/<\/figure>\n","protected":false},"excerpt":{"rendered":"
Overview Bootstrap dictionaries support the use of Toggle Switches.  To implement these, you must be using a Maintainer application. This post will walk you through how to add this to your maintainer form. A visual of a toggle switch can be seen here. Toggle switches work for fields that have…<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[154],"ht-kb-tag":[],"class_list":["post-10481","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-bootstrap"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/10481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10481"}],"version-history":[{"count":23,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/10481\/revisions"}],"predecessor-version":[{"id":12217,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/10481\/revisions\/12217"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10481"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-category&post=10481"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-tag&post=10481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}