App UI | ZnetDK 4 Mobile

SUMMARY

            Banner

            User Panel

            Navigation menu

            View area

            Action buttons

            Login form

            Messages

            Footer

The banner mainly displays the title of the application. It is customized through the LC_HEAD_TITLE parameter.

When user authentication is enabled (see CFG_AUTHENT_REQUIRED parameter), the user icon ( ) is also displayed to the right of the banner. When this icon is clicked, the User Panel is displayed.

To hide automatically the banner when the content in the View area is scrolled down, call the z4m.header.autoHideOnScroll() JS API method within an extra JavaScript library loaded specifically for the application (see CFG_APP_JS parameter) or via a custom module (see CSS and JS libraries are loaded automatically).

The text and background colors are applied to the banner through the w3-theme W3.CSS class. These colors can be customized via the CFG_MOBILE_W3CSS_THEME parameter or by overidding the W3.CSS classes within an extra stylesheet loaded specifically for the application (see CFG_APPLICATION_CSS parameter) or via a custom module.

On Phone and Tablet
ZnetDK for Mobile App banner on phone device
The button for opening the Navigation menu ( ) is added to the banner on the left.

On Desktop
ZnetDK for Mobile App banner on desktop device
The logout link ( ) is added to the right of the banner and the login ID is attached to the user icon.

User Panel

If user authentication is enabled (see CFG_AUTHENT_REQUIRED parameter), the User panel is shown after clicking on the user icon ( ) in the Application banner.

The buttons of the User Panel are:

Password: to change the user's password.
My user rights: to display the rights granted to the logged in user (see User rights).
Installation: to install the application on the user's device (see page Progressive Web App (PWA)).
Uninstallation : for information on how to uninstall the application on the user's device.
Logout: to log out of the application. This button is hidden on Desktop device as the logout link already exists on the Banner.

The colors of the User Panel correspond to the following CSS classes: w3-theme-light (dialog background), w3-theme-action (buttons) and w3-orange (Logout button).

The Navigation menu displays the company logo and hyperlinks to the application views declared in the menu.php script.

The menu can be defined on two levels. The sub-menus (level 2) are then displayed horizontally in tabs.

The colors of the Navigation menu correspond to the following CSS classes: w3-theme-l4 (vertical menu background), w3-theme-l3 (horizontal menu background), w3-theme-l2 (selected menu item), w3-border-theme (horizontal menu item bottom border color) and w3-border-red (color of the bottom border of the selected horizontal menu item).

On Phone and Tablet
The Navigation menu is hidden by default and is opened by clicking on the menu button ( ) located on the Banner on the left.

On Desktop
The Navigation menu is always visible.

A custom company logo can be set by changing the LC_HEAD_IMG_LOGO parameter.

To configure the menu hyperlinks in the menu.php script, see topic New menu items.

View area

The View area is the place on the device viewport where the content of the view appears after clicking on a menu item.
A view can also be shown directly in JavaScript by calling the z4m.content.displayView() JS API method.

The default background and text colors of the View area correspond to the w3-theme-light CSS class.

A view is a PHP script containing lines of code written generally in HTML, PHP, but also in JavaScript as needed.
The views are located within the INSTALL_DIR/applications/default/app/view/ (see App folders) and INSTALL_DIR/engine/modules/my_module/mod/view/ (see Module folders) folders.

See topic New views to create your first views.

By default, the view is loaded in AJAX the first time it is displayed. On subsequent displays, the view is not reloaded.
To refresh the content of the view, here are some solutions to achieve this:

On the client side (in the browser): by dynamically modifying the DOM of the page in JavaScript with AJAX calls (see Ajax requests) to retrieve the most recent data on the server side and display them in the view.
On the server side (in PHP): if the view content is generated in PHP, simply add the zdk-viewreload CSS class to any HTML element inside the view.
So each time the view will be displayed by clicking on the corresponding menu item, it will be automatically reloaded from the server via a new AJAX request.
Another solution is to add a Refresh button in the view that triggers a call to the ZnetDK JavaScript z4m.content.reloadView() method in order to reload the view.

Action buttons

Action buttons are color rounded buttons displayed at the bottom right of the View area.

Four action buttons exist in standard:

