Difference between revisions of "Style editor"

From Resco's Wiki
Jump to navigation Jump to search
 
(12 intermediate revisions by the same user not shown)
Line 17: Line 17:
  
 
{{Note|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.|Tip}}
 
{{Note|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.|Tip}}
 +
 +
== 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 ==
 
== Views and home screen ==
Line 24: Line 30:
 
When editing a [[home screen]] in Woodford, click '''Design''', then click '''Edit Styles'''. Home screen shares styles with entity views.
 
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):
 
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.
 
* '''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).
+
* '''Name''' – Name of the style.
* '''ForeColor''' – If the icon that you want to use, is colorized, you can change the color of it here.
+
* '''Fore color''' – 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.
+
* '''Back color''' - Color of the field’s background (color of the cell).
* '''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.
+
* '''Align vertically''' – Aligns the image to the top, bottom, or center of the cell.
* {{Anchor|ImageQuery}} '''ImageQuery''' – For entity images, you can define the query for image location.
+
* '''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 [https://www.w3schools.com/css/css3_borders.asp CSS rounded corners])
 +
* {{Anchor|ImageQuery}} '''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, <code>Note.Document</code> or <code>{CurrentEntity}.Entity Image</code>).
 
** As '''Image Data''', select the entity and field that contains your image (often, <code>Note.Document</code> or <code>{CurrentEntity}.Entity Image</code>).
 
** 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 <code>{currentUserId}</code> to refer to the current app user.
 
** 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 <code>{currentUserId}</code> to refer to the current app user.
** As '''Placeholder''', you may add a [[Images#Default_.2F_editable_images_in_views|placeholder image]] (in case the query does not return anything): enter the path and name of a [[Images|project image]] (for example <code>mydirectory.mypic.png</code>).
+
** As '''Placeholder''', you may add a [[Image_examples#Default_.2F_editable_images_in_views|placeholder image]] (in case the query does not return anything): enter the path and name of a [[Images|project image]] (for example <code>mydirectory.mypic.png</code>).
 
:: [[File:Configure image query 2.png]]
 
:: [[File: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.
 
  
 +
=== Text cells ===
 
These are the properties of a text cell (used when the Kind = Text):
 
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.
+
* '''Name''' – Name of the style.
* '''BackColor''' – Color of the field’s background (color of the cell).
+
* '''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).
* '''EllipsisPosition'''
+
* '''Back color''' – Color of the field’s background (color of the cell).
* '''FontName''', '''FontSize''', '''FontWeight''' - Specify the font.
+
* '''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.
* '''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).
+
* '''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.
 +
* '''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.
 
* '''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.
 
* '''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 ==
 
== Forms ==
Line 55: Line 64:
 
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:
+
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):
* '''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.
 
* '''Name''' – Name of the style.
* '''OnChangeTrigger'''
+
* '''Auto height label''' – Makes the field row higher if needed according to the size of the label.
* '''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).
+
* '''Auto width label''' – Automatically sets the label’s width, based on the label’s length.
* '''RelativeLabelFontSize''' – Adjusts the label size according to the default size by the positive or negative number.
+
* '''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.
* '''RelativeTextFontSize''' – Adjusts the field text size according to the default size by the positive or negative number.
+
* '''Relative label font size''' – Adjusts the label 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.
+
* '''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, 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.
 +
* '''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 <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 the 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}}
  
 
== Questionnaire Designer ==
 
== Questionnaire Designer ==
Line 107: Line 120:
 
* Padding: Defines the space to leave around the block content (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
 
* 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.
+
* 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
 
* BorderThickness: The size of the border (left, top, right, bottom) in pixels
 
* BorderColor: The border color #AARRGGBB
 
* BorderColor: The border color #AARRGGBB
Line 132: Line 145:
 
* [[Report_Designer_examples#Custom_fonts|Example that uses a custom barcode font to display product barcode on a report]]
 
* [[Report_Designer_examples#Custom_fonts|Example that uses a custom barcode font to display product barcode on a report]]
 
* [https://blog.resco.net/2018/05/02/tailoring-the-mobile-report-how-to-use-customized-and-barcode-fonts/ Tailoring the mobile report: How to use customized and barcode fonts] {{Badge|Blog}}
 
* [https://blog.resco.net/2018/05/02/tailoring-the-mobile-report-how-to-use-customized-and-barcode-fonts/ Tailoring the mobile report: How to use customized and barcode fonts] {{Badge|Blog}}
 +
 +
== 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.
 +
 +
[[File:76 Radiobutton 1.png|400px]]
 +
 +
However, it is possible to display the option set question as radio button:
 +
 +
[[File:77 Radiobutton 2.png|400px]]
 +
 +
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.
  
 
[[Category:Woodford]]
 
[[Category:Woodford]]

Latest revision as of 11:55, 16 July 2021

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.

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 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).
Configure image query 2.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.
  • 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.
  • 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.

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

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:

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

  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:

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.

76 Radiobutton 1.png

However, it is possible to display the option set question as radio button:

77 Radiobutton 2.png

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:

  1. In the Questionnaire Designer, open a questionnaire template and click Styles to open the style editor.
  2. 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.
  3. Save and close the style editor.
  4. Apply the new style to an option set question (select the question and change Style on the Properties pane).
  5. Save and close the template.

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