|User interface components|
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.
To configure the home screen of your app, edit the app project and select Components > Home screen from the Project menu.
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.
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.
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 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.
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.
- Click Remove to delete an item from the menu.
- Click Set Startup to automatically open the selected item on application start.
- Click Design to modify the looks of the menu item (size, color, fonts, etc.).
Properties of items on home
You can double-click most items on the home screen to display their properties. In the case of entities, 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. 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.
- You can also define the initial control, a way of displaying records when you select the Home item.
- 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.
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 images, just like any other entity. When adding image, use the same name as is the name of the group.
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.
Each item on the home screen has an associated icon. To see the list of the icons, select Design > Images from the Project menu, and change the Directory to "Home". You can filter the image list by typing into the search bar.
The name of the icon equals to the label of the item on the home screen. When you add a new item to the home screen, a new image with the same name is automatically created in the "Home" directory. Many home items come with a default icon; for example, most entities do. However, when you create a custom entity and add it to home, or an IFrame, the default icon is blank.
See project images for more information about working with images, for example, how to replace a standard image, add a custom image, or even perform bulk changes.
You can add a custom image as a banner to your home screen, for example, your company's logo.
- Edit the home screen of your project.
- Click Add banner and upload a suitable image.
- 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".