Versions Compared

Old Version 16

changes.mady.by.user Justin

Saved on

compared with

New Version Current

changes.mady.by.user PT

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Introduction

English

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.

Panel
borderColorpurple
borderWidth1
titleBGColor#ddccff
borderStylesolid
titleNew Feature

This plugin is a new Joget DX feature.


Image Modified
Figure 1: DX Progressive Theme in desktop view.


Image Modified
Figure 2: DX Progressive Theme in mobile view.

Theme Properties

Configure Layout

Image Added

Figure 3: Configure layout.


Screens (Click to view)

Image Removed
Figure 3: Configure layout.

NameDescription
ThumbnailUpload 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

Image Added

Figure 4: Advanced


Image Removed

Figure 4: Advanced

NameDescriptionScreens (Click to view)
Favicon URLDefine the path to custom Favicon URL.
Logo URLDefine the path to custom Logo URL
Disable ProfileDisable 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.

      Info
      titleExample
      /jw/web/client/app/(yourAppIdHere)/_/form/download/(yourFormIdHere)/(recordIdHere)/(imageFileNameHere).
Inbox
  • No Inbox
  • Show all assignments
  • Show current App assignment only
Home Icon URLHome Icon URL address
Shortcut Link LabelShortcut Link Label
ShortcutDefines links to be parked under Shortcut menu
User Menu ShortcutDefines 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.

Image Modified

Home BannerCustom HTML for Home Banner
Custom CSSCustom CSS for the theme
Custom JavascriptCustom Javascript for the theme
Sub HeaderSub header text
Sub FooterSub footer text
Disable help guide featureClick to hide the help guide feature.

...

Progressive Web App (PWA) Settings

Image Added

Figure 5: PWA

Image Removed
Figure 5: PWA
NameDescriptionScreens (Click to view)
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 NotificationsClick 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.

Note
iconfalse

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.


Info
iconfalse

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

Image Added

Figure 6: Login Page UI

NameDescriptionScreens (Click to view)
Custom HTML (Before Login Form)Custom HTML to be placed in the login form

Image Removed
Figure 6: Login Page UI

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


Configure Permission

Image Added

Figure 7: Properties - Permission

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

...