View: Difference between revisions

Jump to navigation Jump to search

View (view source)

Revision as of 13:16, 20 May 2024

923 bytes removed ,  20 May 2024
→‎View designer
Line 61: Line 61:


The view designer window is divided into multiple parts:
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.
* '''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.
* '''Properties''' pane on the left shows the properties of the selected component in the '''Editor''' 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.
* '''Editor''' pane in the center shows your row design(s).
* '''Fields''' pane on the right shows fields that you can add to the view.
* '''Fields''' pane on the right shows fields you can add to the view.


[[File:View-designer-main-screen.png|600px|alt=View designer in Woodford: main screen]]
[[File:View-designer-main-screen.png|600px|alt=View designer in Woodford: main screen]]
Line 70: Line 70:
=== Fields pane ===
=== Fields pane ===


Click '''Select Fields''' to display a list of fields defined for this entity.
The '''Fields''' pane lists all the fields and variables available in the view.
* These fields are available for the mobile device, not only for being displayed in the view, but also for sorting and search.
* Use the + button to manage the fields. When displaying the view, Resco mobile apps fetch all the listed fields from the database. Keeping the list short can speed up the performance.
* 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.
* Drag fields from the Fields pane to the Editor pane to add them to your row design.
* If you need additional fields, you must enable them on your entity; see [[Data_model_in_mobile_apps#Managing_fields|Managing fields]] for more information.
* Not all fields must be displayed - the additional fields can be used for sorting and filtering.


=== Designer pane ===
[[File:Select-fields-in-view.png|600px|alt=select fields in view]]


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):
If a field is not listed in the Select Fields window, it is probably not enabled for the app project. See [[Data_model_in_mobile_apps#Managing_fields|Managing fields]] for more information.
* 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.
=== Editor pane ===
 
The editor pane displays a mockup of the view's row design(s). Each view can contain one or more row designs. See [[Responsive view design]] to learn how multiple rows can be beneficial for your app.
 
Use the editor pane to arrange and resize fields in the view.
* Select any component of the view to display its properties. 
* Drag fields from the Fields pane to add them to your view.
* To change the content of a cell, select it and change the Value property. (Or double-click the plus symbol next to a field on the Fields pane.)


=== Properties pane ===
=== Properties pane ===
The following properties can be configured on '''View''' level:
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 [[Style_editor#Tricks|Tricks]].
* Auto Header: When enabled, it creates a header row above the data rows. See [[View#Header|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.
* Default layout: Use list to display one record per line. Use grid to allow multiple records per line. This can be particularly useful for wider displays and/or if you want to create your view as a gallery of images.
* Name – Defines the Row’s name (to distinguish between multiple Row designs).
 
* Width – Defines the width of the row in a view.
* Auto table: Enable this option if you want to switch to an Excel-like table view. Table view is used when the available screen width exceeds a threshold value ('''Breakpoint'''). You '''can''' modify the style of the entries; see [[Style_editor#Tricks|Tricks]].
* 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.
* {{Anchor|Next}} 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 [https://blog.resco.net/2017/10/11/utilize-next-wide-option-on-list-views-to-efficiently-display-information-across-various-screen-sizes/ this blog]. {{Badge|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.
* Show header: When enabled, it creates a header row above the data rows. See [[View#Header|Header]] for more information.


* 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.
The following properties can be configured on '''Row''' level. Select the row in the '''Editor''' pane to display its properties.
* Name – Defines the Row’s name (to distinguish between multiple Row designs).
* Dimension – Defines the width and height of the row in a view.
* Color (Background) – Defines the color of the row’s background.
* Color (Selected) – Defines the color of the row’s background when the record is selected.
* {{Anchor|Next}} Next row – used for custom responsive layout. Define multiple rows of various widths and chain them with this setting. In the app, row design changes  as the screen width changes. See [[Responsive view design]] for more information.


The following properties can be configured on '''Cell''' level. Select the cell in the '''Editor''' pane to display its properties.
* Cell – Shows the selected cell.
* Kind – Set how the selected element is displayed in the view.
* Kind – Set how the selected element is displayed in the view.
** Text: Show text as is.
** Text: Show text as is.
Line 108: Line 113:
** Text-Edit, Text-DirectEdit, Image-Edit, Image-DirectEdit: The element becomes editable directly from the view. See [[#Editable_field|Editable field]].
** Text-Edit, Text-DirectEdit, Image-Edit, Image-DirectEdit: The element becomes editable directly from the view. See [[#Editable_field|Editable field]].
** Text-Click, Image-Click: Clicking the element opens details about related entity record. See [[#Clickable_field|Clickable field]].
** Text-Click, Image-Click: Clicking the element opens details about related entity record. See [[#Clickable_field|Clickable field]].
* Binding (Type, Value) – See the next section for more information.
* Layout (X, Y, W, H) – Coordinates of the top left corner of the cell, and cell's width and height. You can adjust cell size and position either by typing the coordinates or by dragging the cell or its sides in the editor.


* 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 '''[[Style editor|Edit Styles]]''' button in the toolbar.
* 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 '''[[Style editor|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.
* Responsive – Specify if the cell should grow/shrink to fit row width change or remain constant. In the case of images, disable responsive resizing. See [[Responsive_view_design#Responsive_fields|responsive fields]] for details.


==== Binding ====
==== Binding ====
Line 118: Line 127:


Three binding types exist:
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.
* 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
* 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 values 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.
* 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.
 
[[File:Anchor.png|600px|alt=Sample anchor in views]]
 
For more information about anchors, see [https://blog.resco.net/2018/10/17/advanced-tip-managing-cell-anchors-in-views/ Advanced tip: Managing cell anchors in views]. {{Badge|Blog}}


== General controls, adding new cells ==
== General controls, adding new cells ==
Retrieved from "https://docs.resco.net/wiki/Special:MobileDiff/11011"

Navigation menu