Form: Difference between revisions

Jump to navigation Jump to search

Form (view source)

Revision as of 15:58, 21 March 2023

374 bytes added ,  21 March 2023
major reorg
(major reorg)
Line 158: Line 158:
See '''[[Style editor#Forms|Style editor]]''' for more information.
See '''[[Style editor#Forms|Style editor]]''' for more information.


== Add fields ==
== Form tabs ==
 
Form tabs are the main building blocks of forms. The detail tab is primarily used for record fields. Other tab types have a different purpose, for example, a map tab can display the record location on a map. Drag tabs from the '''Tabs''' pane to the '''Designer''' pane to add them to your form.
 
[[File:Add form tabs to form.png|600px]]
 
=== Detail tab ===
 
From the '''Tabs''' pane, drag the '''Detail''' tab to the '''Designer''' pane. On the '''Properties''' pane, you might wish to update its name (default = "General") and icon.
 
The names of tabs, but also other form components, can only include some characters. Certain special characters are not allowed, for example, <code>/\&*<>?:.;</code>. As a workaround, use [[Localization#Tip:_use_localization_to_display_restricted_characters|localization]] to change the labels of these UI elements. See [[Localization_examples#Rename_form_tabs|Localization examples]] for inspiration.
 
==== Add fields ====


You have multiple options for adding fields to the form:
You have multiple options for adding fields to the form:
Line 165: Line 177:
* Click '''Add Spacer''' in the '''Fields & Components''' pane to add a horizontal dividing line or separator. Use dividing lines to organize fields into logical blocks. You can add text labels to your separators; select the separator and edit '''Binding''' on the '''Properties''' pane. This text can even [[Localization_examples#Separators|be localized]].
* Click '''Add Spacer''' in the '''Fields & Components''' pane to add a horizontal dividing line or separator. Use dividing lines to organize fields into logical blocks. You can add text labels to your separators; select the separator and edit '''Binding''' on the '''Properties''' pane. This text can even [[Localization_examples#Separators|be localized]].


=== Inline field actions ===
==== Inline field actions ====


Depending on the [[App_projects#formatting|Formatting]] of the field configured in entity properties, the appearance of the field on the form can change. For example, if you set '''Formatting''' to "PhoneNumber", the form displays a phone icon next to phone number field that allows users to quickly initiate a call.
Depending on the [[App_projects#formatting|Formatting]] of the field configured in entity properties, the appearance of the field on the form can change. For example, if you set '''Formatting''' to "PhoneNumber", the form displays a phone icon next to phone number field that allows users to quickly initiate a call.
Line 175: Line 187:
A similar feature is available on [[View#Buttons|views]].
A similar feature is available on [[View#Buttons|views]].


=== Lookup item properties ===
==== Lookup item properties ====


When you select a field that serves as a lookup to another entity, you can click '''Properties''' (or double-click the field) to access the '''Lookup Item Properties''' window.
When you select a field that serves as a lookup to another entity, you can click '''Properties''' (or double-click the field) to access the '''Lookup Item Properties''' window.
Line 187: Line 199:
See [[Advanced filtering]] for a more detailed explanation about your options for filtering the records in the lookup.
See [[Advanced filtering]] for a more detailed explanation about your options for filtering the records in the lookup.


== Add tabs ==
==== Table ====
{{Anchor|Add_Grid}}
Click to add a table to your form. Tables allow you to display fields in multiple columns. See [[Form#Displaying_multiple_fields_per_row|displaying multiple fields in a single row]].


From the '''Tabs''' pane, drag the '''Detail''' tab to the '''Designer''' pane. On the '''Properties''' pane, you might wish to update its name (default = "General") and icon.
==== Button ====
{{Anchor|Button}}
 
Drag to create a new button to an existing tab.
* Modify the '''Button Text''' property to change the button text.
* Optionally, set up also the '''Label''' property. Usually, extra labels are unnecessary for buttons, and they are hidden by default styles (the style called "Button"; Label position = Hidden).
 
You have two options for setting up the button action:
* Use the '''Command''' property to select a [[Form#Add_commands|form command]] from a list, or enter a command name directly.
* Alternatively, use [[Rules_editor#Cell_Click.2C_Button_Click_variables|'''Button Click''']] to set up custom action associated with the button. The following example shows or hides the map tab of your form:
 
{| class="wikitable"
| '''If''' '''Condition''' || ChangedItem || Equals || Button_show_hide_map
|-
| '''Then''' || '''If''' '''Condition''' || Tabs.Map.IsVisible || Equals || True
|-
|            || '''Then''' '''Step''' || Tabs.Map.IsVisible || Assign || False
|-
|            || '''Else''' '''Step''' || Tabs.Map.IsVisible || Assign || True
|}
 
See also the [https://www.youtube.com/watch?v=h3Mh_pR0uVw&list=PLPMCnAPD5b57hivwGbC2iiI0F22DAU9wb&index=7 feature introduction]. {{Badge|Webinar}}
 
==== Image ====
 
Click to include an [[images|image]] to one of the tabs of your form.
 
==== Spacer ====
 
 
 
=== Iframe ===
 
Inline frames allow you to add HTML content to your form. They can display online or offline content or execute [[Resco JavaScript Bridge|JavaScript]] code with [[business logic]]. From the '''Tabs''' pane, drag the '''Iframe''' tab to the '''Designer''' pane.
* Enter a '''Name''' of the iframe.
* Enter a '''URL'''. You can use the properties of your entity record in the URL, for example, <code>https://www.google.com/search?q={name}</code>.
* Check '''Authenticate''' if you want to use the credentials of the current mobile CRM user to authenticate on the website. This works for Active Directory CRM authentication only.
* Check '''Delay Load''' to load the website (or offline HTML) when users open the tab. When disabled, the website (or offline HTML) loads as soon as the form opens.
* Clear '''Visible''' to make the tab invisible (useful for scripts).
 
The buttons Browse and Manage are used for offline HTML. Click '''Manage''' to upload files, then click '''Browse''' to select one of the uploaded files that will be used as the URL. See [[Offline HTML]] for more information.
 
See this [https://www.resco.net/blog/online-iframes/ blog post] for instructions how to add a LinkedIn search to your contacts. {{Badge|Blog}}
 
=== Rich text ===
# From the '''Tabs''' pane, drag the '''Rich Text''' tab to the '''Designer''' pane.
# Enter a name (label) of the tab and select a field that you want to edit in an embedded rich-text editor.<br>When you first add a rich-text tab to your app project, Woodford prepares the offline HTML files necessary for the editor; this might take several seconds.
# In the app, you can edit the text and apply formatting, such as bold or bulleted lists. The result is saved to the selected entity field in HTML format.
 
{{Note|In order for the RTF editor to work correctly, the field you wish to use with the editor must be also present on the form. It does not have to be visible (you can hide it using rules). However, the field has to be enabled (it can't be set as disabled) in order for your user to be able to utilize the possibilities of RTF editor.}}
 
=== Map ===
 
From the '''Tabs''' pane, drag the '''Map''' tab to the '''Designer''' pane. Select the entity parameters for GPS coordinates, then click '''OK'''. This will add a map tab to your form.
 
{{Note|Displaying records on the map usually requires GPS coordinates: latitude and longitude. However, if you only want to display a single location, you can use the street address. The following address fields are used to search for the location:  address1_line1, address1_line2, address1_line3, address1_city, address1_country.
 
In this case, you can leave the latitude and longitude fields blank. This might result in a warning when publishing the project; you can ignore this warning.}}
 
==== Prerequisites for the map, GPS, and [[geocoding]], as well as Update GPS option on custom entity’s form ====
 
You need to go through couple necessary steps to be able to see the Update GPS and Update Address command button and use them to assign the current GPS-enabled device’s GPS coordinates (and address based on the GPS position) to entity fields:
 
* The entity must have a floating point number fields with names ending with „latitude“ and „longitude“, for example, ''GPS_coordinates_latitude'' and ''GPS_coordinates_longitude''; or, as in case of accounts, contacts, and leads, ''Address1: Latitude'' and ''Address1: Longitude''.
* Precision needs to be set to 5 decimal numbers, the maximum value to 180.00000, the minimum value to -180.00000 for the longitude, and maximum value to 90.00000, minimum value to -90.00000 for latitude.
 
You need to have a detail tab named exactly “Address” on the edit form. It is possible to change this name to any other by using [[Localization]].
 
If you want to show more than one location for a single entity record (e.g., invoice address and shipping address), you can add map to the form multiple times, each time with different GPS fields.
 
=== Hub ===
 
Click to include a [[hub]] as a tab to your form. Only hubs that include your form's entity can be selected.
 
=== Process flow ===
 
Click to add a process to your form. Processes guide users through a series of steps. See [[Process]] for more information.
 
=== Timeline ===
 
Click to add a timeline to your form. Timelines display related records from multiple entities in chronological order. See [[Timeline]] for more information.
 
=== Chatter (Salesforce only) ===
 
Click to add a chatter tab to the entity form. Chatter is a real-time collaboration platform. See [[Chatter]] for more information.
 
=== Tree view ===
 
Click to add a tree view to your form. Tree views display records from multiple entities in a tree-like fashion. See [[Tree view]] for more information.
 
=== Chat ===
 
If you want to be able to use [[chat]] to comment on records, place the Chat Wall as a tab on the form.
 
=== Media ===
 
From the '''Tabs''' pane, drag the '''Media''' tab to the '''Designer''' pane to link Notes attachments from the form. By default, the media tab is set for capturing signatures, but you can set it up for other actions, like capture photo, record video, and more.
 
* As '''Name''', enter the label of the tab.
* As '''Required for Status''', you can select a status. The action in the media tab must be performed before you can change the status and save the record. For example, capturing a signature might be necessary to allow the status ''signed''.
* As '''Entity''' select an entity that can hold binary files, for example annotation/note or sf_contentversion.
* As '''Title''' enter the subject/title of the record where the file is attached. When the app is trying to display the content of a media tab, the title is used to find the image.
* As '''Action''', select the actions for the media tab: Clear, Capture Signature, Capture Photo, Select Photo, Select File, Record Audio, Record Video, Load File From, View, Open External, Copy, Paste, Print, Email, Resize Image, Edit Image.
 
{{Note|
Media added to the form from the '''Tabs''' pane are treated as a standalone form tab; if you want to add images to an existing tab with other fields, use '''Image''' from the '''Fields & Components''' pane instead.
 
You can add as many media tabs as you like, each with different options. You can have a dedicated signature tab, a dedicated photo/picture tab, a record tab, etc.|Tips}}
 
To allow further validation/logic of the Media tab, you can use [[form rules]] with powerful options available for the Media tab items.
* To see it in action, you can watch this [https://youtu.be/VZQMwM0b-N8?t=27m34s part] of one of our webinars. {{Badge|Webinar}}
* Newer example that allows automatic cropping and resizing of images can be found [[Image_examples#Automatic_image_processing|here]].
* The full list of variables that you can control on a media tab using rules is listed [[Rules_editor#Form_tab_variables|here]].
 
=== Tagged image ===


The names of tabs, but also other form components, can only include some characters. Certain special characters are not allowed, for example, <code>/\&*<>?:.;</code>. As a workaround, use [[Localization#Tip:_use_localization_to_display_restricted_characters|localization]] to change the labels of these UI elements. See [[Localization_examples#Rename_form_tabs|Localization examples]] for inspiration.
You can display related records as tags on the image. See [[Tagged image]] for more information.


== Add lists ==
== Add lists ==
Line 275: Line 403:
| Initial Control || Select which view should be used initially: calendar, chart, list (default), or map.
| Initial Control || Select which view should be used initially: calendar, chart, list (default), or map.
|}
|}
== Add HTML frames ==
Inline frames allow you to add HTML content to your form. They can display online or offline content or execute [[Resco JavaScript Bridge|JavaScript]] code with [[business logic]]. From the '''Tabs''' pane, drag the '''Iframe''' tab to the '''Designer''' pane.
* Enter a '''Name''' of the iframe.
* Enter a '''URL'''. You can use the properties of your entity record in the URL, for example, <code>https://www.google.com/search?q={name}</code>.
* Check '''Authenticate''' if you want to use the credentials of the current mobile CRM user to authenticate on the website. This works for Active Directory CRM authentication only.
* Check '''Delay Load''' to load the website (or offline HTML) when users open the tab. When disabled, the website (or offline HTML) loads as soon as the form opens.
* Clear '''Visible''' to make the tab invisible (useful for scripts).
The buttons Browse and Manage are used for offline HTML. Click '''Manage''' to upload files, then click '''Browse''' to select one of the uploaded files that will be used as the URL. See [[Offline HTML]] for more information.
See this [https://www.resco.net/blog/online-iframes/ blog post] for instructions how to add a LinkedIn search to your contacts. {{Badge|Blog}}
== Add rich text ==
# From the '''Tabs''' pane, drag the '''Rich Text''' tab to the '''Designer''' pane.
# Enter a name (label) of the tab and select a field that you want to edit in an embedded rich-text editor.<br>When you first add a rich-text tab to your app project, Woodford prepares the offline HTML files necessary for the editor; this might take several seconds.
# In the app, you can edit the text and apply formatting, such as bold or bulleted lists. The result is saved to the selected entity field in HTML format.
{{Note|In order for the RTF editor to work correctly, the field you wish to use with the editor must be also present on the form. It does not have to be visible (you can hide it using rules). However, the field has to be enabled (it can't be set as disabled) in order for your user to be able to utilize the possibilities of RTF editor.}}
== Add map ==
From the '''Tabs''' pane, drag the '''Map''' tab to the '''Designer''' pane. Select the entity parameters for GPS coordinates, then click '''OK'''. This will add a map tab to your form.
{{Note|Displaying records on the map usually requires GPS coordinates: latitude and longitude. However, if you only want to display a single location, you can use the street address. The following address fields are used to search for the location:  address1_line1, address1_line2, address1_line3, address1_city, address1_country.
In this case, you can leave the latitude and longitude fields blank. This might result in a warning when publishing the project; you can ignore this warning.}}
=== Prerequisites for the map, GPS, and [[geocoding]], as well as Update GPS option on custom entity’s form ===
You need to go through couple necessary steps to be able to see the Update GPS and Update Address command button and use them to assign the current GPS-enabled device’s GPS coordinates (and address based on the GPS position) to entity fields:
* The entity must have a floating point number fields with names ending with „latitude“ and „longitude“, for example, ''GPS_coordinates_latitude'' and ''GPS_coordinates_longitude''; or, as in case of accounts, contacts, and leads, ''Address1: Latitude'' and ''Address1: Longitude''.
* Precision needs to be set to 5 decimal numbers, the maximum value to 180.00000, the minimum value to -180.00000 for the longitude, and maximum value to 90.00000, minimum value to -90.00000 for latitude.
You need to have a detail tab named exactly “Address” on the edit form. It is possible to change this name to any other by using [[Localization]].
If you want to show more than one location for a single entity record (e.g., invoice address and shipping address), you can add map to the form multiple times, each time with different GPS fields.
== Add media ==
From the '''Tabs''' pane, drag the '''Media''' tab to the '''Designer''' pane to link Notes attachments from the form. By default, the media tab is set for capturing signatures, but you can set it up for other actions, like capture photo, record video, and more.
* As '''Name''', enter the label of the tab.
* As '''Required for Status''', you can select a status. The action in the media tab must be performed before you can change the status and save the record. For example, capturing a signature might be necessary to allow the status ''signed''.
* As '''Entity''' select an entity that can hold binary files, for example annotation/note or sf_contentversion.
* As '''Title''' enter the subject/title of the record where the file is attached. When the app is trying to display the content of a media tab, the title is used to find the image.
* As '''Action''', select the actions for the media tab: Clear, Capture Signature, Capture Photo, Select Photo, Select File, Record Audio, Record Video, Load File From, View, Open External, Copy, Paste, Print, Email, Resize Image, Edit Image.
{{Note|
Media added to the form from the '''Tabs''' pane are treated as a standalone form tab; if you want to add images to an existing tab with other fields, use '''Image''' from the '''Fields & Components''' pane instead.
You can add as many media tabs as you like, each with different options. You can have a dedicated signature tab, a dedicated photo/picture tab, a record tab, etc.|Tips}}
To allow further validation/logic of the Media tab, you can use [[form rules]] with powerful options available for the Media tab items.
* To see it in action, you can watch this [https://youtu.be/VZQMwM0b-N8?t=27m34s part] of one of our webinars. {{Badge|Webinar}}
* Newer example that allows automatic cropping and resizing of images can be found [[Image_examples#Automatic_image_processing|here]].
* The full list of variables that you can control on a media tab using rules is listed [[Rules_editor#Form_tab_variables|here]].


== Add commands ==
== Add commands ==
Line 340: Line 409:


Woodford designers can configure which predefined commands should be available and when, and even define custom buttons. Click '''Commands''' to open the command configuration window. See [[Form commands]] for additional information.
Woodford designers can configure which predefined commands should be available and when, and even define custom buttons. Click '''Commands''' to open the command configuration window. See [[Form commands]] for additional information.
== Additional form components ==
{{Anchor|Button}}
; Button: Drag to create a new button to an existing tab.
:* Modify the '''Button Text''' property to change the button text.
:* Optionally, set up also the '''Label''' property. Usually, extra labels are unnecessary for buttons, and they are hidden by default styles (the style called "Button"; Label position = Hidden).
:* You have two options for setting up the button action:
::* Use the '''Command''' property to select a [[Form#Add_commands|form command]] from a list, or enter a command name directly.
::* Alternatively, use [[Rules_editor#Cell_Click.2C_Button_Click_variables|'''Button Click''']] to set up custom action associated with the button. The following example shows or hides the map tab of your form:
:::{| class="wikitable"
| '''If''' '''Condition''' || ChangedItem || Equals || Button_show_hide_map
|-
| '''Then''' || '''If''' '''Condition''' || Tabs.Map.IsVisible || Equals || True
|-
|            || '''Then''' '''Step''' || Tabs.Map.IsVisible || Assign || False
|-
|            || '''Else''' '''Step''' || Tabs.Map.IsVisible || Assign || True
|}
: See also the [https://www.youtube.com/watch?v=h3Mh_pR0uVw&list=PLPMCnAPD5b57hivwGbC2iiI0F22DAU9wb&index=7 feature introduction]. {{Badge|Webinar}}
{{Anchor|Add_Grid}}
; Table: Click to add a table to your form. Tables allow you to display fields in multiple columns. See [[Form#Displaying_multiple_fields_per_row|displaying multiple fields in a single row]].
; Image: Click to include an [[images|image]] to one of the tabs of your form.
; Chat: If you want to be able to use [[chat]] to comment on records, place the Chat Wall as a tab on the form.
; Hub: Click to include a [[hub]] as a tab to your form. Only hubs that include your form's entity can be selected.
; Process Flow: Click to add a process to your form. Processes guide users through a series of steps. See [[Process]] for more information.
; Timeline: Click to add a timeline to your form. Timelines display related records from multiple entities in chronological order. See [[Timeline]] for more information.
; Chatter (Salesforce only): Click to add a chatter tab to the entity form. Chatter is a real-time collaboration platform. See [[Chatter]] for more information.
; Tree View: Click to add a tree view to your form. Tree views display records from multiple entities in a tree-like fashion. See [[Tree view]] for more information.
; Tagged Image: Click to add a tagged image tab. You can display related records as tags on the image. See [[Tagged image]] for more information.


== Form rules ==
== Form rules ==
Retrieved from "https://docs.resco.net/wiki/Special:MobileDiff/8782"

Navigation menu