Image examples

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:

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

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

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.
   
4. Edit the view of the Account entity.
5. Click Edit Styles and add a new image cell style, for example, "check".
6. As Format string, enter the directory, placeholder for image name, and the file extension, then click Save & Close.
   
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.
   

Result:

Note

If you are using this feature in conjunction with view headers, the header for this column will show the Format string value (e.g. "Checkbox.Do Not Allow E-Mails.png") rather than "Do Not Allow E-Mails". This is because Resco Mobile CRM reuses the same style ("check") also for the column header of the field. To avoid this problem, create a new text style with the suffix "Header", i.e., "checkHeader".

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.
   
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.
   
4. Click On Load and specify the rule that should be performed.
   
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.
   
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.
   
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.
   
5. Add the rating field to the form and assign it the right style.
   
6. Save and publish the project. When you synchronize, you can now rate your accounts.
   

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.

GPS information in image metadata

Images that you capture using Resco Mobile CRM can include GPS information in its metadata.

• Enable location services on your device.
• Grant Resco Mobile CRM the permission to use location information "always".
• In Resco Mobile CRM, take the photo using the Capture Picture action (DocAction.CapturePhoto).
• Thanks to privacy enhancements, recent iOS devices strip location information from pictures when passed to third-party apps like Resco. Enable Supply GPS for Captured Images in Woodford configuration if you want the Resco app to reintroduce the stripped location information to captured images. (This setting does not apply to images from different sources, e.g., selected from a gallery.)