Difference between revisions of "Home screen"

From Resco's Wiki
Jump to: navigation, search
(Editing home)
(Badges)
 
(13 intermediate revisions by the same user not shown)
Line 11: Line 11:
 
[[File:Editing the home screen.png|600px]]
 
[[File:Editing the home screen.png|600px]]
  
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 any item and click '''Add''' to add it to the menu. Most items can be added multiple times, for example in case of entities, each entry can point to a different [[view]].
+
=== 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]].
 +
 
 +
;Section: You can add one or more section headers to keep your home screen items organized. Section headers cannot have icons, only text. The text can be also 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:
 
Additional menu items are available from the toolbar:
Line 18: Line 30:
 
* '''Create New''': Opens a form for creating a new entity record.
 
* '''Create New''': Opens a form for creating a new entity record.
 
* '''Open Existing''': Displays a particular record.
 
* '''Open Existing''': Displays a particular record.
 
The following controls are available directly on the menu item (left to right):
 
:[[File:Controls on the home screen item.png|200px]]
 
* Drag the item up or down or even away from the menu.
 
* Close the home screen editor and edit the item instead.
 
* Automatically open the selected item on application start.
 
* Delete the item from the menu.
 
  
 
The following toolbar buttons allow you to further customize the menu:
 
The following toolbar buttons allow you to further customize the menu:
 
* Use '''Move Up''' and '''Move Down''' to reorder menu items.
 
* Use '''Move Up''' and '''Move Down''' to reorder menu items.
 
* Click '''Properties''' to edit the properties of the menu item.
 
* Click '''Properties''' to edit the properties of the menu item.
* Click '''Rename''' to change the label for 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 '''Remove''' to delete an item from the menu.
 
* Click '''Set Startup''' to automatically open the selected item on application start.
 
* Click '''Set Startup''' to automatically open the selected item on application start.
 +
* Click '''Badge''' to set up notifications about new items. See [[Home screen#Badges|Badges]] for more information.
 
* Click '''Design''' to modify the looks of the menu item (size, color, fonts, etc.).
 
* 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):
 +
:[[File:Controls on the home screen item.png|200px]]
 +
* 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 ==
 
== 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:
+
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. user can have more than one Home item of the same entity, each with different views.
+
; 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.
 
; 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.
Line 44: Line 59:
 
; 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.
 
; 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.
+
; 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.
+
: '''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.
 
; 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.
 
: 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 ==
 +
 +
{{Beta|section}}
 +
 +
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.
 +
 +
[[File:Badges in the app.png]]
 +
 +
This feature requires [[Releases/Summer 2021|Resco Mobile CRM version 14.1]] or later.
 +
 +
To enable badges:
 +
# Edit an app project in Woodford.
 +
# On the home screen, select an item, then click '''Badge'''.
 +
# Enable auto-refresh and set up how often should the badge be refreshed
 +
# Optionally, define a condition if you are only interested in a subset of records. Conditions are defined using the [[Filter editor]] user interface.
 +
 +
[[File:Badges in woodford.png|600px]]
  
 
== Home groups ==
 
== Home groups ==
Line 60: Line 94:
 
{{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.}}
 
{{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.
+
Groups can also have their own icons, just like any other entity. Swap to the '''Images''' pane and select or upload an icon.
  
== Custom design ==
+
== Change icons ==
 +
 
 +
[[File:Images pane on home screen.png|200px]]
  
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.
+
Each item on the home screen has an associated icon which is displayed in the app. The icons are managed on the '''Images''' pane.
* You can design the size and colors of a home item.
+
* Each project comes with a set of default icons available for the most common entities and other home screen items.
* You can add only the following fields: title, subtitle, and icon.
+
* You can override the default icon: Select an item on the home screen, choose an icon, then click '''Save'''.
* You can use the [[Style_editor#Views_and_home_screen|style editor]] to modify the styles.
+
* Click '''Add image''' on the '''Images''' pane to upload a custom icon and use it for the selected home screen item.  
* You can add additional images.
+
* 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'''.
  
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.
+
=== Advanced ===
  
You can use [[Offline HTML]] to perform more serious modifications of the home screen, or even overhaul the entire user interface of the app.
+
All icons, both default and custom, can be managed in the '''Images''' section of your project.
 +
# Select '''Design > Images''' from the '''Project''' menu.
 +
# Change the '''Directory''' to "Home". <br>[[File:Home screen icons.png|600px]]
 +
# 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.
  
== Change icons ==
+
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 [[Images#Project_images|project images]] for more information.
  
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.
+
== Add banner {{anchor|Add_logo}} ==
  
[[File:Home screen icons.png|600px]]
+
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.<br>[[File:Add banner to home screen.png|600px]]
 +
# Click '''Save''' and publish the project. When your app users synchronize their apps, the image is displayed above the home screen:<br>[[File:Custom home image.png|240px]]
  
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.
+
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".
 +
::[[File:Add home logo.png|360px]]
  
See [[Images#Project_images|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.
+
== Rename home items ==
  
== Add logo ==
+
Home items can be renamed using [[localization]]. See how to [[Localization_examples#Entity_item_on_home_screen|change the title, subtitle, and icon]] of an entity on home screen.
  
You can add a custom image to your home screen, for example, your company's logo. The image called "image" in the "Home" directory is then displayed above the home screen in the app.
+
== Custom design ==
  
[[File:Add home logo.png|360px]] [[File:Custom home image.png|240px]]
+
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#Views_and_home_screen|style editor]] to modify the styles.
 +
* You can add additional images.
  
== Rename home items ==
+
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.
  
Home items can be renamed using [[localization]]. See how to [[Localization_examples#Entity_item_on_home_screen|change the title, subtitle, and icon]] of an entity on home screen.  
+
You can use [[Offline HTML]] to perform more serious modifications of the home screen, or even overhaul the entire user interface of the app.
  
 
[[Category:Woodford]]
 
[[Category:Woodford]]

Latest revision as of 07:54, 8 June 2021

Wikipedia logo
Wikipedia has an article on a similar subject:
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.

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.

Editing the home screen.png

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.

Section
You can add one or more section headers to keep your home screen items organized. Section headers cannot have icons, only text. The text can be also 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):

Controls on the home screen item.png
  • 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

Warning This section describes a function that has not yet been publicly released, or has been released in beta / preview quality. Subject to change.

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.

Badges in the app.png

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
  4. Optionally, define a condition if you are only interested in a subset of records. Conditions are defined using the Filter editor user interface.

Badges in woodford.png

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

Images pane on home screen.png

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".
    Home screen icons.png
  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.
    Add banner to home screen.png
  3. Click Save and publish the project. When your app users synchronize their apps, the image is displayed above the home screen:
    Custom home image.png

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".

Add home logo.png

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.