Versions Compared

Old Version 15

changes.mady.by.user Hugo

Saved on

compared with

New Version Current

changes.mady.by.user Hugo

Saved on

Key

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

Table of Contents

Userview Builder lets you design the front-end interface in a matter of minutes. You may choose from the list of preloaded themes, or you may develop your own theme.


Figure 1: Userview Builder

Components

Red - Menu bar
Purple - Userview Elements Palette
Blue - Design content pane

Userview Elements

Anchor
Userview Elements
Userview Elements

Children Display
sorttitle

Settings


Figure 2: Userview Builder - Settings

...

In the first tab itself, one would be able to select the Userview Theme that would define the overall look and feel of the Userview. Subsequent tabs would further refine the theme/Userview itself (e.g. Javascript, Permission Control, Mobile Options, Custom Header/Footer/CSS)

Mobile Options


Figure 3: Mobile Options

Userview Theme selected in the first tab is only applicable for desktop view, mobile view look and feel can be customized in the last tab - Mobile Options.

Image Added
Figure 4: Sample Mobile View Configurations and its preview

Image Added
Figure 5: Sample Mobile View with Translucent effect

Image Added
Figure 6: Online status indicator

General Attribute

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

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