10,853
edits
Salesforce admins: Urgent action required!
Style editor: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
|||
| Line 26: | Line 26: | ||
In Woodford, the style editor also includes a revert button next to a style property. It allows you to undo customization in the child style, reverting to the parent value. For top-level styles, you can revert to the built-in defaults. | In Woodford, the style editor also includes a revert button next to a style property. It allows you to undo customization in the child style, reverting to the parent value. For top-level styles, you can revert to the built-in defaults. | ||
[[File:Revert-to-parent-style-button.png]] | [[File:Revert-to-parent-style-button.png|alt=style editor: revert to parent style]] | ||
== Views and home screen == | == Views and home screen == | ||
| Line 49: | Line 49: | ||
** As '''Conditions''', add how to locate the correct image. The left side shows the fields on the entity selected as Image Data, on the right side you can either write a constant value, use a field of the current entity (in curly brackets), or use <code>{currentUserId}</code> to refer to the current app user. | ** As '''Conditions''', add how to locate the correct image. The left side shows the fields on the entity selected as Image Data, on the right side you can either write a constant value, use a field of the current entity (in curly brackets), or use <code>{currentUserId}</code> to refer to the current app user. | ||
** As '''Placeholder image''', you may add a [[Image_examples#Default_.2F_editable_images_in_views|placeholder image]] (in case the query does not return anything): enter the path and name of a [[Images|project image]] (for example <code>mydirectory.mypic.png</code>). | ** As '''Placeholder image''', you may add a [[Image_examples#Default_.2F_editable_images_in_views|placeholder image]] (in case the query does not return anything): enter the path and name of a [[Images|project image]] (for example <code>mydirectory.mypic.png</code>). | ||
:: [[File:Configure image query 2.png]] | :: [[File:Configure image query 2.png|alt=configure image query]] | ||
* '''Icon color''' – If the icon you want to use is colorized, you can change the color of it here. | * '''Icon color''' – If the icon you want to use is colorized, you can change the color of it here. | ||
| Line 74: | Line 74: | ||
* <code>*Selected</code>: On a view, style with the name suffix "Selected" is used for the selected record in the list. For example, if a field on the view uses "primary" style, it switches to "primarySelected" when the record is selected. As you can see in the screenshot below, the selected style can also apply to the [[home screen]]. | * <code>*Selected</code>: On a view, style with the name suffix "Selected" is used for the selected record in the list. For example, if a field on the view uses "primary" style, it switches to "primarySelected" when the record is selected. As you can see in the screenshot below, the selected style can also apply to the [[home screen]]. | ||
[[File:Define additional styles with special name suffix.png|600px]] | [[File:Define additional styles with special name suffix.png|600px|alt=Define additional styles with special name suffix (grid, selected)]] | ||
[[File:Styles in action.png|600px]] | [[File:Styles in action.png|600px|alt=Styles with special name suffix in use in the app]] | ||
== Forms == | == Forms == | ||
| Line 86: | Line 86: | ||
Forms can display various field types, such as text fields, radio buttons, date pickers, etc. Originally, form styles were generic, i.e., a single generic style covered all field types. Since [[Releases/Summer_2023|release 16.1]], you can define separate styles for each field type. Generic styles continue to be supported. | Forms can display various field types, such as text fields, radio buttons, date pickers, etc. Originally, form styles were generic, i.e., a single generic style covered all field types. Since [[Releases/Summer_2023|release 16.1]], you can define separate styles for each field type. Generic styles continue to be supported. | ||
[[File:Create-a-new-style.png|300px]] | [[File:Create-a-new-style.png|300px|alt=create a new form style]] | ||
Styles are defined for the entire form cell - that includes the field label, field value (input), and supporting text. | Styles are defined for the entire form cell - that includes the field label, field value (input), and supporting text. | ||
[[File:Different-parts-of-the-form.png]] | [[File:Different-parts-of-the-form.png|alt=form styles: field label, input value, supporting text]] | ||
To keep the style editor organized, you can find settings for each of these in a separate tab. | To keep the style editor organized, you can find settings for each of these in a separate tab. | ||
[[File:Generic-form-style-label-tab.png|600px]] | [[File:Generic-form-style-label-tab.png|600px|alt=form styles - tabbed user interface]] | ||
Some parameters are defined at the top level: | Some parameters are defined at the top level: | ||
| Line 167: | Line 167: | ||
== Questionnaire Designer == | == Questionnaire Designer == | ||
[[File:Styles in the questionnaire designer.png|thumb|right]] | [[File:Styles in the questionnaire designer.png|thumb|right|alt=styles in questionnaire designer]] | ||
While editing a questionnaire template in [[Questionnaire Designer]], click '''Styles''' to modify or create styles that apply to question blocks (combination of question, answer, and description). | While editing a questionnaire template in [[Questionnaire Designer]], click '''Styles''' to modify or create styles that apply to question blocks (combination of question, answer, and description). | ||
[[File:Question-style-label-value-desc.png]] | [[File:Question-style-label-value-desc.png|alt=apply styles to question (label), value (answer), and descriptive text]] | ||
Each questionnaire template has its own set of styles. | Each questionnaire template has its own set of styles. | ||
| Line 232: | Line 232: | ||
This is the out-of-the-box visualization of the standard option set question in the Windows 10 (Store) app. | This is the out-of-the-box visualization of the standard option set question in the Windows 10 (Store) app. | ||
[[File:76 Radiobutton 1.png|400px]] | [[File:76 Radiobutton 1.png|400px|alt=standard option set visualization as drop down]] | ||
However, it is possible to display the option set question as radio button: | However, it is possible to display the option set question as radio button: | ||
[[File:77 Radiobutton 2.png|400px]] | [[File:77 Radiobutton 2.png|400px|alt=alternative option visualization as radio button]] | ||
Here are the detailed steps that work for the Questionnaire Designer, but a similar procedure can be also done in Woodford for option set fields on forms: | Here are the detailed steps that work for the Questionnaire Designer, but a similar procedure can be also done in Woodford for option set fields on forms: | ||
| Line 251: | Line 251: | ||
When you sync the mobile app, the option set question should appear as a radio button. | When you sync the mobile app, the option set question should appear as a radio button. | ||
{{Feedback}} | |||
[[Category:Woodford]] | [[Category:Woodford]] | ||