Style editor: Difference between revisions

Jump to navigation Jump to search

Style editor (view source)

Revision as of 14:02, 5 September 2023

493 bytes added ,  5 September 2023
→‎Forms
Line 78: Line 78:
When editing forms in Woodford, click '''Edit Styles''' on the toolbar to configure styles for form cells. On project scope, the styles are shared; i.e., all entity forms in a particular project share the same list of styles. It does not matter from which form you open the style editor. Click '''Dependencies''' to see all components where a style is used.
When editing forms in Woodford, click '''Edit Styles''' on the toolbar to configure styles for form cells. On project scope, the styles are shared; i.e., all entity forms in a particular project share the same list of styles. It does not matter from which form you open the style editor. Click '''Dependencies''' to see all components where a style is used.


The following style properties can be set for a form cell (a form cell contains the label and editor, i.e., the part where you enter text):
=== Generic vs. component-specific styles ===
 
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]]
 
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]]
 
To keep the style editor organized, you can find settings for each of these in a separate tab. Some parameters are defined at top level:
 
* '''Component type''': Displays the component type, such as SegmentedButton or TextField. This parameter is set during style creation and cannot be modified.
* '''Name''' – Name of the style.
* '''Name''' – Name of the style.
* '''Auto height label''' – Makes the field row higher if needed according to the size of the label.
 
* '''Auto width label''' – Automatically sets the label’s width, based on the label’s length.
=== Label tab ===
* '''Multi line''' – FALSE means that the text field will be in a single line format, TRUE means that the field will be in multiline format.
 
* '''Relative label font size''' – Adjusts the label size according to the default size by the positive or negative number.
* '''Show label''' – Show or hide label.
* '''Relative text font size''' – Adjusts the field text size according to the default size by the positive or negative number.
* '''Font name'''  – Select the font.
* '''Label position''' – "PlatformDefault" follows the default placement of the label according to the platform settings (as is on not customized MobileCRM)
* '''Relative size''' – Adjusts the label size compared to the default size. Use a positive number to increase size or a negative number to decrease size.
* '''Alignment''' – Align label text left, center, or right.
* '''Decoration''' – Apply text decoration to the label (bold, italics, strikethrough, underline).
* '''Text color''' – Color of the label text.
* '''Auto height''' – Makes the field row higher if necessary for the label.
 
;Container layout
* '''Label position''' – "Auto" follows the default placement of the label according to the platform settings (as is on not customized MobileCRM)
:: "Left" places the label on the left side of the field; "Right" places the label on the right side of the field.
:: "Left" places the label on the left side of the field; "Right" places the label on the right side of the field.
:: "Top" places the label on the top of the field (can be useful when the label is long).
:: "Top" places the label on the top of the field (can be useful when the label is long).
:: "BorderTop" places the label into the top border of the field.
:: "BorderTop" places the label into the top border of the field.
:: "Hidden" hides the label.
 
* '''Label horizontal alignment''' – PlatformDefault follows the default alignment of the label according to the platform settings (as is on not customized MobileCRM), FAR aligns the label closer to the field, NEAR aligns the label further from the field and CENTER centers the label to the middle of the label cell.
;Define width for label and input
* '''Editor horizontal alignment''' – Sets the field value’s alignment. NEAR aligns the value closer to the field’s label, FAR aligns the value further from the label and CENTER centers the value to the middle of the value cell.
* If you use label position "Left" or "Right", you can configure the proportion of the screen that should be used for label and value. Either use one of the predefined splits or enter a custom one.
* '''Image query''' – Specifies where the image is taken from (entity image). See [[ImageQuery]] above.
 
* '''Label font weight''' – Sets the font weight of the label.
=== Input tab ===
* '''Editor font weight''' – Sets the font weight of the entered value of a field.
 
