When opening the new client, the welcome page displays Tiles that give users access to different applications by tapping the icon.

While the page loads, the following animated icon displays:

The Configure icon on the bottom of the page allows you to rearrange tiles and to add more tiles.

When you tap the Configure icon:

The page switches to design mode:

The following links display:

Tap a menu item to open a gadget. A gadget is the equivalent of a V7 page. Several types are available:
* A Query page displays a list of records.
* A Details page displays a record.
* An Edit page is used to create or modify a record.

You can change the design of the page by changing the color and arrangement of the Tiles.

A home page that contains gadgets displays as follows:

This section describes the Tile arrangement that is the only available for a list of menu pages.

Tapping the user panel displays the following pop-up menu:

Tap Design page to open the following page:

This page contains the following elements:

1. The left panel displays the nested structure of the document. For the home page, several levels are present, depending on the structure of the page. Tapping each level changes the right panel and provide access to different parameters.
2. The central panel shows the page layout according to the current customization choices.
3. The right panel defines all the customization options and differs for each level.
4. The top-left area has device settings options.
5. The top-middle area has global options like create a new layout and delete the page.
6. The top-right area has options to undo the most recent or all modifications and to save and/or exit design mode.

The following choices are available:

You can select the background color of the menu item Tile: color selector displays.
You can select the relative size and color of the menu item Tile for different device sizes (smart phone, tablet in portrait, mini-tablet in landscape, tablet in landscape) based on the following: The lateral size of the tablet is divided into 12 squares. For each Tile, you can select a size from 1 to 12 squares. The system places the Tiles from left to right until there is no more room on the row. The next Tile is placed on the row below. For example, if you create 7 Tiles with different sizes, the system arranges them as shown below:

A query page can look like this:

This page contains the following elements:

When entering a text in the search box, a search is performed on the items in the list.

When tapping the Sort/filtering link, the following panel displays to sort and/or filter the query:
*Tapping Apply closes the panel and displays the query sorted and/or filtered accordingly.
*Tapping Close closes the panel without changing the previous sorting and filtering options.

By default, the sorting tab is displayed:

The fields present in the query are displayed, and you can tap the ascending and descending arrays to sort the list. Tapping an array a second time deactivates the sort.

When tapping the Filter tab, the following panel displays. You can then select fields, operators, and values to create conditions applied to filter the query. For field and operator selections, dialog boxes display with the following options:

You can then enter a value and tap the check mark to validate the filtering criterion. Several criteria can be added in a filter using the "and" operator.

By tapping the user panel, and then Design page, you display the following design page:

The same areas as for the home page design are present. Two levels of nested elements are present on the left panel. The first is associated with the query page, the second to the grid that contains the list of lines.

The right panel associated with the query page is the following:

The Expert mode and the Data model (prototype) provide access to the technical structure of the document; they should not to be used except by skilled developers.

Tapping Actions displays the following choices:

The first selector indicates if a download action is available on the page and the next information on the panel is a list of actions with icons: To delete an action, tap the X. To edit an action, tap the pen. To add a new action, tap Add an action. Only actions present in the page prototype can be added. The button is grayed-out if no additional actions can be added.

For each action link setup, the following section opens: Select or change the action you want to set up. Select the options for each action: Add to footer/header adds an icon to the appropriate area depending on the device. Refresh page triggers a page reload. Multi-selection allows you to select multiple records before initiating the action. With this option, a column of check boxes displays on the grid to select multiple records.The action then applies to every line selected. You can select an icon for the operation. An icon is mandatory if the footer/header option has been chosen. Note that some standard actions can already be present by default on the action panel, but using the action setup allows you to change the default icon. Selecting a check box icon for the Creation action changes the icon as shown here: To validate the action setup, tap Apply. Tapping Cancel exits edit mode without saving changes.

The right panel associated with the $resources tag of the query page, representing the grid in the query, is the following:

The Data model (prototype) link provides access to the technical structure of the document; it should not be used except by skilled developers.