Scroll up button: to scroll up the view content. See z4m.action.setScrollUpButtonForView() JS API method
Search button: to search a keyword in a Data List. See JS API - Action buttons for more information.
Refresh button: to refresh the Data List. See JS API - Action buttons for more information.
Add button: to add a new row to the Data List. See JS API - Action buttons for more information.

Custom Action buttons can also be added to a view by calling the z4m.action.addCustomButton() JS method.
Here is an example of custom Action button:

Login form is displayed before accessing app features when authentication is enabled (see CFG_AUTHENT_REQUIRED parameter).

Remember me: when checked, the login ID is remembered for the next time the user logs in on the same device and the user session lasts longer.
To make this checkbox visible, see CFG_SESSION_SELECT_MODE parameter.
To make this checkbox checked by default, see CFG_SESSION_DEFAULT_MODE parameter.
To adjust the user session duration when Remember me is unchecked, see CFG_SESSION_TIMEOUT parameter.
Forgot password?: when clicked, user can asks for a new password.
To make this hyperlink visible, see CFG_FORGOT_PASSWORD_ENABLED parameter.

The colors of the Login form correspond to the following CSS classes: w3-theme-d5 (dialog title bar), w3-theme-light (body background), w3-theme-l4 (footer background) and w3-border-theme (footer top border color).

Messages

Several ways are offered in ZnetDK for Mobile to show Messages to the user. Are presented below the different kinds of messages.

Panel Message

A Panel message appears in the View area above the view content. It can be displayed for information, warning, error purpose or in a critical case.

Call the z4m.messages.add() JS API method to display a panel message.

By default, a panel message is automatically hidden after 6 seconds unless if it is a critical message, in which case it must be hidden by the user by clicking on the close button at the top right.

It is however possible to permanently display a message in the panel (apart from the critical message) by specifying the value false in the last autoHide parameter for calling the z4m.messages.add() method.

Several panel messages can be displayed in the same time. In this case, they are stacked on top of each other.

Snackbar Message

ZnetDK for Mobile App snackbar info message

ZnetDK for Mobile App snackbar warning message

A Snackbar message appears briefly at the bottom of the display window to inform the user that an action has been performed successfully.

This message disappears automatically after less than 3 seconds.

Call the z4m.messages.showSnackbar() JS API method to display a Snackbar message.

By default, the Snackbar message is displayed on a green background.
To display it on a yellow background (warning case), specify the value true for the second parameter isWarning when calling the z4m.messages.showSnackbar() method.

Form message

A Form message is displayed within an HTML form element in case of global error returned by the PHP controller action (see \Response::setFailedMessage() method).

This kind of message can also be displayed on demand in JavaScript through the following methods:

z4m.form.showError(): displays an error message in red. This message can then be hidden by calling the z4m.form.hideError() method.
z4m.form.showInfo(): displays an information message in blue or a warning message in yellow. This message can then be hidden by calling the z4m.form.hideInfo() method.

Notification Message

A Notification message is displayed in a modal dialog asking the user to click an OK button to access the application again.

The title in the dialog bar, the text of the message and the label of the OK button can be customized.

To display in JavaScript a Notification message, call the z4m.messages.notify() JS API method.

The colors of the Notification message correspond to the following CSS classes: w3-theme-d5 (dialog title bar), w3-theme-light (body background) and w3-theme-action (OK button).

Confirmation Message

A Confirmation message is displayed in a modal dialog box to get the user's confirmation before performing a particular action.

The title in the dialog bar, the text of the message and the labels of the Yes and No buttons can be customized.

To display in JavaScript a Confirmation message, call the z4m.messages.ask() JS API method.

The colors of the Confirmation message correspond to the following CSS classes: w3-theme-d5 (dialog title bar) and w3-theme-light (body background).

The footer displays information about the application version, copyright, a link to a website or any other useful information.

To change the footer content, set your own text and links for the three following PHP constants in the INSTALL_DIR/applications/default/app/lang/locale.php script: LC_FOOTER_LEFT, LC_FOOTER_CENTER and LC_FOOTER_RIGHT.

The footer is automatically positioned at the bottom of the viewport and remains visible when the content displayed in the View area does not occupy the entire height of the viewport.
On the other hand, if the height of the content of the view is too large to be visible on the viewport, the footer is moved to the bottom of the page and becomes visible only by scrolling the page completely down.

The background and text colors of the footer are set via the w3-theme CSS class.