UI Settings

Introduction

The UI Settings in this application provide comprehensive options to configure and customize various aspects of the user interface. Here’s a breakdown of the settings available:

Configure layout

The layout configuration allows you to customize the structure and appearance of your UI. You can set a unique identifier, name, and theme for your UI, providing a distinct visual style. Additional fields include a description for the developer or admin, categorization of the UI within the application, and a thumbnail image to represent the app visually.

When you select UI Builder > Settings, you will see the following fields available:

• Id: Unique identifier for the UI.
• Name: Name of the UI element.
• Theme: Select a theme to render the UI, influencing its visual appearance.
• Description: Description for developer/admin to describe the purpose of the UI.
• Category: Category of the application where the UI belongs.
• Thumbnail: Thumbnail image for the app.

Advanced

The advanced settings offer deeper customization options for your UI. 

Fields to Configure:

• Favicon URL: URL for the favicon displayed in the browser tab.
• Logo URL: URL for the UI logo.
• Disable Profile: Disable the profile tab within the UI.
• User Image: Set a default profile image for users.
• Inbox: Configure the inbox for assignments within the application.
• Home Icon URL: URL for the home icon.
• Shortcut Link Label: Name for the shortcut link.
• Shortcut: Set a shortcut link for quick access.
• User Menu Shortcut: Shortcuts for logged-in users.
• Enable Responsive Switch in Mobile Device: Toggle to make the UI mobile-friendly.
• Remove Auto Titles from Process/Assignment form?: Toggle to remove the auto titles function.
• Home Banner: Insert a banner image for the home screen.
• Custom CSS: Add custom CSS to style the UI.
• Custom JavaScript: Add custom JavaScript for additional functionality.
• Subheader: Insert HTML for a subheader.
• Subfooter: Insert HTML for a subfooter.
• Disable Help Guide Feature?: Toggle to disable the help guide feature.

Progressive web app (PWA) settings

The PWA settings enable you to enhance your UI for offline usage and push notifications. You can toggle PWA support and web push notifications, and specify additional URLs to cache for offline functionality. This ensures that your application remains accessible and functional even without an internet connection, providing a seamless user experience.

Fields to Configure:

• Disable Progressive Web App (PWA) Support: Toggle to disable PWA support.
• Disable Web Push Notifications: Toggle to disable web push notifications.
• Additional URLs to Cache: Cache URLs for offline support.

Login Page UI

The Login Page UI settings allow you to customize your application's login page. 

Fields to Configure:

• Login Page Background: Set the background image for the application’s login page.
• Custom HTML (Before Login Form): Add custom HTML before the login form.
• Custom HTML (After Login Form): Add custom HTML after the login form.

These configurations help create a more engaging and personalized login experience for users.

Configure Permission

Permission settings control who can access and see the UI in the App Center. 

• Hide this UI in App Center?: Toggle to hide the UI in the App Center listing.
• Permission Type: Manage permissions on who can see this UI (see Permission Control).
  
• Temporarily disable permission checking for testing?: Convenient option to bypass permissions for testing purposes, with a visible indicator when active.
  

  Important

  • Remember to turn this off once testing is done.
  • This will not bypass permission set inside Forms and Form Section.
  A red colored label/icon denoting Permission disabled for testing will appear on the UI in the App Center as well as in the UI runtime itself.
  

This ensures only authorized users can access specific UI elements, maintaining security and appropriate access control.