This panel contains the following elements:

	This option allows you to show or to hide labels.
	This option allows you to choose between two types of design: the list design or the card design. When the card design is chosen, the following options may change. The list of options given next are those available with the list design.
	Select the check box to enable any of these elements for the query page: Pagination links (First page / Previous Page / Next Page / Last page) Enable sorting and selection options Search area Show row detail link on every line Row index on every line
	You can select whether a detail page or an edit page displays when tapping a line.
	You can decide whether the table header is displayed or not on the page.
	This section defines the number of columns in the list and the order for the selected columns. To do this: You can first chose the number of columns to display. The maximum number possible is determined by the prototype. You can then select the columns in a selection list. The fields are determined by the prototype. For each field, you can indicate the best size : Allow the system automatically determine a size Define a fixed size Define a proportion
	You can define a fixed size using a slider.
	You can define a percentage of the total width using a slider.
	For the fields referring to an entity that has a description, you can define if it is hidden and its relative position compared to the field value.
	A status column can be managed based on the following principles: You can define as many conditions as you want. Each condition is associated with an icon. The conditions are evaluated in the order of their description. The first condition fulfilled defines the icon displayed. If no condition is fulfilled, no icon is displayed in the column.
	When the status is not set to No status, the list of conditions already entered is displayed, and you can: Delete an existing condition Modify an existing condition Add a new condition
	To define a condition, you need to enter: A field that can be selected in the list of fields given by the prototype A condition that is given by a combo box whose contents depend on the type of field A value
	You can then define the color of the indicator associated with the condition. A color selector is available for this:
	Finally, you can select the icon associated with the condition. An icon selector is available for this:
	You can validate the conditions you have added by tapping Apply, or exit without saving the changes by tapping Cancel.

When the card design is chosen, it displays in the central panel:

The options that can be chosen are almost the same, except for the following:

	The columns are all displayed in the order determined by the prototype and cannot be changed.
	You can set the number of cards per row, from 1 to 4.
	You can set the minimum width of a card in pixels.
	You can define how the empty record located at the end of an incomplete line is displayed: As a blank card As a card with labels only Not displayed
	Because card view space is less limited than a line, you can choose: To display no icon by selecting No status To display only the first icon associated with a fulfilled condition by selecting Single status To display several icons if several conditions are simultaneously fulfilled by selecting Multiple status

A detail page can have the following design:

This page contains the following elements:

1. The breadcrumb displays the navigation path to the page and allows you to navigate back to previous pages by clicking the corresponding title.
2. Data blocks in the page can be collapsible by tapping the corresponding icon.
3. The user panel opens a menu that accesses additional operations when clicking it.
4. The bottom left has two icons:
   • Tap the House icon to return to the home page
   • Tap the Pin icon to add this page as a shortcut Tile on the home page
5. The bottom right displays icons that provide access to several operations such as edit the current record, delete the current record, and go back to list, which are the most common, but others can be added by page design.

The design page action impacts different areas that can look differently or be absent.

By tapping the user panel, and then Design page, you display the following design page:

This page contains the following elements:

The nested structure of the document is displayed here. For the detail page, multiple levels can be nested depending on the page structure. Tapping a level displays it in orange and changes the right panel, providing access to corresponding parameters. The different levels used for a detail page are:

The first level is the document level (displayed in green). This level can embed several types of elements that can themselves be nested: groups (rows), Tiles (cells), stacks, and fields. A stack groups several sub-elements (rows, cells, fields, and even stacks). A stack can be set up as collapsible: all the sub-elements hide if the stack is collapsed. A row, displayed in green, is an intermediate level that can contain several Tiles, but also direct fields. A cell (or a Tile), displayed in blue, is the element that allows you to create columns by defining their sizes. It can contain fields, but also nested stacks. The field, displayed in purple, is data displayed on the page. This data can be simple (such as a date, a number, a text), but also a grid representing a collection of lines (such as sales order lines).

You can perform the following operations from this panel:

