Example: Data & UI Module

in this example we’re going walk through, step by step, how to create a module with a custom ui that could either be used as a private module for your agency or shared publicly in the marketplace to deliver turnkey site solutions to your clients and more it is recommended that you download our example custom ui demo module repository from github so that you have all of the code and asset files available at each step of this guide and can easily follow along to and have your module end up looking exactly the same if developing a custom ui then you will have to supply all elements of the module, including but not limited to tables, graphql, data processing etc custom ui custom ui modules open up the ability for complete flexibiltiy within siteglide admin and allows for truly unique experiences for your customers a module with a custom ui will securely load a page within a frame in siteglide admin this page can be developed in any language that can run on a siteglide site setting up your files a custom ui modules will follow the same folder setup as other modules, except when you come to build the ui itself to display in siteglide admin the ui will be kept in the `private` folder of the module as we do not want it to be discoverable outside of the frame within siteglide admin within our private folder we can store any files that siteglide natively supports, such as graphql, liquid, assets etc more information about folder structure can be found at top level folders authentication to ensure that the custom ui is only being accessed by logging in users of siteglide admin, we require authentication to be added to each page that will be used within the custom ui this is stored in the yaml of the pages and is as follows response headers > { "x frame options" null, "content security policy" "frame ancestors https // siteglide com" } authorization policies \ modules/siteglide system/module is in admin \ //page content here the response headers yml allows siteglide admin to view the content of the file when it is loaded the authorization policies yml will run a check to ensure that the user has an active session within siteglide admin, if not then it will display an error page as well as the yaml, any links within your custom ui has to include a liquid tag to apply the authencation string on the link for example if you are linking from your custom ui's index page to the add new item page, your link would be as follows add new item this include will create a hash onto the end of the url that is then used in the above authorization policy to decide whether to show the page if the include is missing then following the link will throw an error within siteglide admin you can also control access to certain areas of a page with the module is in admin function {% function access allowed = 'module is in admin' %} {% if access allowed %} content to show if loaded via admin {% endif %} using siteglide features on a custom ui page if you want to use siteglide features like forms on your custom ui page, make sure it contains {% include "modules/siteglide system/siteglide head" %} you'd normally add this code by adding a page template but to do so, you'll need to add a page template inside your module folder e g (replace 00 with your module id) /modules/module 00/private/views/layouts/templates/1 and reference it in the yaml at the top of the page in cli as \ layout 'modules/module 00/templates/1 \ this allows you to namespace your internal page template so you can use it within the module but it won't appear alongside the rest of the page templates on the site you install it on module details once your module is created, you will need to tell siteglide admin to load your custom ui you will need to take the slug of the custom ui's homepage and enter that into your module detials within portal when editing the details about your module, there is a field called "custom ui path", entering in the slug there will change the menu item for your module to then load your custom ui instead of the default siteglide module ui in our example the path for our custom ui homepage is module 72/module iframe/index