Figure 1: Userview UI Properties
| Name | Description | ||
|---|---|---|---|
| Id | ID of the UI | ||
| Name | Name of the UI | ||
| Theme | Select a theme to render the Userview | ||
| Mobile View Disabled | When checked, the Userview will not appear in the listing in mobile view.  | ||
| UI | |||
| Description | UI description is | Description | Userview description meant for developer/admin consumption only to describe the purpose of this element. |
| Category | Category of the Application |
| Thumbnail | Thumbnail for the Application |
Figure 2: UI Advance Properties
| Name | Description |
|---|---|
| Favicon URL | URL for Favicon |
| Logo URL | URL for Logo |
| Disable Profile | Disable profile tab in the UI |
| User Image | Set Users profile image |
| Inbox | Inbox of assignments for the application |
| Home Icon URL | URL for Home Icon |
| Shortcut Link Label | Name of the Shortcut Link |
| Shortcut | Set a shortcut link |
| User Menu Shortcut | Shortcuts for logged-in users |
| Enable Responsive Switch in Mobile Device | Toggle to make the current UI mobile friendly |
| Remove Auto Titles from Process/Assignment form? | Toggle to remove the auto titles function |
| Home Banner | Insert Home banner here |
| Custom CSS | Insert custom CSS for the UI |
| Custom Javascript | Insert custom JavaScript for the UI |
| Subheader | Insert subheader HTML here |
| Subfooter | Insert subfooter HTML here |
| Disable Help Guide Feature? | Toggle to disable the feature |
| English |
|---|
| Figure 3: Progressive Web App (PWA) Settings |
| Name | Description |
|---|---|
| Disable Progressive Web App (PWA) Support | Toggle PWA Support |
| Disable Web Push Notifications | Toggle Web Push Notifications |
| Additional URLs to Cache | Cache URLs for offline support |
Figure 4: UI Properties - Login Page UI
| Name | Description |
|---|---|
| Login Page Background | Set application login page background image here. |
| Custom HTML (Before Login Form) | HTML code is expected here. |
| Custom HTML (After Login Form) | HTML code is expected here. |
Figure 5: UI Figure 2: Userview Properties - Configure Permission
| Name | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Hide this Userview UI in App Center? | When checked, this particular Userview UI will not appear in the App Center's listing. | ||||||||||
| Permission Type | |||||||||||
| Temporarily disable permission checking for testing? | When checked, all permission set to Userview UI and Userview UI Category will be bypassed. This is a convenient option for app designer to gain access to all menus for testing.
A red colored label/icon denoting "Permission disabled for testing" will appear on the Userview UI in the App Center as well as in the Userview UI runtime itself.
|
Figure 3: Userview Properties - Login Page UI
...
Figure 4: Userview Properties - Mobile Options
...
General - Name
...
Description
...
Mobile Offline Cache Enabled
...
When enabled, mobile offline caching capability will be used during offline when possible and when realtime server respond is not required. Network status will be indicated as depicted in Figure 6.
(e.g. User will be able to reopen links/pages in offline mode (as they have been cached) that have been opened before when the user was online)
...
Mobile Login Required First
...
Determine whether a user must first login into Joget or not before viewing the Userview.
...
UI Attribute - Name
...
Description
...
Mobile View Background URL
...
Path to Background image (e.g. http://localhost:8080/background.jpg)
...
Mobile View Background Color
...
Background Color (e.g. #FCFDED)
...
Mobile View Background Style
...
- no-repeat
- repeat
- repeat-x
- repeat-y
- 100% width
...
Mobile View Translucent Effect
...
Mobile View Logo URL
...
Path to Logo image (e.g. http://localhost:8080/logo.jpg)
...
Mobile View Logo Width
...
Width of Logo image (unit must be specified) (e.g. 142px)
...
Mobile View Logo Height
...
Height of Logo image (unit must be specified) (e.g. 46px)
...
Mobile View Logo Alignment
...
Alignment of logo
- center
- left
- right
...
Mobile View Custom CSS
...
Inline CSS for further customization
Figure 5: Sample Mobile View Configurations and its preview
Figure 6: Sample Mobile View with Translucent effect
...
|
