Style editor

Several Resco applications include a functionality that allows you to update existing styles or create completely new styles.

Woodford: styles for form, view, and home screen cells
Questionnaire Designer: styles for question blocks (combination of question and answer)
Report Designer: styles for cells

The user interface is divided into several panes:

Left pane shows the list of existing styles.
Right pane shows the parameters of the style selected in the left pane.
In some applications, Style editor also includes a central pane that shows a mockup of the style you are designing.

Toolbar functions:

Add or Clone – Select an existing style and click to create a copy of the style.
Delete – Deletes selected style.
Dependencies – In Woodford, styles are defined on project scope. Use the button to see in which views or forms the selected style is used.
Replace Style – In Woodford, you can replace all occurrences of a style with a different style.
Save & Close – Save your changes and close the style editor. To close without saving, close the window using the button in the top right corner, then select Discard.

Tip	Style editor serves only to design styles. Don't forget to apply the new styles to your cells. This is usually done on the properties pane. Close the style editor, select the cell or question, and change the Style property to your new style.

Style hierarchy

The styles are organized in a hierarchy. The best practice when defining new styles is to select a style closest to the one you want to use and click Add. This creates a child style that uses the properties of its parent until you change them.

When you modify a property in the parent style, and the child style does not have its own definition of the property, parent change is used. However, when you modify a property in the child style, the link to the parent is broken for that property. Any further changes for the property in the parent no longer apply to the child.

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.

Views and home screen

When editing views (lists) in Woodford, click Edit Styles on the toolbar to configure styles for image cells and text cells used in views. On project scope, the styles are shared; i.e., all entity views in a particular project share the same list of styles. It does not matter from which view you open the style editor. Click Dependencies to see all components where a style is used.

When editing a home screen in Woodford, click Design, then click Edit Styles. Home screen shares styles with entity views.

Image cells

These are the properties of an image cell (used when the Kind = Image):

Name – Name of the style.
Vertical alignment – Aligns the image to the top, bottom, or center of the cell.
Horizontal alignment – Aligns the image to the left side, right side, or the center of the cell.
Format string – If you use a non-string field as a source for the image (e.g., a lookup field), the string should look like folder_name{0}.png. {0} represents the target name (name of the lookup record, according to which the image is used.
Border radius – configure corner radius (just like CSS rounded corners)
Image fit – configure how the image should fit into its container (just like CSS object-fit)
Image query – For dynamic images, you can define the query for image location.
- As Image Data, select the entity and field that contains your image (often, Note.Document or {CurrentEntity}.Entity Image).
- 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 {currentUserId} to refer to the current app user.
- As Placeholder image, you may add a placeholder image (in case the query does not return anything): enter the path and name of a project image (for example mydirectory.mypic.png).

Icon color – If the icon you want to use is colorized, you can change the color of it here.
Background color - Color of the field’s background (color of the cell).

Text cells

These are the properties of a text cell (used when the Kind = Text):

Name – Name of the style.
Vertical alignment – Align the text to the top side of the cell, the bottom side, or the middle of the cell.
Horizontal alignment – Aligns the text to the left side of the cell, the right side, or 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.

You can learn more about FormatString in Microsoft documentation. See also Formatting strings in rules for inspiration.

Font size, Decoration, Font name - 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.
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.
Text 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).
Background color – Color of the field’s background (color of the cell).

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.

*Grid: On a view, style with the name suffix "Grid" is used when you enable a single-row layout (Auto Grid). For example, if a field on the view uses "primary" style normally, it switches to "primaryGrid" in single-row layout.
*Selected: 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.

Forms

When editing forms in Woodford, click Edit Styles on the toolbar to configure styles for form cells.

Dependencies

On the project scope, form styles are shared. This means that 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.

To ensure that your changes don't have unintended consequences, click Dependencies to see all components where a style is used.
Click Replace Style if you need to replace one style with another in all places where it is used.

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 release 16.1, you can define separate styles for each field type. Generic styles continue to be supported.

Styles are defined for the entire form cell - that includes the field label, field value (input), and supporting text.

To keep the style editor organized, you can find settings for each of these in a separate tab.

Some parameters are defined at the 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.

Label tab

Show label – Show or hide label.
Font name – Select the font.
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 – This option allows wrapping long labels into multiple rows, assuring visibility of the whole label. (Not available for Label position = "BorderTop".)

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.

