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:

Display "two options" as checkbox on a form showcase 1/2

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

Display "two options" as checkbox on a form showcase 2/2

Note Windows desktop edition of Resco Mobile CRM does not support images in option sets. It will fall back to the text representation of the options.

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.
    Display "two options" as checkbox on a form example: Two images in the checkbox directory
  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.
    Display "two options" as checkbox on a form: New checkbox style
  7. Add the parameter "Do not allow E-mails" to your form and on the Properties pane, set Style to "Checkbox".
    Display "two options" as checkbox on a form: Set style to checkbox

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

Display "two options" as checkbox on a view example: Options list
  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.
    Display "two options" as checkbox on a view example: Two images in the checkbox directory
  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.
    Display "two options" as checkbox on a view example: New view style
  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.
    Display "two options" as checkbox on a view example: Editing the view

Result:

Display "two options" as checkbox on a view example: Final result

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.
    Placeholder Image: Configure image query
  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.

Since release 16.1, Resco mobile apps use a third-party library by Painterro for editing images. Woodford administrators can switch to the legacy editor in the project configuration: Use Legacy Image Editor.

Automatic image processing

In some scenarios, you need to ingest many images from various sources, and you would like to perform some image normalization automatically, for example, decreasing image dimensions or cropping images to a certain aspect ratio. This option is available for images added as form tabs (double-click Media on the Tabs pane) 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. Select a form and click Edit.
  3. From the Tabs pane, drag Media to to your form, then click OK.
    Automatic image processing: Configure media tab
  4. Click On Load and specify the rule that should be performed.
    Automatic image processing: On Load rule
  5. 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.
  6. 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.

Rating

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.
    Rating: Enable rating entity in woodford
  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.
    Rating: adding images
  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.
    Rating: Create a new styl
  5. Add the rating field to the form and assign it the right style.
    Rating: Add field to form and apply style
  6. Save and publish the project. When you synchronize, you can now rate your accounts.
    Rating: Result rating in the app

Image/media in questionnaires FAQ

What is the difference between the Width/Height parameters and the Max Width/Max Height parameters? 
Width and Height parameters are only for the preview of an image on a form.
Max Width and Max Height are for resizing images.
How do Max Width, Max Height, and Max Size parameters interact?
Max Width and Height apply to images, Max Size to other media.
Do Max Width and Max Height resize the images automatically? 
If an image is larger than Max Width or Max Height, it is resized to fit the restrictions while respecting the aspect ratio. 
What about Max Size? 
It blocks the upload of non-picture attachments larger than the specified size.
Why are the Max Width / Max Height / Max Size parameters only available if you allow more than one image to be taken? What if we want to take only one image but still want to impose those limits? 
At this point, only the picture gallery (i.e., multiple images) enforces these settings. If you need a different behavior implemented, leave a detailed feature request for our developers using the Support Portal.
Are the image sizes the result of the camera settings in mobile devices? Or can we somehow configure this in our questionnaires or resco.Inspections? 
Yes, the picture size is the result of camera settings. But you can manage it with the project configuration. This applies to the "Capture photo" option in the app. If you select "Choose photo", you pick it from a gallery and the resolution is from the camera.