* '''Label font name''' – Font name
* '''Font name'''  – Select the font.
* '''Editor font name''' – Font name
* '''Relative size''' – Adjusts the input size compared to the default size. Use a positive number to increase size or a negative number to decrease size.
* '''Editor corner radius''' – Use rounded corners for the editor field?
* '''Alignment''' – Align value text left, center, or right.
* '''Editor border width''' – Enter width in pixels if you want a border around your editor.
* '''Decoration''' – Apply text decoration to the label (bold, italics, strikethrough, underline).
* '''Editor border color''' – Enter color for the border around your editor.
* '''Text input height''' – Force text to a single line, allow text to wrap, or display a larger multi-line input.
* '''Border width''' – Enter width in pixels if you want a border around your input.
* '''Radius''' – Use rounded corners for the borders? Set an appropriate corner radius in pixels.
 
; Color styles
* '''Enabled text''' – Color when the input is enabled.
* '''Disabled text''' – Color when the input is disabled.
* '''Background''' – Color of the input field’s background.
* '''Border''' – Color of the input field’s border.
* '''Icon button''' – Color of inline buttons (for URL, Phone, Barcode… formatting).
* '''On Change rules trigger''' – Select when the [[On Change]] rules are executed for this field: Whenever you modify the value in the field, or only when the field loses focus.
 
=== Component-specific tab ===
 
;Segmented buttons
 
* '''Max items count''' – Enter the maximum number of options displayed as a segmented button. Option sets with more options are displayed as a dropdown.
 
; Dropdown & segmented buttons (applicable for Option set & Two options)
* '''Show''' text, icon, or both.
 
; Date & time picker intervals
* '''Minutes''' – Enter how granular time selection you want. For example, use "30" if you only want to allow half hours (x:30) and full hours (x:00).
 
; Image query
* '''Condition''' – Specifies where the image is taken from (entity image). See [[ImageQuery]] above.
 
; Container style
* '''Background color''' – Select the background color of the item.
* '''Error color''' – Color of the field in case of an error or when the field is Business-Required.
 
=== Supporting text tab ===
 
* '''Show''' – Show or hide the supporting text.
* '''Font name''' – Select the font.
* '''Relative size''' – Adjusts the supporting text size compared to the default size. Use a positive number to increase size or a negative number to decrease size.
* '''Alignment''' – Align supporting text left, center, or right.
* '''Position''' – Align supporting text up or down.
 
<!--
 
 
* '''Image base path''' – Path to the image’s project folder (project image).
* '''Image base path''' – Path to the image’s project folder (project image).
* '''Image alignment''' – Sets the alignment of a picture, if used. TextOnly shows the label of the field, ImageOnly shows the image without a label. The remaining options represent the alignment of the image inside the field.
* '''Image alignment''' – Sets the alignment of a picture, if used. TextOnly shows the label of the field, ImageOnly shows the image without a label. The remaining options represent the alignment of the image inside the field.
* '''Radio button max count''' – Number of options in an option set, for which the radio buttons are enabled. Option set with more options will be displayed as a standard option set (drop down).
-->
* '''Wrap text''' – Wraps the text into more lines if the value exceeds the size of the field.
* '''Minute increment''' – Sets the minimal minute number used for the minute selector.
* '''Label foreground color''' – Color of the label’s text.
* '''Editor foreground color''' – Color of the field value.
* '''Editor background color''' – Color of the editor's background.
* '''Error color''' – Color of the field, when an error message is set to the field or when the field is Business Required.
* '''Editor disabled color''' – Color of the field, when the field/form is disabled for editing.
* '''Link color''' – Color of the field’s link items – lookup values, URLs.
* '''Button color''' – Color of the field button (for URL, Phone, Barcode… formatting).
* '''Background color''' – Sets the color of the field’s background color.
* '''On change trigger''' – Select when should the On Change rules be executed for this field: Whenever you modify the value in the field, or only when the field loses focus.
* '''Columns''' – Configure how wide should the label and the editor be: enter two values separated by a semicolon. For example, use <code>300;*</code> to make the label 300px wide and use the rest of the available space for the value, or use <code>2*;3*</code> to use 40% of the width for label and 60% for the value.
 
Further information about newer style options can be found in this [https://youtu.be/ws1RbswYfFQ?t=17m31s section] of our webinar. {{Badge|Webinar}}


== Questionnaire Designer ==
== Questionnaire Designer ==
Retrieved from "https://docs.resco.net/wiki/Special:MobileDiff/9700"

Navigation menu