• To set up a given level, tap an element of the structure: the right panel displays the information related to the current level.
• To move an element from one place to another, drag the element in the left panel and drop it either in the right place of the hierarchy or directly onto the central panel. The following picture shows you this operation:

This panel displays two sections:

• A Container section to add a new group, a new Tile, or a new stack. Tap the corresponding icon, and drop it in the correct place onto the central area:

• A Fields section that displays the fields available in the prototype and not yet present. You can drag and drop them onto the central section if you want to bring them back on the page.

On the right panel, you can change the setup for the elements located at every level. Depending on the level, this panel displays different information:

Document level

An edit gadget page allows you to create or modify a record for an entity such as an order or a customer.

An edit page can have the following layout:

An edit page can contain the following elements:

1. The breadcrumb displays the navigation path to the page and allows you to navigate back to previous pages by tapping the corresponding title.
2. Data blocks on the page can be collapsed by tapping the down arrow.
3. The user panel opens a menu that provides access to additional operations when tapping it.
4. Selection icons are available when a field is a reference to another entity. Tap the eye icon to open a query page and select the corresponding reference.
5. Tap the calendar icon to select a date.
6. Because the grid is editable, tap the X to delete the line (if the deletion is possible on the corresponding grid).
7. Because the grid is editable, tap the pen icon o update the line (if the modification is possible on the corresponding grid).
8. Because the grid is editable, tap Add row to add lines to the grid (if the addition is possible on the corresponding grid).
9. The bottom-left has two icons:
   • Tap the house icon to return to the home page.
   • Tap the pin icon to add this page as a shortcut tile on the home page.
10. The bottom right displays icons that provide access to several operations such as edit the current record, delete the current record, and go back to list, which are the most common, but others can be added by page design.

When you are finished customizing a page, tap the global validation icon to save. The following panel opens:

In this panel, you can enter a code, a title, a description, or a comment. The customization can be saved as personal, global, or factory, which assigns it to your default factory code. Note that this action will save the customization on the server. When you leave customization mode, you see the result. But if you reload the page later, you see the previous page, unless you update your version by using the Update version action in the mobile application definition page.

The mobile client uses HTML5 data caching features to store local data previously used by the user. The main principles are the following:
* the page layout of every application is stored in the cache as soon as the application has been launched.
* the data associated to the pages is stored if the page has been accessed. But there is also a way to update the cache by selecting a list of records.
* the settings screen allows cleaning the cache.

Update the cache

Manage cache on a page can be done by using the page personalization. In the page personalization of the query, at the document level, an Allow download selector can be swithed on or off:

When this switch is on, it is possible to perform multi-selection on queries. Depending on the layout(mobile or tablet), the icones are not located at the same place:
For the tablet mode, the switch is located in the top right side of the screen, just under the user identification area:	For the mobile mode, it is located on the right panels that opens when clicking on the upper right chevron:
When the multi-selection mode is activated, the user can select several records by clicking on the lines and / or the record, depending on the grid mode used. The number of record selected is displayed:
on the bottom of the page in tablet mode	at the top of the page in mobile mode
In both cases, the lines and / or the record can be selected, and the count of selected record is displayed.For instance, you can see here the layout of a tablet page when a multiple selection has been done in record mode:
On multiple selections, a popup displays different choices: unselect or select all. revert the selection. hide the unselected records. any additional operation that can be launched on all the selected lines (this depends on the page). and finally, download the corresponding data.
The download choice allows not only to download the data associated to the details of the entity, but also to the data that can be displayed from links available on the details. Let's for instance imagine that, on a customer details, links exists to display the list of his orders, quotes, invoices, returns with various selections. Based on these links, the system will not only propose to download the selected customers, but the corresponding documents. This is defined by checking the corresponding boxes:
Clicking on the download button will display the following page: The count of the customer will evolve during the download process. On every document, the count of the documents to be downloaded for the current customer is displayed and will evolve as well. It is possible to stop the download process by clicking on the orange bar that displays the global count of data being transferred.