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

Configure Layout

Knowledge Base for DX 7 > DX Progressive Theme > image2020-1-14_21-31-20.png

Figure 3: Configure layout.

Name	Description
Thumbnail	Upload a small square image or icon for your app to display in App Center.
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.
Enable Font Size Control?	Check this to enable the ability to change the font size on userview runtime.

Advanced

Knowledge Base for DX 7 > DX Progressive Theme > props-2.png

Figure 4: Advanced

Name

Description

Favicon URL

Define the path to custom Favicon URL.

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, e.g.: #form.user_profile.image[{currentUser.id}]#
- For example, if you are using Form Hash Variable to retrieve the image, it requires the full URL that points to the exact image file location. The full link is such as below. Fill in the required URL information along with the form hash variable accordingly.
  /jw/web/client/app/(yourAppIdHere)/_/form/download/(yourFormIdHere)/(recordIdHere)/(imageFileNameHere).

Inbox

No Inbox
Show all assignments
Show current App assignment only

Home Icon URL

Home Icon URL address

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.

Knowledge Base for DX 7 > DX Progressive Theme > switch.png

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.

Knowledge Base for DX 7 > DX Progressive Theme > title-with-without.png

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 feature.

Progressive Web App (PWA) Settings

Knowledge Base for DX 7 > DX Progressive Theme > image2020-1-14_21-3-41.png

Figure 5: PWA

Name

Description

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 home screen, offline support and push notifications.

Disable Web Push Notifications

Click to disable web push notification in this userview.

Additional URLs to Cache

Expects value(s) of paths relative to context root.

Enter a new line for each different paths 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.

Knowledge Base for DX 7 > DX Progressive Theme > image2020-8-27_16-30-43.png

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

Knowledge Base for DX 7 > DX Progressive Theme > Screenshot 2017-03-06 18.57.05.png

Figure 6: Login Page UI

Name	Description
Custom HTML (Before Login Form)	Custom HTML to be placed in the login form
Custom HTML (After Login Form)	Custom HTML to be placed in the login form

Configure Permission

Knowledge Base for DX 7 > DX Progressive Theme > Screenshot 2017-03-06 18.57.11.png

Figure 7: Properties - Permission

Name	Description
Hide this Userview in App Center?	When checked, this particular Userview will not be listed in App Center.
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.