Introduction

DX 8 Angle Theme is one of the themes available for Joget DX 8.

Figure 1: DX 8 Angle Theme in desktop view

Theme Properties

Configure Layout

Figure 2: Configure Theme

Name Description
Menu Position

Determines the position of the menu

  • Side Menu
  • Minimized Side Menu
  • Horizontal Menu below Header
  • Horizontal Menu inline with Header
  • No Menu
Color Scheme

Color Scheme:

Background ImageUpload Background Image
Background

Color Scheme-Background

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Content Background

Color Scheme-Content Background

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Header Color

Color Scheme-Header Color

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Header Font Color

Color Scheme-Header Font Color

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Sidebar Background

Color Scheme-Sidebar Background

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Sidebar Menu Background

Color Scheme-Sidebar Menu Background

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Sidebar Menu Color

Color Scheme-Sidebar Menu Color

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Sidebar Icon Color

Color Scheme-Sidebar Icon Color

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Sidebar Menu Background (Active)

Color Scheme-Sidebar Menu Background (Active)

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Sidebar Menu Color (Active)

Color Scheme-Sidebar Menu Color (Active)

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Sidebar Icon Color (Active)

Color Scheme-Sidebar Icon Color (Active)

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Sidebar Scrollbar Thumb Color

Color Scheme-Sidebar Scrollbar Thumb

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Sidebar Badge Background

Color Scheme-Sidebar Badge Background

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Sidebar Badge Color

Color Scheme-Sidebar Badge Color

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Button Background

Color Scheme-Button Background

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.

Highlight Color

Color Scheme-

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Highlight Background

Color Scheme-Highlight Color

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Heading Font Color

Color Scheme-Heading 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.

Content Font Color

Color Scheme-Content Font 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.

Link Color (Active)

Color Scheme-Link Color (Active)

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Footer Background

Color Scheme-Footer Background

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Footer Color

Color Scheme-Footer Color

Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker.

Advanced


New feature

This is a new feature in Joget DX 8 version 8.1 onwards

UI Theme Compact UI support

  • A new theme provide feature like Gmail density setting like Compact, Default & Comfortable
  • This setting will adjust the white space, padding & margin
  • The Compact Theme can be enabled in UI builder, under Settings, in Configure Layout > Configure (Selected theme) > Advanced.



Figure 3: Advanced

Name Description
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 To Retrieve User Image URL

    • #form.user_profile.image[{currentUser.id}]#
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 Font Size Control?Check this to enable the ability to change the font size on UI runtime.
Dark Theme

Check this to enable dark theme.

Figure 3.1: Enabling Dark Theme on Chrome


Figure 3.2: Dark Theme of DX8 Angle Theme

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 BannerCustom HTML for Home Banner

Custom CSS

Custom CSS for the theme
Custom JavaScriptCustom Javascript for the theme
Sub HeaderSub header text
Sub FooterSub footer text
Disable Help Guide Feature?Click to hide the help guide deature.

Progressive Web App (PWA) Settings


Figure 4: Progressive Web App (PWA ) Settings

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 NotificationsClick to disable web push notification in this userview.
Additional URLs to CacheEnter paths relative to context root.

Login Page UI


Figure 5: Login Page UI

NameDescription
Login Page BackgroundUpload Login Page Background
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


Figure 6: Configure Permission

Name Description
Hide this UI in App Center?When checked, this particular UI will not be listed in App Center.
Permission TypeWhite list to determine access to this UI.
Temporarily disable permission checking for testing?Click checkbox to disable all category menu permission checking.



  • No labels