Design a UI

Design a new User Interface (UI) within your Joget environment to enhance user engagement and streamline navigation. The process from initial UI setup to final publication is straightforward and flexible, accommodating various design preferences and functional requirements.

Begin designing your UI by following these steps:

1. Go to the App Composer page.
2. In the Design App page, create a new UI using the + button on the UI Builder column.
   
3. Enter the UI details:
   

   Field	Description	Example	Special Notes
   Name	Name to represent this entity.	Travel Portal	This name will be visible to end-users. Choose a short and meaningful name.
   ID	Unique ID to represent this entity.	travelPortal	This ID will be part of the eventual URL seen by users. It's recommended to use a short, meaningful ID.
   Description	(OPTIONAL) Brief description of the UI’s purpose.		Providing a description can help clarify the UI's use, though it's optional.
   Duplicate UI from	Option to clone the design from an existing UI entity.		Useful for replicating settings and structure.

   
4. Click Save to create the UI. As a result, the UI Builder will be launched.
   
5. Start with the Design UI Page, in the UI Builder you'll find a palette of available menu elements on the left and a canvas in the middle featuring the UI header, footer, and menu categories.
   
6. Add the Category, hover over the canvas menu; a button will appear allowing you to add a category.
7. Edit the Categories; click any category, and you can see the arrow key to move it up and down or drag it to move it.
   
8. Add the Menu Elements, drag menu elements from the palette into any category.
9. Set up the Properties, click on any category or menu element to open the properties on the right side and adjust settings.
   
10. At any point, click the large Preview button at the top to see how the UI appears.
11. Once you are satisfied with the UI, click the large Save button at the top. A confirmation will appear once the UI is successfully saved. You can then continue designing or close the UI Builder.
12. To make the UI accessible to normal users, go to the app composer page and click the Publish button on the top right and for confirm click OK.
    
13. Alternative Publishing Method, go to Versions on the top left, select any version, and then click the Publish button on the top right.
    

If you access the App Center, you will find the Travel Request app on the homepage.

The video below provides a visual representation of the steps mentioned previously.