{"type":"doc","content":[{"type":"paragraph","content":[{"text":"Starting in FreePBX 13 the development team made the decision to apply a consistent look and feel to all of FreePBX. The below guidelines should be taken into account when you are creating or editing your module for FreePBX 13.","type":"text"}]},{"type":"paragraph"},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{},"macroMetadata":{"macroId":{"value":"1ad8ae3a-f170-4bfb-b353-bad9ab1071ed"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"f281e536-12a9-4669-b459-fce64dbc5cfd"}},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Getting Started","type":"text"}]},{"type":"paragraph","content":[{"text":"Starting with FreePBX 12 we now incorporate Twitter Bootstrap into the project. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. You should give it a once over before continuing with this article at: ","type":"text"},{"type":"inlineCard","attrs":{"url":"http://getbootstrap.com/"}},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Since most of FreePBX is user driven \"form\" based input you'll want to focus on the \"form\" elements ","type":"text"},{"text":"http://getbootstrap.com/css/#forms","type":"text","marks":[{"type":"link","attrs":{"href":"http://getbootstrap.com/css/#forms"}}]}]},{"type":"paragraph","content":[{"text":"We also use bootstrap's \"grid\" system ","type":"text"},{"text":"http://getbootstrap.com/css/#grid","type":"text","marks":[{"type":"link","attrs":{"href":"http://getbootstrap.com/css/#grid"}}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Using the Grid","type":"text"}]},{"type":"paragraph","content":[{"text":"When we use the \"grid\" to create a module page we are trying to achieve two goals. First when we are in a desktop environment we want the page to be divided with 66% of the space given to the form elements while 33% is given to what we now call \"bootnav\" (formerly called rnav).","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1136,"alt":"full.png","id":"efed6858-b84a-4d8f-a3df-7f38d2330865","collection":"contentId-10093035","type":"file","height":261}}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"When the page shrinks to less than 768px width we hide our \"bootnav\". Since bootstrap \"stacks\" when the width is less than 768px by default the nav will jump to the bottom of the page, however since it is hidden it is not seen and our primary form display becomes full width.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":683,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":683,"alt":"mobile.png","id":"8085b73a-8f7c-47e5-aafa-01e672fed09a","collection":"contentId-10093035","type":"file","height":282}}]},{"type":"paragraph"},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"You may be asking as this point. \"Well if I'm on a small device and have no rnav or 'bootnav' how can I navigate?\". On smaller devices users are encouraged to use the new search box on the upper nav bar to find what they want.","type":"text"}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":251,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":251,"alt":"search.png","id":"f8ab7c6e-1845-4b68-9f8a-c6d7d01383a5","collection":"contentId-10093035","type":"file","height":42}}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Bootstrap itself works with columns of 12. So every row ","type":"text"},{"text":"must","type":"text","marks":[{"type":"strong"}]},{"text":" have 12 columns total. To get our desired 66% to 33% ratio we are going to use 9 for the left half and 3 for the right half.","type":"text"}]},{"type":"paragraph","content":[{"text":"So for our page layout (usually in page..php or under the \"views\" folder we want to start off like so:","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"bda4df97-b851-44b5-9fe8-2ed46f6f7be4"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"

\n Form Elements here!\n

","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Adding \"Bootnav\"","type":"text"}]},{"type":"paragraph","content":[{"text":"Adding Floating Right Nav to Your Module","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/FP/pages/10650032"}}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Adding Tabbable Pages","type":"text"}]},{"type":"paragraph","content":[{"text":"We are going to throw a lot of html in your face right now but quickly review the below html:","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"e4db1856-3e81-48cd-aaac-43335f738b9d"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"

Tab1 (active!)
Tab2

\n Tab 1 Data (Shown)\n

\n Tab 2 Data (Hidden)\n

","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"You'll notice we've now added a div with a class of \"freepbx-container\". This is important as it helps our CSS and Javascript match to your page and automatically perform all of the beautifulness that needs to happen. You don't have to do a thing (well besides any special tricks you'd like to perform)","type":"text"}]},{"type":"paragraph","content":[{"text":"The above HTML will produce output looking like below","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":952,"alt":"demo3.png","id":"af546e77-c27e-4eb6-a973-b3edcbf14d80","collection":"contentId-10093035","type":"file","height":97}}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"You can click on tab2 and watch as javascript hides the first page and shows the second (hidden) page without refreshing the entire page. Everything is still stored on the page so that when the \"form\" is submitted everything will go along with it. No need to keep track of multiple pages or tags","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":962,"alt":"demo4.png","id":"5d5e8646-eef1-48e6-a173-e0e166d3ab0c","collection":"contentId-10093035","type":"file","height":116}}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"So lets break apart the HTML used to create this","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"46ab6727-da9d-42be-8919-52e4fc693de4"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"