"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. Multi-line labels are not available with this option.

Define width for label and input

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.

Input tab

Font name – Select the font.
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.
Alignment – Align value text left, center, or right.
Decoration – Apply text decoration to the label (bold, italics, strikethrough, underline).
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.
Link text – Color when the input a link (lookup, URL).
Background – Color of the input field’s background.
Selected background - Color of the background when selected.
Selected text – Color when the input is enabled.
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. For icons, you can also specify the folder where the icons are located and icon alignment.

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.

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).

Each questionnaire template has its own set of styles.

On the Form Styles tab, you can modify properties of question blocks within the questionnaire, such as:

Height and background color of the cell
Font, color, alignment, and position for the question (label)
Font, colors, and alignment for the answer (value)
Font, color, alignment, and position for the description (supporting text)
Custom colors for links, buttons, errors, or separator
Image path and alignment
Miscellaneous settings:

Radio Button 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).
Minute Increment – Prevent users from selecting unrounded times. Sometimes, you don't want to allow users to select any time in minute selector. For example, you might want your appointments starting at hh:00, hh:15, hh:30, and hh:45. In such scenarios, enter "15" as the minute increment.
Wrap Text – Wraps the text into more lines if the value exceeds the size of the field.
Auto Correct – Determines whether autocorrection is enabled or disabled during typing. Autocorrection tracks unknown words and suggests a replacement.

On the Report Styles tab, you can modify similar properties for mobile reports.

You can also use custom fonts.

Report Designer

While editing a report template in Report Designer, click Edit Styles to customize cell styles. Unlike styles in Woodford where the styles are shared across an entire app project, styles in the Report Designer are unique per report.

For each cell style, you can define:

Margin: Defines the space to leave around the block content outside the border (left, top, right, bottom) in pixels
Padding: Defines the space to leave around the block content (left, top, right, bottom) in pixels
Vertical alignment: Aligns the content to the top, bottom, or center of the available space
Horizontal alignment: Aligns the content to the left, right, or center of the available space, or justifies it in the cell.
BorderThickness: The size of the border (left, top, right, bottom) in pixels
BorderColor: The border color #AARRGGBB
Background: Cell background color #AARRGGBB
Font color, name, size, and weight
- Built-in fonts are: LiberationSans-Bold, LiberationSans-BoldItalic, LiberationSans-Italic, LiberationSans-Regular, LiberationSerif-Bold, LiberationSerif-BoldItalic, LiberationSerif-Italic, LiberationSerif-Regular.
- You can use Offline HTML to add new fonts (must be TrueType - TTF). You can add the font to any folder, such as Fonts. When specifying Font name in the style editor, use the exact name including path and file suffix, without the backslash at the beginning of the path, for example Fonts\myCustomFont.ttf.
- Check out also an example that uses a custom barcode font to display product barcode on a report.

Custom fonts

You can use Offline HTML to add custom fonts to your project. You can then modify styles to use the new fonts in your app.

Using Woodford, edit an app project, then select Offline HTML from the Project menu.
Click New Folder and create the folder Fonts. Open the folder.
Click Upload and upload the fonts that you want to use in the app to the new folder. You can use only one font from a font family at the same time (so you are not able to use BOLD or ITALIC fonts of the same font).
Save changes in the offline HTML.
Use the style editor: Create or change a style to use the new font(s).
- In Woodford, enter only the font name or select it from a list.
- In Report Designer, enter the full path and font name, including the file extension.
Assign the style to a cell displayed in the app.

Warning

Check the font license before use. Make sure you’re not violating the publisher’s copyright by using the font file in your solution.

Tip: Display option set as a radio button

This is the out-of-the-box visualization of the standard option set question in the Windows 10 (Store) app.

However, it is possible to display the option set question 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:

In the Questionnaire Designer, open a questionnaire template and click Styles to open the style editor.
Select a style called Normal and click Clone to create its copy and change the following properties:
- Style > Name: type in the name of the new style (e.g. Radiobutton)
- Value > Alignment: Center
- Other > Radio Button Count: Enter a number higher than the number of options within your option set question.
Save and close the style editor.
Apply the new style to an option set question (select the question and change Style on the Properties pane).
Save and close the template.

When you sync the mobile app, the option set question should appear as a radio button.

Style editor

Contents

Style hierarchy