Introduction

DX Progressive Theme is a new responsive and mobile friendly theme for Joget DX.

You can use the latest Font Awesome 5 icons in DX Progressive Theme.

This plugin is a new Joget DX feature.

Figure 1: DX Progressive Theme in desktop view.

Knowledge Base for DX 7 > DX Progressive Theme > image2020-1-14_21-27-38.png
Figure 2: DX Progressive Theme in mobile view.

Theme Properties

Name	Description	Screens (Click to view)
Thumbnail	Upload a small square image or icon for your app to display in App Center.	Figure 3: Configure layout.
Menu Position	Determines the position of the menu Side Menu Horizontal Menu below Header Horizontal Menu inline with Header No Menu
Theme Scheme	Dark Light
Primary Color	Color Scheme-Primary Color. Choose from the preset colors or custom, By choosing custom, 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 custom, 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 custom, 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 custom, 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 custom, 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 custom, you can define the color manually or through the color picker.

Name	Description	Screens (Click to view)
Favicon URL	Define the path to custom Favicon URL.	Figure 4: Advanced
Logo URL	Define the path to custom Logo URL
Disable Profile	Disable fetching user's profile photo
User Image	Hide Gravatar Service Using Hash Variable Define Hash Variable To Retrieve User Image URL #form.user_profile.image[{currentUser.id}]#
Inbox	No Inbox Show all assignments Show current App assignment only
Home Icon URL	Home Icon URL address
Shortcut Link Label	Shortcut Link Label
Shortcut	Defines links to be parked under Shortcut menu
User Menu Shortcut	Defines links to be parked under User menu
Enable Responsive Switch in Mobile Device?	When checked, "Switch to desktop version" link will be shown in mobile device.
Remove Auto Title from Process/ Assignment form?	When checked, process title and activity name will be removed from assignment form. In the screenshot below, the highlighted red box denotes the process title and activity name.
Home Banner	Custom HTML for Home Banner
Custom CSS	Custom CSS for the theme
Custom Javascript	Custom Javascript for the theme
Sub Header	Sub header text
Sub Footer	Sub footer text
Disable help guide feature	Click to hide the help guide deature.

Name	Description	Screens (Click to view)
Disable Progressive Web App (PWA) Support	Click checkbox to disable PWA.	Figure 5: PWA
Disable Web Push Notifications	Click checkbox to disable web push notification.
Additional URLs to Cache	Enter paths relative to context root.

Name	Description	Screens (Click to view)
Custom HTML (Before Login Form)	Custom HTML to be placed in the login form	Figure 6: Login Page UI
Custom HTML (After Login Form)	Custom HTML to be placed in the login form	Figure 6: Login Page UI

Name	Description	Screens (Click to view)
Hide this Userview in App Center?	When checked, this particular Userview will not be listed in App Center.	Figure 7: Properties - Permission
Permission Type	White list to determine access to this Userview.
Temporarily disable permission checking for testing?	Click checkbox to disable all category menu permission checking.