How to create a custom user interface in a Craft CMS plugin
![Oscar de la Hera Gomez](https://www.delasign.com/CDN/headshots/profile.webp)
![A flower that represents Craft CMS, beneath it sits the text "Custom UI."](https://www.delasign.com/CDN/images/How-to-create-a-custom-user-interface-in-a-Craft-CMS-plugin.webp)
A step by step guide on creating UI within a Craft CMS Control Panel section that visualizes subscriber entries.
The following tutorial walks you through create custom UI for a Craft CMS control panel section within a plugin that visualizes subscribers, an entry channel within our Craft CMS with the intention of allowing you to send them an email through a button. It builds on top of our Open Source Craft CMS starter project which can be found at the repository below.
We recommend that you download or clone our Open Source starter project, check out the tutorial/cp-section branch and complete the steps below. The changes can be found on the tutorial/cp-section-ui.
git clone git@github.com:delasign/craft-cms-starter.git
Please note that this tutorial walks you through the example of a control panel section within a plugin, though the example can be used for any page within a Craft CMS. If you are curious how to setup the control panel section, please consult the tutorial below.
Step One: Create your asset bundle
![A screenshot of the asset bundle in VSCode.](https://www.delasign.com/CDN/images/Create-Asset-Bundle.webp)
To be able to style UI within your Craft CMS, you must create an Asset Bundle. Asset Bundles are useful as:
- They publish an inaccessible directory into a directory below the web root, making it available for front-end pages to consume via HTTP requests.
- They can register specific CSS and JS files within the directory as
<link>
and<script>
tags in the currently-rendered page.
A | Setup the folder structure
![A screenshot of the Asset Bundle folders.](https://www.delasign.com/CDN/images/Asset-Bundle-Folders_2023-01-14-220958_prwb.webp)
In the src directory of your plugin, create new folder called assetbundles.
Within the assetbundles folder create another folder that holds the asset bundle, in our open source project have called it cpsectionassetbundle.
Within this folder create a dist folder.
Within the dist folder, create a css folder to hold your css files and a js folder for your js files.
B | Setup the asset php file
![A screenshot of the code for our asset bundle PHP file. The code can be found below.](https://www.delasign.com/CDN/images/Add-PHP-file.webp)
In the cpsectionassetbundle folder or equivalent, create a new php file - we have called it CpSectionAssetBundle.php - and copy in the code below.
Please replace the name space on line 3 and the source path on line 24 with the correct identifiers.
C | Setup css file
![A screenshot of an empty css file within our plugin.](https://www.delasign.com/CDN/images/css.webp)
Within the dist/css folder create a new css file called index.css. Leave it blank for now.
D | Setup js file
![A screenshot of an empty js file within our plugin.](https://www.delasign.com/CDN/images/js.webp)
Within the dist/js folder create a new css file called index.js. Leave it blank for now.
Step Two: Register the Asset bundle to the html or twig file
![A screenshot of our index.twig with the asset bundle registered.](https://www.delasign.com/CDN/images/Register-Bundle.webp)
Open your html or twig file and at the top of the file add the following line:
{% do view.registerAssetBundle("delasign\craftcmsstarterplugin\assetbundles\cpsectionassetbundle\CpSectionAssetBundle") %}
Please replace delasign\\craftcmsstarterplugin with the relevant path.
Step Three: Add the HTML
![A screenshot of the control panel section after adding the HTML.](https://www.delasign.com/CDN/images/Add-HTML.webp)
The code below demonstrates how to add html to a file that will show checkmarks and emails of subscribers, with the intention of allowing you to send them an email through a button.
Step Four: Add the CSS
![A screenshot of the control panel section after adding the css.](https://www.delasign.com/CDN/images/Add-CSS.webp)
Add the relevant css to the index.css file that you created earlier. We have provided a sample of the index.css that we used for our mail service.
Step Five: Add the JS
![A screenshot of the control panel section after adding the js file. Please note for this to appear you must select and deselect a checkbox.](https://www.delasign.com/CDN/images/Add-JS.webp)
Add the following jQuery code to your index.js file
Then call the JS function (i.e. MailService as defined on line 15 in index.js) in your twig file using code similar to the one below:
Any Questions?
We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.