DX Progressive Theme

Introduction

The DX Progressive Theme is responsive and mobile-friendly. You can use the latest Font Awesome 5 icons in the DX Progressive Theme.

Configure DX Progressive

To set up a theme DX Progressive, go to the Theme field in UI settings > Configure Layout and select DX Progressive.

When you select DX Progressive, you will see the following properties available for configuration:

• Menu Position:
  Determines the position of the menu
  • Side Menu
  • Horizontal Menu below Header
  • Horizontal Menu inline with Header
  • No Menu
• Theme Scheme: Select from Dark or Light themes to set the color scheme.
• Primary Color:
  Color Scheme-Primary Color.
  Choose from the preset colors or custom. By choosing a custom color, you can define the color manually or through the color picker.
  
• Link Color:
  Color Scheme-Link Color.
  Choose from the preset colors or custom. By choosing a custom color, you can define the color manually or through the color picker.
• Button Color: 
  Color Scheme-Button Color.
  Choose from the preset colors or custom. By choosing a custom color, you can define the color manually or through the color picker.
• Button Text Color:
  Color Scheme-Button Text Color.
  Choose from the preset colors or custom. By choosing a custom color, you can define the color manually or through the color picker.
• Menu Font Color:
  Color Scheme-Menu Font Color.
  Choose from the preset colors or custom. By choosing a custom color, you can define the color manually or through the color picker.
• Font Color: 
  Color Scheme-Font Color.
  Choose from the preset colors or custom. By choosing a custom color, you can define the color manually or through the color picker.
• Enable Font Size Control?: Check this to enable changing the font size on the user view runtime.

Advanced

The advanced settings offer extensive customization for the DX Progressive Theme. You can define URLs for the favicon and logo, disable user profile photos, and configure the inbox for assignments. Additional features include enabling font size control, dark theme, responsive switch for mobile devices, and adding custom CSS or JavaScript. You can also insert HTML for subheaders, subfooters, and a home banner and manage user menu shortcuts.

Fields to Configure:

• Favicon URL: Define the path to the custom Favicon URL.
• Logo URL: Define the path to custom Logo URL.
• Disable Profile: Option to remove the user's profile photo display.
• User Image: 
  • Hide
  • Gravatar Service
  • Using Hash Variable
    • Define Hash Variable To Retrieve User Image URL, e.g.: #form.user_profile.image[{currentUser.id}]#
      For example, if you are using Form Hash Variable to retrieve the image, it requires the complete URL that points to the exact image file location. The full link is as follows. Fill in the required URL information along with the form hash variable accordingly.
    Example
    /jw/web/client/app/(yourAppIdHere)/_/form/download/(yourFormIdHere)/(recordIdHere)/(imageFileNameHere).
• Inbox: Manage how assignments are displayed.
  • No Inbox
  • Show all assignments
  • Show current App assignment only
• Home Icon URL: Home Icon URL address.
• Shortcut Link Label: Name for the shortcut link.
• Shortcut: Defines links to be parked under the Shortcut menu.
• User Menu Shortcut: Defines links to be parked under the User menu.
• Enable Responsive Switch in Mobile Device?: When checked, the Switch to the Desktop version link will be shown on the mobile device.
  
• Remove Auto Title from Process/Assignment form?: Process title and activity name will be removed from the assignment form when checked.
  
• Home Banner:  Insert custom HTML for Home Banner
• Custom CSS: Add custom CSS to style the UI.
• Custom JavaScript: Add custom Javascript for the theme.
• Sub header: Insert HTML for a subheader.
• Sub footer: Insert HTML for a subfooter.
• Disable Help Guide Feature?: Click to hide the help guide feature.

Progressive web app (PWA) settings

The PWA settings ensure your application supports offline usage and push notifications. You can enable or disable PWA support and web push notifications and specify additional URLs to cache for offline functionality. These settings enhance the user experience by making the app more robust and accessible, even without an internet connection.

Fields to Configure:

• Disable Progressive Web App (PWA) Support: 
  Click the checkbox to disable PWA.
  Joget DX apps automatically enable Progressive Web Apps (PWA) features in this theme so that all apps will be PWA baseline compliant without requiring additional steps, with features such as adding to the home screen, offline support, and push notifications.
• Disable Web Push Notifications: Click to disable web push notifications in this user view.
• Additional URLs to Cache: Enter paths relative to the context root. Enter a new line for each different path to cache for.
  
  To see all the cached URLs in runtime, open the browser developer tool - console, and look for this log message with the 'cacheUrls' link.
  Then, you can navigate to this link in your browser to see all cached URLs.
  
  
  

  Here is the format of such URL:

  (scheme)://(serverName):(serverPort)/(context)/web/userview/(appId)/home/_/cacheUrls

  Example: http://localhost:8080/jw/web/userview/expenseclaim/home/_/cacheUrls

Login page UI

The Login Page UI settings allow you to customize your application's login page. You can upload a background image and add custom HTML content before and after the login form. These configurations help create a more engaging and personalized login experience for users, ensuring that the login page aligns with your application's branding and design.

Fields to Configure:

• Login Page Background: Upload Login Page Background.
• Custom HTML (Before Login Form): Add custom HTML before the login form to include additional information or branding elements.
• Custom HTML (After Login Form): Add custom HTML after the login form to include additional information or branding elements.

Permission settings

Permission settings control who can access and see the UI in the App Center. You can hide the UI from the App Center listing, manage permission types, and temporarily disable permission checking for testing purposes. This ensures only authorized users can access specific UI elements, maintaining security and appropriate access control.

Fields to Configure:

• Hide this UI in App Center?: When checked, this UI will not be listed in the App Center.
• Permission Type: The white list to determine access to this UI.
• Temporary Disable Permission Checking: Click the checkbox to disable all category menu permission checking.