Style editor: Difference between revisions

Jump to navigation Jump to search
no edit summary
No edit summary
Line 52: Line 52:


* '''Name''' – Name of the style.
* '''Name''' – Name of the style.
* '''Fore color''' – Color of the foreground element – in this case it's the text (#AARRGGBB – AA = alpha/transparency, RR = red channel, GG = green channel, BB = blue channel).
* '''Fore color''' – Color of the foreground element – in this case, it's the text (#AARRGGBB – AA = alpha/transparency, RR = red channel, GG = green channel, BB = blue channel).
* '''Back color''' – Color of the field’s background (color of the cell).
* '''Back color''' – Color of the field’s background (color of the cell).
* '''Align horizontally''' – NEAR aligns the text to the left side of the cell, FAR aligns text to the right side of the cell and CENTER aligns the text to middle of the cell.
* '''Align horizontally''' – NEAR aligns the text to the left side of the cell, FAR aligns text to the right side of the cell and CENTER aligns the text to middle of the cell.
* '''Align vertically''' – NEAR aligns the text to the upper side of the cell, FAR aligns the text to the bottom of the cell, CENTER aligns the text to the middle of the cell.
* '''Align vertically''' – NEAR aligns the text to the upper side of the cell, FAR aligns the text to the bottom of the cell, CENTER aligns the text to the middle of the cell.
* '''Format string''' – You can format the way the field data is represented, e.g. you can enter a format string in the way “Personal: {0}” where Personal: is a static text, and the field data is entered where the element {0} is.
* '''Format string''' – You can format the way the field data is represented, e.g., you can enter a format string in the way “Personal: {0}” where Personal: is a static text, and the field data is entered where the element {0} is.
:: You can learn more about FormatString in [https://docs.microsoft.com/en-us/dotnet/api/system.string.format?view=net-6.0 Microsoft documentation]. See also [[Formatting strings in rules]] for inspiration.
:: You can learn more about FormatString in [https://docs.microsoft.com/en-us/dotnet/api/system.string.format?view=net-6.0 Microsoft documentation]. See also [[Formatting strings in rules]] for inspiration.
* '''Font name''', '''Font size''', '''Font weight''' - Specify the font.
* '''Font name''', '''Font size''', '''Font weight''' - Specify the font.
* '''Auto height''' – Adjusts the row’s height to fit the field in case the field element in designer is smaller than the font.
* '''Auto height''' – Adjusts the row’s height to fit the field in case the field element in designer is smaller than the font.
* '''Ellipsis position''' – When a text string does not fit on the screen, it displays an ellipsis (...) indicating that the text is longer than what can be displayed. Configure the position of this ellipsis in the text.
* '''Ellipsis position''' – When a text string does not fit on the screen, it displays an ellipsis (...), indicating that the text is longer than what can be displayed. Configure the position of this ellipsis in the text.
 
=== Tricks ===
 
The style '''Name''' can be more important than one would expect. Particular substrings within the style name can impact how a style is used.
* <code>*Grid</code>: On a view, style with the name suffix "Grid" is used when you enable a single-row layout ([[View#Properties_pane|Auto Grid]]). For example, if a field on the view uses "primary" style normally, it switches to "primaryGrid" in single-row layout.
* <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:Styles in action.png|600px]]


== Forms ==
== Forms ==
Line 101: Line 111:


Further information about newer style options can be found in this [https://youtu.be/ws1RbswYfFQ?t=17m31s section] of our webinar. {{Badge|Webinar}}
Further information about newer style options can be found in this [https://youtu.be/ws1RbswYfFQ?t=17m31s section] of our webinar. {{Badge|Webinar}}
=== Tricks ===
The style name can be more important than one would expect. Particular substrings within the style name can impact how a style is used.
* <code>*Grid</code>: On a view, style with the name suffix "Grid" is used when you enable single-row layout ([[View#Properties_pane|Auto Grid]]). For example, if a field on the view uses "primary" style normally, it switches to "primaryGrid" in single-row layout.
* <code>*Selected</code>: On a view, style with the name suffix "Selected" is used for 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, selected style can also apply to the [[home screen]].
[[File:Define additional styles with special name suffix.png|600px]]
[[File:Styles in action.png|600px]]


== Questionnaire Designer ==
== Questionnaire Designer ==

Navigation menu