\n \n

","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"First and foremost we've got the \"freepbx-container\" div. Remember that if you want to use tabbing pages you need to wrap the tabs inside of this so that the javascript and css will be applied.","type":"text"}]},{"type":"paragraph","content":[{"text":"Next up we've got the form element. Make sure you've added all necessary data tags that are needed by the traveling page buttons (such as data-fpbx-delete, the class \"fpbx-submit\" and role=\"form\"). For more information on this please see ","type":"text"},{"text":"Adding Form Buttons to Your Module (Action Bar)","type":"text","marks":[{"type":"link","attrs":{"href":"https://sangomakb.atlassian.net/wiki/spaces/FP/pages/10420681/Adding+Form+Buttons+to+Your+Module+Action+Bar"}}]}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"c5124df0-f813-40d2-83c8-7c150bb63436"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"Beyond that we have our \"tablist\" in which we can see our active tab.","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"8c65de99-5f7d-4f1d-9c50-b947c9e68d83"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"

Tab1 (active!)
Tab2

","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"Then we have the wrapper div called \"display\". Your pages ","type":"text"},{"text":"must","type":"text","marks":[{"type":"strong"}]},{"text":" be wrapped in this div to have the border surrounding them. Each tab is contained in an \"info-pane\" div with an id that matches the tab's data-name. Make sure to add the \"hidden\" class to any tab page that should not be shown on initial page load (usually everything but your active tab).","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"7c9a8a23-05ad-4e6e-9e65-1c4f475059d9"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"

Tab 1 Data (Shown)

Tab 2 Data (Hidden)

","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Add Form Elements","type":"text"}]},{"type":"paragraph","content":[{"text":"Now that we've got a nice tabbed page going on we should add our form elements to each page along with the optional auto hiding help text.","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"3c256a67-82af-4477-99be-4f27babfa3e4"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"

Tab1 (active!)
Tab2

Section 1

\n Prompt Text\n \n

\n \n

\n Help Text\n

","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"The above page will output the below result. Let's spend some time dissecting each bit.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":941,"alt":"demo5.png","id":"252c4584-9496-4ef1-81e7-4c89c913209d","collection":"contentId-10093035","type":"file","height":178}}]},{"type":"paragraph","content":[{"text":"Here is the only part we are caring about at this point, which is everything inside our first tab.","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"1b7b3896-458d-4436-a09a-b874c7ec9f1c"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"

Section 1

\n Prompt Text\n \n

\n \n

\n Help Text\n

","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"First off make sure everything is in a \"container-fluid\" element which gives us a little more padding","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"b3d24b4c-1be6-4581-a304-75f13ab71edb"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"

","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"The next part is our section. Note the usage of data-id for the section instead of just id. This is because many of the section ids have spaces, which are not valid.","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"30b413ee-f9ee-4605-bdf6-e2b88f782b7d"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"

Section 1

\n Text for inside my section!\n

","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"Now we start building the first form element. Make sure to use the wrapper class \"element-container\" so that everything works as expected!","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"20bbaed1-159f-46db-bdc6-d59535e2a9ae"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"

\n It'll go here!\n

","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"Lets add some rows and columns to separate everything out. Use the class \"control-label\" for each label and make sure that the for points to the id of the form element.","type":"text"}]},{"type":"paragraph","content":[{"text":"Warning: If you don't add 'form-horizontal' to the form-group class, your labels will be too high!","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"6080fd46-c43d-4213-b316-2ceb75069e61"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"

\n Prompt Text\n

\n \n

","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"If your form input needs an explanation, you lay it out slightly differently, by adding a 'fpbx-help-icon' and a new full width row. Before adding a help row, think if you could rephrase the name, or add better placeholder text instead!","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"2ea5583e-0927-40c7-8a74-c1c498dd5053"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"

\n Prompt Text\n \n

\n \n

\n Help Text\n

","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Remember that any form element you want to error out you simply need to call \"warnInvalid\" like so (against any jqueried element). This will error out the element until input has changed:","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"7059136b-d317-4029-83fc-5c3e2fcb5732"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"warnInvalid($(\"#element1\"),\"Message about why the data is/was wrong\");","type":"text"}]}]}]}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":944,"alt":"demo6.png","id":"0d531da1-621a-4c65-9cb7-3ccba6e11ec6","collection":"contentId-10093035","type":"file","height":175}}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Validation Errors","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"959f581b-617d-412f-9284-a585b8498007"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Special Classes","type":"text"}]},{"type":"paragraph","content":[{"text":"btn-file","type":"text"}]},{"type":"paragraph","content":[{"text":"Used to wrap file uploads.","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"a7c3baba-e4e4-4fb3-a863-a9fbae67f56d"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"\n Browse \n\n","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"delAction","type":"text"}]},{"type":"paragraph","content":[{"text":"Adds Confirmation to delete links.","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"e1c51263-6686-4465-8c2e-2f8a29b0bd7a"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"password-meter and toggle-password","type":"text"}]},{"type":"paragraph","content":[{"text":"Adds a password strength meter and a show hide toggle to password fields. ","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"156a09c4-caca-4f8e-a3f8-3cfe1551fd0f"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"

\n \">\n \n

","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"clicktoedit","type":"text"}]},{"type":"paragraph","content":[{"text":"Framework 13.0.7.4+","type":"text"}]},{"type":"paragraph","content":[{"text":"Makes the field read only until the user clicks on it. This is used in password fields to prevent browsers from auto-populating inappropriately ","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"e2e176c3-174c-48b9-9dbb-388730553f9c"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"

\n \">\n \n

","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Standard Icons","type":"text"}]},{"type":"paragraph","content":[{"text":"http://fortawesome.github.io/Font-Awesome/icons/","type":"text","marks":[{"type":"link","attrs":{"href":"http://fortawesome.github.io/Font-Awesome/icons/"}}]}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"bae88587-210c-4270-b5cc-08e1e6768c90"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Purpose","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Icon to use","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Delete","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"fa fa-trash","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"List","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"fa fa-list","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Add","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"fa fa-plus","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Report","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"fa fa-area-chart","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Close","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"fa fa-times","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Settings","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"fa fa-cog","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"View Functions","type":"text"}]},{"type":"paragraph","content":[{"text":"Available Framework13.0.1alpha67 ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1127,"alt":"show_help_show_depricated.png","id":"8d900661-49d4-4319-bf7f-ed94b97f2757","collection":"contentId-10093035","type":"file","height":213}}]},{"type":"paragraph"},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1194,"alt":"image2018-1-20_9-23-17.png","id":"25bd74c0-998d-46c1-af66-48d076715028","collection":"contentId-10093035","type":"file","height":99}}]},{"type":"paragraph"},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"5d47bb8f-189e-449d-94b2-ddd9a83ae352"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1},"content":[{"type":"codeBlock","content":[{"text":"//show_deprecated($message=\"\", $dismisable = true, $logit = false);\n//show_help($message, $title='' ,$collapse=false, $collapseable=true, $class='default')\necho show_deprecated(_(\"This module has been deprecated and may not work properly in this or future releases. This module is no longer maintained\"))?>\necho show_help('Help Text', 'title open')?>\necho show_help('Help Text', 'title collapsed',true)?>\necho show_help('Help Text', 'title collapsed',true, true,\"info\")?>","type":"text"}]}]}]}]}],"version":1}

Browser not supported