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.
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 permanently broken for that property. Any further changes for the property in the parent no longer apply to the child.

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

Folder – Name of the Folder under the platform folder of the Image.zip where the icons for the field values that you want to represent as pictures are stored.
Name – Name of the style.
Fore color – If the icon that you want to use, is colorized, you can change the color of it here.
Back color - Color of the field’s background (color of the cell).
Align vertically – Aligns the image to the top, bottom, or center of the cell.
Align horizontally – 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, 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).

Text cells

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

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

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

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

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

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.
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.
Relative text font size – Adjusts the field text size according to the default size by the positive or negative number.
Label position – "PlatformDefault" 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.

"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.
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.
Image query – Specifies where the image is taken from (entity image). See ImageQuery above.
Label font weight – Sets the font weight of the label.
Editor font weight – Sets the font weight of the entered value of a field.
Label font name – Font name
Editor font name – Font name
Editor corner radius – Use rounded corners for the editor field?
Editor border width – Enter width in pixels if you want a border around your editor.
Editor border color – Enter color for the border around your editor.
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.
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 300;* to make the label 300px wide and use the rest of the available space for the value, or use 2*;3* to use 40% of the width for label and 60% for the value.

Further information about newer style options can be found in this section of our webinar. Webinar

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 and answer). Styles are defined separately for each questionnaire template.

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

Height and background color of the cell
Font, color, and alignment for the question (label)
Font, color, and alignment for the answer (value)
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 – Sets the minimal minute number used for the minute selector.
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).
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.