Style editor

From Resco's Wiki
Jump to: navigation, search

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

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.

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.

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.
  • BackColor - Color of the field’s background (color of the cell).
  • ForeColor – If the icon that you want to use, is colorized, you can change the color of it here.
  • FormatString – 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.
  • HorizontalAlignment – NEAR aligns the image to the left side of the cell, FAR aligns image to the right side of the cell and CENTER aligns the image to middle of the cell.
  • ImageQuery – For entity 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).
Configure image query 2.png
  • Name – Name of the style.
  • VerticalAlignment – NEAR aligns the image to the upper side of the cell, FAR aligns the image to the bottom of the cell, CENTER aligns the image to the middle of the cell.

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

  • AutoHeight – Adjusts the row’s height to fit the field in case the field element in designer is smaller than the font.
  • BackColor – Color of the field’s background (color of the cell).
  • EllipsisPosition
  • FontName, FontSize, FontWeight - Specify the font.
  • ForeColor – 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).
  • FormatString – 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.
  • HorizontalAlignment – 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.
  • Name – Name of the style.
  • VerticalAlignment – 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.

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:

  • BackgroundColor – Sets the color of the field’s background color.
  • ButtonColor – Color of the field button (for URL, Phone, Barcode… formatting).
  • Columns
  • EditorDisabledColor – Color of the field, when the field/form is disabled for editing.
  • EditorFontName – Font name
  • EditorFontWeight – Weight of the entered value of a field.
  • EditorForegroundColor – Color of the field value.
  • EditorHorizontalAlignment – 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.
  • ErrorColor – Color of the field, when error message is set to the field or when the field is Business Required.
  • ImageAlignment – Sets the alignment of a picture, if used. TextOnly shows the label of the field, ImageOnly shows image without label. Remaining options represent the alignment of the image inside the field.
  • ImageBasePath – Path to the image’s project folder (project image).
  • ImageQuery – Specifies where the image is taken from (entity image). See ImageQuery above.
  • IsMultiLine – FALSE means that the text field will be in a single line format, TRUE means that the field will be in multiline format.
  • LabelAutoHeight – Makes the field row higher if needed according to the size of the label.
  • LabelAutoWidth – Automatically sets the label’s width, based on the label’s length.
  • LabelFontName – Font name
  • LabelFontWeight – Sets the weight of the label.
  • LabelForegroundColor – Color of the label’s text.
  • LabelHorizontalAlignment – PlatformDefault follows the default alignment of the label according to the platform settings (as is on not customized MobileCRM), NEAR aligns the label closer to the field, FAR aligns the label further from the field and CENTER centers the label to the middle of the label cell.
  • LabelPosition – 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, TOP places the label on the top of the field (can be useful when the label is long and RIGHT places the label on the right side of the field.
  • LinkColor – Color of the field’s link items – lookup values, URLs.
  • MinuteIncrement – Sets the minimal minute number used for minute selector.
  • Name – Name of the style.
  • OnChangeTrigger
  • RadioButtonMaxCount – 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).
  • RelativeLabelFontSize – Adjusts the label size according to the default size by the positive or negative number.
  • RelativeTextFontSize – Adjusts the field text size according to the default size by the positive or negative number.
  • WrapText – Wraps the text into more lines if value exceeds the size of the field.

Further information about newer style options can be found in this section of the 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.

You can modify the following properties of question blocks:

  • 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

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:

  • Cell background color
  • Cell border color and width
  • 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).
  • Text alignment (horizontal and vertical)
  • Padding and margins

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.

  1. Using Woodford, edit an app project, then select Offline HTML from the Project menu.
  2. Click New Folder and create the folder Fonts. Open the folder.
  3. 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).
  4. Save changes in the offline HTML.
  5. Use the style editor: Create or change a style to use the new font(s).
  6. 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.

See also: Tailoring the mobile report: How to use customized and barcode fonts Blog