Image examples

From Resco's Wiki
Jump to navigation Jump to search
Branding and customization

This article describes several useful examples of using the Images section of Woodford.

Display "two options" as checkbox on a form

When you add a parameter of the type "two options" to a Form (for example, Yes/No or On/Off), by default, it is displayed in the app as a switch:

Two options on a form.png

You can add custom project images and a new style to your project to display it as a checkbox instead:

Two options on a form-checkbox.png

Here's how:

  1. Select Design > Images from the Project menu.
  2. Add a new directory, for example "Checkbox".
  3. Add two images to the directory, with the names 0 and 1, then click Save.
    Two images in the checkbox directory.png
  4. Edit the form of an entity that has a suitable parameter of the type "two options", for example the Account entity.
  5. Click Edit Styles and add a new style.
  6. As ImageBasePath enter the directory to your checkbox images, then click Save & Close.
    New checkbox style.png
  7. Add the parameter "Do not allow E-mails" to your form and on the Properties pane, set Style to "Checkbox".
    Set style to checkbox.png

Display "two options" as checkbox on a questionnaire

The procedure for forms also applies to questionnaires.

  1. Start by uploading images as described in the previous section, steps 1 to 3. If you already have the images, you don't need to repeat the steps.
  2. Start the Questionnaire Designer, edit a questionnaire and click Styles to display the questionnaire styles.
  3. Define a new style with the image base path equal to the directory of your checkbox images, as described in the previous section.
  4. Return to the template and apply the new style to your questions.

Display "two options" as checkbox on a view

A similar function is also available on a view. This time, however, the images have to be called exactly as the options. For example, in the case of "Do not allow E-mails", the options are "Allow" and "Do Not Allow".

Options list.png
  1. Select Design > Images from the Project menu.
  2. Add a new directory, for example "Checkbox".
  3. Add two images to the directory, with the names "Allow" and "Do Not Allow", then click Save.
    Two images.png
  4. Edit the view of the Account entity.
  5. Click Edit Styles and add a new image cell style, for example, "check".
  6. As FormatString, enter the directory, placeholder for image name, and the file extension, then click Save & Close.
    New view style.png
  7. Add the parameter "Do not allow E-mails" to your view and on the Properties pane, set Style to "check" and Kind to Image-DirectEdit.
    Editing the view.png


View checkbox in the app.png

Default / editable images in views

If you use images in views, and there are some records that do not have any image in their Note, you can display a default (placeholder) image instead, so that there is not an empty slot in the view. The placeholder is configured in image styles.

  1. Edit a view.
  2. Click Edit Styles to open the Style editor.
  3. Select an image style and click the ImageQuery parameter.
    Configure image query.png
  4. In the Placeholder Image field, enter the file name of the file, including folder, separated by dots.
  5. Click OK to close the image query. Save and close the style editor. Save the view.
  6. Select Images from the Project menu.
  7. Click Add Directory to create the folder myfolder from the example above.
  8. Add the file mypic.png into the folder.
  9. Click Save.
  10. Publish the project and verify the behavior in the app.

Also, it is possible to set editable images in views. It does not mean that you can edit the image, but you can edit the field, that is represented by it. For example, an option set may be displayed as image, rather than its value as text. And similarly to editable fields, you can change the value with the images.

To find out how to set up these two features, please check this webinar section. Webinar

Crop or edit images in forms

In some scenarios, you need to select only a portion of the image, highlight a part of the image, or add some text. You don't have to use an external image editor, you can do this directly in the app.

In Woodford, when you select an image field on a form tab, the Properties pane lists a number of actions, such as Resize Image or Clear (see full list).

The actions that you enable can then be used in the app, for example:

  • when you click the image placeholder to add an image
  • when you click an image on the form
  • when you view an image, from the hamburger menu
  • when you select the Edit image option, you can crop the image, rotate it, add lines and text.

Automatic image processing

In some scenarios, you need to ingest large number images from various sources, and you would like to perform some image normalization automatically, for example, decrease image dimensions or crop image to a certain aspect ratio. This option is available for images added using the Add Media button or using the photo or plus button on a related list. In the following example, we add a new media tab and write an On Load rule that performs the normalization.

  1. Edit an app project, then select an entity from the Project menu, for example, Contact.
  2. Click Add Media to add a new tab to your form, then click OK.
    Configure media tab.png
  3. Click On Load and specify the rule that should be performed.
    On Load rule.png
  4. Select one of the enforcement modes: No Enforcement means that images are not modified; options starting with Auto perform the action autonomously; Crop in Image Editor launches an in-app editor that allows the user to crop the image manually.
  5. Click Save & Close to return to the form designer, then save the form and publish the project.
Tip You can configure this rule for the form of the Note (Annotation) entity. This form includes a hidden media tab called Attachment; i.e., the rule will point to Tabs.Attachment.EnforcementMode.


Out of the box, Resco mobile apps don't include any specific field type that would allow specifying a star rating, for example, 0 to 5 stars. The following workaround is compatible with all platforms except Windows 7.

  1. On your backend server, add a new "option set" field to an entity (for example, account). Add 6 values (representing 0 to 5 stars).
  2. In Woodford, edit an app project and enable this new field for offline use.
    Enable rating in woodford.png
  3. Go to Images, create a new directory (for example, "Rating"), and upload 6 new images. The names must be equal to the logical values of the option set: 10000-10005.
    Adding images.png
  4. Edit the form for the entity (in our example, account) and click Edit Styles. Create a new style. Enter the image directory as ImageBasePath.
    Create a new style.png
  5. Add the rating field to the form and assign it the right style.
    Add field to form and apply style.png
  6. Save and publish the project. When you synchronize, you can now rate your accounts.
    Result rating in the app.png