Home screen

Home screen, also called home form, or simply Home, is the main screen of mobile apps. It often serves as the menu that allows user to easily access the main functions of the app.

The home screen of Resco apps can be customized via Woodford. It is defined within app projects. Each app must have one home screen.

Editing home

To configure the home screen of your app, edit the app project and select Components > Home screen from the Project menu.

Available Items pane

The Available Items pane on the right displays items that can be linked from your home. The list contains all entities, plus several additional elements, such as hubs or maps. Select an item and click Add to add it to the menu. Most items can be added multiple times, for example in the case of entities, each entry can point to a different view.

E-mail Sync

Custom synchronization for mail only.

Favorites

Users gain easy access to their favorite records from various entities.

Section

Add one or more section headers to keep your home screen items organized. Section headers cannot have icons, only text. The text can also be localized.

Search

Add global search to your home screen. Double-click the menu item to configure where to search and how to display the results.

Images pane

The Images pane on the right displays the various home screen icons available in your project. Select a home screen item and choose an icon from the Images pane to use the icon. You can even upload new icons.

Toolbar functions

Additional menu items are available from the toolbar:

• Add IFrame: Access HTML content from your home screen.
• Special IFrame: Use custom HTML to handle global events of the application or even to replace the entire app user interface.
• Create New: Opens a form for creating a new entity record.
• Open Existing: Displays a particular record.

The following toolbar buttons allow you to further customize the menu:

• Use Move Up and Move Down to reorder menu items.
• Click Properties to edit the properties of the menu item.
• Click Rename to change the label for the menu item. You can also set tooltip text (displayed in the web version of Resco Mobile CRM when you hover over the item).
• Click Remove to delete an item from the menu.
• Click Set Startup to automatically open the selected item on application start.
• Click Badge to set up notifications about new items. See Badges for more information.
• Click Design to modify the looks of the menu item (size, color, fonts, etc.).

Inline buttons

The following controls are available directly on the menu item (left to right):

• Arrows: Drag the item up or down or even away from the menu.
• Edit: Close the home screen editor and edit the item instead.
• Home: Automatically open the selected item on application start.
• Delete: Delete the item from the menu.

Properties of items on home

You can double-click most items on the home screen to display their properties. In the case of entity views, the properties are organized into multiple tabs:

Public View tab

It displays the views that are enabled/available to users when they open the Home entity item. E.g., a user can have more than one Home item of the same entity, each with different views.

Charts tab

If you define any chart for the entity, you can specify which charts will be enabled/available for users. You can specify which enabled chart, will be used to visualize data.

Calendar tab

If you have a Date field defined for at least one of the views that’s enabled on the Home item, you may flip the view to calendar view. If it is the case, you can specify the calendar properties on this tab.

Properties tab

Here you can define whether users will be able to create new records (option Create New), and what options to flip the view the users have, and how to visualize records. For example, if you allow only a chart (option Show Records as Chart), users will only see the defined chart. If there are more charts enabled on the Charts tab, you can switch between different charts, but not between different ways of visualizing records, only as charts.

Initial Control defines the default way of displaying records when you first open the view.

Auto Refresh allows you to define how fast should the content of view reload in online mode.

Map tab

Since Woodford version 10.2. it is possible to set up initial map position and zoom when switching from list view of entity to map view. To set it up, select Home from the Project menu, double-click an entity to display its properties, go to the Map tab and enter initial coordinates or use ‘From Map’ option to manually choose initial map position and zoom directly from the map.

Note: Initial map position and zoom can be also defined for Associated Views (Tabs) of entities. To set it up repeat the process described above for Associated View which can be found on entity’s edit form.

Badges

Badges are tiny numbers displayed over the home screen items that represent the number of records in the view that match a certain condition. This feature is primarily aimed for field service agents who want to be instantly notified on newly submitted incidents (working with the web app, or a mobile app in online mode), but it can be used in many other scenarios.

This feature requires Resco Mobile CRM version 14.1 or later.

To enable badges:

1. Edit an app project in Woodford.
2. On the home screen, select an item, then click Badge.
3. Enable auto-refresh and set up how often should the badge be refreshed. Auto-refresh does not work in offline mode.
4. Optionally, define a condition if you are only interested in a subset of records. Conditions are defined using the Filter editor user interface.

Home groups

You can group home items (entities and other features) under custom groups. This effectively allows you to create nested menus.

To add a new group, click Add Group. This displays a new Groups pane on the left of the Home pane.

Root, as the name suggests, is the main level of the home items and groups (visible at the start of application). A sub-level for the groups can be created by clicking on a group in the Groups section and then clicking again on the Add Group button.

Note	To rename or remove a group, you have to select the group in the Home pane (not in the Groups pane) and then you can select Rename or Remove from the toolbar.

Groups can also have their own icons, just like any other entity. Swap to the Images pane and select or upload an icon.

Change icons

Each item on the home screen has an associated icon which is displayed in the app. The icons are managed on the Images pane.

• Each project comes with a set of default icons available for the most common entities and other home screen items.
• You can override the default icon: Select an item on the home screen, choose an icon, then click Save.
• Click Add image on the Images pane to upload a custom icon and use it for the selected home screen item.
• Click Remove image on the Images pane to disassociate a custom icon with the selected home screen item and return to its default icon. The icon is not actually deleted, it remains available for later use.
• Once you're done updating icons, click Save.

Advanced

All icons, both default and custom, can be managed in the Images section of your project.

1. Select Design > Images from the Project menu.
2. Change the Directory to "Home".
   
3. You can filter the image list by typing into the search bar. The default icon names are equal to the label of the item on the home screen.

The Images section of your project is an older, less recommended way of managing icons. It allows you to permanently delete icons from your project, potentially resulting in home screen items without any icon displayed in the app. It does offer some also some functions not available with the Images pane, such a bulk changes. See project images for more information.

Add banner

You can add a custom image as a banner to your home screen, for example, your company's logo.

1. Edit the home screen of your project.
2. Click Add banner and upload a suitable image.
   
3. Click Save and publish the project. When your app users synchronize their apps, the image is displayed above the home screen:
   

The banner is saved as a normal project image. You can also modify it in the Images section of Woodford: go to the "Home" directory and look for a file called "image".

Rename home items

Home items can be renamed using localization. See how to change the title, subtitle, and icon of an entity on home screen.

Custom design

You can customize the colors and fonts of the home screen. Click Design to open the home designer. Essentially, this works very similarly to a view designer, but much more limited, many options are unavailable for home.

• You can design the size and colors of a home item.
• You can add only the following fields: title, subtitle, and icon.
• You can use the style editor to modify the styles.
• You can add additional images.

Resco mobile apps come with a second default home screen design. Select Design > Theme from the Project menu and enable Custom Home. When this customized home is enabled, modifications of the home screen design do not apply.

You can use Offline HTML to perform more serious modifications of the home screen, or even overhaul the entire user interface of the app.

Was this information helpful? How can we improve?