1

View

From Resco's Wiki
Jump to navigation Jump to search
User interface components

Views are one of the main components of mobile apps. The main purpose of a view is to display a list of records of a particular entity.

Views are defined within app projects. Each entity has its own views. A single entity can have multiple views.

  • Administrators can create and manage views in Woodford.
  • App users can create their own custom views directly in the app. See Private views.

Types of views

  • Public view displays the list of records of an entity.
Example: A list of your contacts.
  • Associated view displays a list of records from an associated entity, that is relevant for the selected item.
Example: A list of appointments of a particular contact.
  • Lookup view displays the list of records of an entity (same as public view), however, it is used when user should select an entity to be inserted into a form.
  • Dashboard view is a combination of multiple views and charts.
Note If a custom associated view, lookup view, or dashboard view does not exist, the public view is used instead.

Managing views

Views are associated with an entity. To see a list of views for an entity, edit an app project, select the entity and click Show UI.

On the Mobile Views, Forms and Charts screen, you can add, clone, or remove views, edit them and change their properties, as well as export them (to a file in XML format) or import them (for example, to a different app project).

You can define multiple views for each entity. While you can select an initial default view in the properties of a view, users can switch to a different view in the app. Users may not switch to hidden views; those are displayed only when explicitly configured.

Creating a view

  1. Select an entity in the Project menu; for example, Competitor.
  2. Click Show UI to display the list of mobile views, forms, and charts.
  3. Click New View and set the properties of the view.
  4. Enter a descriptive Name; for example Competitors.
    The name of a view is used as a logical name. Read also the best practices and instructions for renaming views using localization.
  5. As Type, select one of the four view types:
    • Public List displays the list of records of an entity. Usually what you see after opening an entity in application from Home screen. It can be used everywhere
    • Associated List displays a list of records from an associated entity, that is relevant for the selected item. Example: A list of appointments of a particular contact.
    • Lookup List displays the list of records of an entity (same as public view), however, it is used when the user should select a record.
    • Dashboard List is designed for use in a Dashboard.
  6. As Template, select one of the provided templates or use a blank one to start from scratch.
    Keep in mind the limited screen size of a mobile device. We recommend to use templates; adapting is often less work than creating a template.
  7. Select Hidden if you don't want that your new view is listed as an option in the app to users when they switch views. However, the view can still be used in the app when you explicitly design it that way.
  8. Click OK to start designing your view.

Properties of an existing view

When you edit the properties of an existing view (select the view and click Properties), you can no longer change the template (that's only the starting design of a view), but configure additional parameters:

  • Default – Make this view the default initial view. If the default is not set, the first view in alphabetical order is used.
The default selection only applies when a user synchronizes with an app project for the first time. The app remembers the user's choice and does not override it, even if a Woodford admin later decided to set up a different view as the initial default.
  • Mode – Make this view dedicated for online or offline view, or for both.
  • Sync Filter – Select if you want to use Sync Filter also in online mode for this view.

View designer

The view designer window is divided into multiple parts:

  • Toolbar with buttons on top: Use it to add or remove elements from your view, or configure additional functions.
  • Properties pane on the left shows properties of the selected component in the Designer pane.
  • Designer pane in the center shows a schema of a single row of the view. You can use the slider to zoom in or out; or you can use the mouse wheel. You can also use it to resize fields and move them around.
  • Fields pane on the right shows fields that you can add to the view.

View designer in Woodford: main screen

Fields pane

Click Select Fields to display a list of fields defined for this entity.

  • These fields are available for the mobile device, not only for being displayed in the view, but also for sorting and search.
  • Fields that you select will be available in the Fields pane. You can also disable fields that need to be enabled for synchronization, but they do not need to be added to view to make the designer tidier.
  • If you need additional fields, you must enable them on your entity; see App projects#Managing fields for more information.

Designer pane

If you created your new view as described above, your Designer pane will show three cells: one big cell for Name in the top row and two empty cells below. You have two options how to populate the empty cells with fields (or replace field with another one):

  • Select a cell and click Binding on the Properties pane.
  • Double-click a cell.

In both cases, you must select from a list of fields. Click OK to confirm your selection.

Properties pane

The following properties can be configured on View level:

  • Columns: On wider screens, you can display multiple list items in one line. This can be particularly useful for custom rows; for example when you want to create your view as a gallery of images. The value of Columns is the maximum number of records to display in one line; however, fewer records will be displayed on narrow screens.
  • Auto Grid: Enter a value in pixels, for example, 500. When the width of the view in the app exceeds 500 pixels, the design changes to a predefined single-row layout. You can modify the style of the entries; see Tricks.
  • Auto Header: When enabled, it creates a header row above the data rows. See Header for more information.

The following properties can be configured on Row level. First, use the drop-down list to select which row you want to modify.

  • Name – Defines the Row’s name (to distinguish between multiple Row designs).
  • Width – Defines the width of the row in a view.
  • Height – Defines the height of the row in a view.
  • Design Size - Allows you to define width and height for different operating systems.
  • Color – Defines the color of the row’s background.
  • Selected – Defines the color of the row’s background, when the record in view is selected.
  • Next Wide – used for custom responsive layout. Multiple rows of various width must be defined and then chained with this setting. Row design will change with resizing of the application. For more information see this blog. Blog

The following properties can be configured on Cell level. First, use the drop-down list to select which cell you want to modify. Alternatively, you can select the cell in the Designer pane.

  • Left, Top, Width, Height – Coordinates of the selected element (field on the row). You can adjust the element size and position either by entering the coordinates or by drag-and-dropping the element and element’s sides in the designer.
  • Kind – Set how the selected element is displayed in the view.
    • Text: Show text as is.
    • Image: When you select a field for which the Kind is changed to Image, the field’s value is taken as the image name. So for example, if you set the status code field as Image, and add the icons of the different status codes to the customization, the icon on the view will change according to the record’s status code. Also, please see the Form Style Editor’s Folder description for more information.
    • Map Pin: When you select a field for which the Kind is changed to Map Pin, the field’s value is taken as the Map Pin image name. So for example, if you set the status code field as Map Pin, and add the icons of the different status codes to the customization, the Map Pin icon on the map view will change according to the record’s status code. See custom map pins for more information.
    • Text-Edit, Text-DirectEdit, Image-Edit, Image-DirectEdit: The element becomes editable directly from the view. See Editable field.
    • Text-Click, Image-Click: Clicking the element opens details about related entity record. See Clickable field.
  • Style – You can select the style that will be used for the selected element. The designer will also preview the selected style. You can also create your own styles or adjust the existing ones using the Edit Styles button in the toolbar.
  • Binding – Please check the following section for more information.
  • Anchor – Anchors fix the boundary position of the field to the side the anchor is pointing to.

Binding

Binding determines which entity field is displayed in a cell. It is actually a combination of two properties: type and value.

Three binding types exist:

  • Value – this is the default option. This way the field data is shown in a standard way, so that you can see the value of the field in the Mobile CRM app.
  • Raw Value – this makes sense for example for option sets, if you want to display the numeric representation of an option, rather than its label. This is useful if you don’t want to display text, but different view images, or map pins based on different value of the option set. It is because images cannot have space in their names
  • Constant – this binding type allows you to enter static text. The exact text is displayed in the app, instead of the entity field data. This way you can add labels to views, for example, to describe fields that only show numeric values.

Anchors

Each field has four available anchors. Click an anchor to toggle it on and off. Active anchors fix the boundary position of the field to the side the anchor is pointing to. In the case of the picture below, the City field binds to the left border of the view item and to the bottom border of the Name field. When the anchors are set correctly, the view will not be scrambled when users rotate the screen, e.g., from portrait to landscape.

Sample anchor in views

For more information about anchors, see Advanced tip: Managing cell anchors in views. Blog

General controls, adding new cells

View toolbar, Cell section

The toolbar is divided into related blocks. The first section, Cell, contains general functions and functions that add or modify cells on your view.

  • Save, Save & Close – Save your changes.
  • Add – Add a new text cell to the view.
  • Delete – Remove the select cell from the view.

Images and map pins

Click Add Image and select the type of image to add an image to your view. See Add images to views and forms for more information.

Click Add Map Pin to add a map pin image to your view. You can then select many options for the map pins or use custom pins. See Custom map pins for more information.

You can also watch this WEBINAR for more info on Map Pins. Webinar

Edit styles

To change existing styles or add new styles, select Edit Styles from the toolbar.

The styles are global for all fields on all views, so if you change a style that is assigned to multiple fields, even to a view on a different entity, these changes are also applied to these fields. It does not matter from which view you open the style editor. Click Dependencies to see all components where a style is used.

See Style editor for more information.

Buttons

You can add buttons to the view. Depending on your device, buttons are displayed when you select a record in the list, or when you swipe from the right.

View buttons in Resco mobile apps

On Windows apps, buttons are displayed when you select a record. On Android and iOS, the behavior is controlled by the parameter Use Legacy List Buttons (in Woodford Configuration).

To add buttons to the view, proceed as follows:

  1. Select Buttons from the toolbar to display the command editor.
  2. The right pane shows your available commands, the left pane shows commands in use. Add buttons from right to left.
  3. For some commands you can specify more details, for example, what child entity record to create or which status to set for the record. Select the command and click Properties.
  4. Save all changes and publish the project.
Note To use buttons like E-mail or Call, the email address or telephone number fields must be included in the view. Also, Formatting of the field has to set correctly.

You can also define custom buttons:

  1. Select Buttons from the toolbar.
  2. Click New Command and enter an internal name of the command and a label, then click OK.
  3. Save the buttons editor and return to the view.
  4. Select Button Click from the toolbar.
  5. Using the rules editor, define an action that the button should perform.

Actions when multiple records are selected

Similar to buttons, you can define actions available when you select multiple records in your view. To use multi-selection in the app, tap and hold a record until the selection checkboxes appear. Multi-selection offers the following functions:

  • Access configurable commands from the hamburger menu in the top right corner. For example, you can export the selected records, or delete them.
  • Access statistics/aggregation functions from the menu in the status bar - bottom right corner.

Selecting multiple records in views in Resco mobile apps

In Woodford, edit a view and click Multi Select to set up the available commands. The operation is similar to view buttons or Form commands. To see how it works, you can also check this webinar section. Webinar

You can define your own custom commands that perform actions that are not available when using built-in commands. The actions cannot be configured in Woodford, you can define them using JavaScript. See the MobileCRM.UI.EntityList.onCommand function for more information.

You can disable multi-selection in views completely using Woodford configuration: Allow Multi-select In Lists.

Sorting and filtering

View toolbar, Query section (sorting and filtering)

Select fields

Click Select Fields to define which fields for the main entity, or even from related entities, should be available in the view. These fields are loaded from the database when the view is displayed. All fields that are displayed in the view must be loaded, but you can also load additional fields, for example, if you want to allow the user to filter the view according to these fields.

Edit filter

Edit Filter is used to restrict the displayed data in the view to only those that meet the specified conditions. Conditions are defined using the generic Filter editor user interface.

The difference between Sync Filters and view filters is that the Sync Filter controls which records from the backend make it to the offline database on the device, while the view filter determines which of the records available on the device are displayed in a particular view. This is the perspective of having more views for one entity.

Edit sort

Edit Sort allows you to select which field will be used for sorting and the direction of sorting (ascending or descending).

You can also sort by multiple fields.

Edit search

Click Edit Search to define where (in which field) will the application search for the character entered into the application’s search field. Also, it can be defined whether to search at the field’s beginning, end, or in each full text. You can add multiple fields, the conditions are combined using the logical operation OR.

Because the search uses OR, to enable more advanced search, you can create a filter with a condition over a text field (e.g. Name, Title etc.) and enter @@filter@@ as a filtered text. This will be replaced (in runtime) by the text entered into the search field on the view; see example.

Searching is generally fast, however, these are some of the factors that affect search speed:

  • number of records in an entity where you search
  • view filters with linked entities
  • complexity of the database
  • device performance (power)
  • number of fields used in search

If you have fields for GPS coordinates in the entity, and if you enable this option for the mobile project, users will be able to switch the view from list to map; the records will be displayed on the map.

Sort fields and filter fields

Since version 9.1 of Mobile CRM app, you can set up additional sorting and filtering on view by using the Search bar. In these two view options, you can specify which fields are available to users for this additional sorting and filtering.

Date fields

Click Date Fields to specify which fields that are used as Start and End date fields. This can be useful if you want to allow Calendar view for this entity.

Rows and rules functions

View upper menu rows rules

Rows section

You can define multiple row designs for a view, and then you can define conditions when a specific row design should be used. See Row script for more information.

  • Copy Design – changes current row template design
  • Add Row – add a new row template
  • Clone Row – add a new row template, the design is copied from the current template
  • Delete Row – delete the current row
  • Up / Down – change the order of rows. Internally, rows are numbered: 0, 1, 2, etc. You can see the number for example in row script rules. The first row template is the default one. It is important for example when using the custom responsive layout.

Rules section

Many advanced features involve adding business logic to your view. Each of these buttons (except the last one) opens the Rules editor.

  • Row Script – opens the row script editor
  • On Save / On Change – opens the rule editor, applicable when Editable field is set.
  • Button Click – opens the rule editor, applicable when using buttons in a view.
  • Cell Click – opens the rule editor, defines actions after clicking on a cell
  • iFrame – adds JavaScript to a view

Iframes

You can use Offline HTML functionality to add JavaScript and JSBridge to views and perform validation; for example when you use the view to change the data (editable fields, MultiSelect), and to handle view buttons. It is also possible to use JavaScript and JSBridge to load records to the view (FetchXML). For more information about extending views by using this technology, please check the following part of a webinar. Webinar

There are additional validation options, like the possibility for the app to ask whether a change should be saved or discarded when users edit records on lists; OnChange and OnSave actions triggering in JavaScript, validations when records are modified or saved directly on a list, etc. can be seen in this webinar. Webinar

See Resco JavaScript Bridge for more information.

Note If you are using JavaScript to provide source data for a view, this applies to the default list view, but not to the map view. Map views and route plans use the original fetch in the view combined with the latitude and longitude of the area currently displayed on the map; custom data provided by JSBridge are ignored.

Miscellaneous

Best practice in renaming a view

Keep in mind that the view name is used as a logical name, so it's used all over the application. If someone changes the name of a view, it can cause issues with the application. Especially if they change the default view names on pre-defined entities.

Views are used in map, calendar, in entities as public, associated, or lookup views. So when the name is changed, you should reset the views on all these places.

It might be easier to use Localization feature to change the display name of a view, while keeping the logical name untouched. To enable this, you need to keep the view names without spaces or special characters. Underscore is okay to use, but the following characters are not: /\%#&*<>?|“+:{}. Also, some national characters and non-Latin characters are not allowed. See Localization examples for inspiration.

Editable field

Editable field, list, or editable grid is a feature that allows users to edit more records at once, directly from the view, without a need to go to edit form of a record.

To set a field to be editable directly in the view, set the field's Kind to one of the edit options:

  • Edit: All changes to this kind of field must be saved. This requires that there's a Save button (only available in the public view - in the list of records accessed from the home screen).
  • DirectEdit: Changes are changed immediately. This can be used also on lookup or associated views that don't have the Save button.

For more information about editable fields, please check this section of one of our webinars. Webinar The webinar is dated, but much of the information is still valid. One notable correction: editable views fully support validation using rules.

Text-Edit versus Image-Edit
Text-Edit and Text-DirectEdit can be used by cells with binding to any field that allows input, such as Text, Number, OptionSet, etc.
Image-Edit and Image-DirectEdit can only be used on Image cells with binding to OptionSet field. In this case, the app lets users choose from a list of options. This is especially useful when you use images representing the status of a record. For example, you can represent the status of work orders by icon and let users change it by tapping the icon.

Clickable field

Clickable fields allow you to add a hyperlink of a lookup field to a view. When you tap the field, details of the lookup target record open. This can serve as a kind of a shortcut / quick access; for example to the parent account from an opportunity view.

To enable a clickable field on a view, set the field’s Kind to Text-Click or Image-Click.

Responsive view / list

In order to use larger screens on tablets (or phones with large screens) to their full potential, it is possible to adjust the view design to be more responsive, i.e., to use the screen more effectively.

To learn how it can be achieved, please check the following blog post. Blog

Header

Enable Auto Header in the view properties to create a header row above the data rows. The header row allows simple sorting. This parameter affects your current view, but you can also configure the project-wide setting in Configuration, find Auto List Header under UI > List. To learn more, please check this part of a webinar. Webinar

custom label in view headers

If you need to include a custom label for one of the fields in the header, just like the city in the screen shot, you can use styles:

  1. Edit the view.
  2. Create a new style, for example "graycity", and assign it to the City field.
  3. Create a second style with the same name as above with the suffix "Header", i.e., "graycityHeader".
  4. Enter the custom label as Format string.

Format string for custom view header label

List / view footer

This feature does not require setup in Woodford project. It allows to see some additional information when using multiselect in Resco Mobile CRM app, like number of selected items vs number of all items in the view or setting up the aggregation (e.g. sum of total amount on Opportunity) for selected vs all items in the view.

To learn more, please check this part of a webinar and this part to see it in action. Webinar

Display multiple records in one row

Traditionally, lists show one record per line. However, you can use the Columns property to display multiple records in one row. See the following webinars for more information: webinar 1 and webinar 2. Webinar

Special views

Woodford offers two special views, one for searching, other for filtering. The following applies to special views.

  • To create them, use the Special View button, not New View.
  • Do not rename them; use the default names (SearchView and FilterView).
  • Only one instance of each special view can exist for an entity.

Search view

It is possible to create a specific view used to display search results. The app automatically switches to this view when you are using the search box.

This needs to be a public view named exactly SearchView; it cannot be hidden. You can set up different looks and functionality of this view. To see it in action, please check this WEBINAR SECTION. Webinar

Filter view

Filter view is used when using an inline filter in a lookup form.

Private views

App users can create and manage their own custom views. See Private view for more information.




Was this information helpful? How can we improve?