Images

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

To improve how the Resco Mobile CRM app aligns with your company colors and graphics, or simply to spice up the app a little bit, you can change the images and icons in the app. You can also add new images for custom items, such as map pins, entity icons, form tabs icons, command icons, etc.

Edit an app project and select Images from the Project menu of Woodford to get started.

Working with images

The Images pane shows an alphabetical listing of images available in the app. Multiple variants of each image is often necessary, with different DPI and platform-specific settings.

  • Directories: Images are organized into directories. Select the directory that you want to display. You can also create new directories - click Add Directory.
  • Search bar, along with correct directory selection, allows you to quickly locate the correct image.
  • Common Images: This check box controls whether images that are not platform-specific should be displayed.
  • Platform-specific check boxes: Select which platforms are interesting for you and work with the relevant images only.

Changing a standard image

To replace a standard/default image with a custom image:

  1. Locate the existing icon in the list and double-click it.
  2. In the Edit Image window, click on the no-image icon and upload a custom icon from your computer.
  3. Click Delete if you want to return to the default icon.
  4. Click Save.

Adding a custom image

If you want to add a picture to the custom item, you can use the default directories or you can create your own directory for storing custom images.

  1. Click Add Directory if you want to create a new one. Select the parent directory and enter a name, then click Create.
  2. Click Add from the toolbar.
    • Select the directory, enter a name, choose a platform and DPI.
    • Click on the no-image icon and upload a custom image from your computer.
  3. Click Add. This creates the new image record in the list.
  4. Adding different versions of the image is easier: Click the placeholder image and upload the correct image.
  5. When you have uploaded all the necessary versions, click Save.

Colorize

If you want to use your picture in the same way as default pictures are used (i.e. picture follows color selected in the theme or view style) you need to enable the Colorize option. It will create a mask from the picture that you add. The picture needs to have an alpha channel. Everything where alpha is different from 0, will be used as a mask and it will follow the color set in theme or view style.

Bulk changes

Bulk import is done by importing a specifically named zip file that contains the images in a specific folder structure – the best way to explore the folder structure is to download the icon package from our WEBSITE. Once you have the file, you need to remove the directories and files that you don’t want to change. This way you won’t need to worry about getting the names of the folders or the structure of the folders wrong.

Please note, that different devices have different screen capabilities, and therefore there are different directories for them (like the Platform option in Images section in Woodford, when adding a new image).

  • MonoDroid – Android devices
  • MonoTouch – iOS (iPhone, iPad)
  • Windows – Windows tablets

Example: We want to place the image into the home section of the app – first, we need to place the image file into the subdirectory Home of the MobileCrm.zip file. The names and sizes of the actual pictures have to follow existing ones as they differ per platform. In this example case, we will add a picture for the iOS.

If users use newer and older iPad/iPhone devices, they need two sizes of the image – this is because the older apple devices have screens with a smaller resolution. Android devices are also divided by LDPI, MDPI, HDPI, XHDPI according to the resolution of the app (you can regulate this in the Android app’s setup).

That’s why we will need a small and a large image version that has a suffix @2x (e.g. account@2x.png). Please check the dimensions of existing images for the reference. Also, the Tabs directory can be interesting for us, if we want to change the images of the associated views. The name prefix of the image for the entity (on Home screen) should be the logic name of the entity. It can be checked in Woodford.

For example, if we want to add only one image to the home screen for our custom entity with name cust1 and overwrite the default image for invoices, we have to create a zip file with the following structure:

MobileCrm\Images.MonoTouch\Home\cust1.png
MobileCrm\Images.MonoTouch\Home\cust1@2x.png
MobileCrm\Images.MonoTouch\Home\invoice.png
MobileCrm\Images.MonoTouch\Home\invoice@2x.png

To import the file, go to your app project, select Images from the Project menu, click Import and upload the zip file.

After the import is done, we can verify the added images by searching for them in the list (use the filters Directory and Folder to get a quicker access to the images) or it can be verified by exporting the Images.zip, or by exporting the Mobile Project, adding an extension .zip to it and inspecting it. Images.zip file should be in the root.

Note The zip should only contain images you want to replace or add, so if you use the sample zip, you need to remove all the default images, otherwise they will be used twice in the project, and the project will increase in the size, resulting to possible problems in synchronization, and increasing the time of synchronization.

Add images to views and forms

When designing a custom view or form, you can display images related to your record.

  • To learn more about what List and Form images represent in Dynamics, please check this blog post. Blog
  • See also an example of Woodford setup for List and Form images in this blog post. Blog

Use Note attachment as image

You add pictures that were originally saved as Note attachments to the view and/or to an edit form. This way you can for example show the photo of your contact or a picture of your product in the app's forms and views.

To display pictures on a view, you need to do following:

  1. Edit an app project and select the entity from the Project menu.
  2. Click Show UI to display the lists of views, forms, and charts.
  3. Double-click the view to open it for editing.
  4. Click Add Image and select ListNoteImage. This will add a picture item to the view designer.
  5. Adjust the size of other fields of your view to prevent overlap.

By default, the Note where the view picture should be attached must have a subject name set to be exactly “ListImage”. This can be changed using styles.

  1. Click Edit Styles and select ListNoteImage.
  2. To change the Subject name of the Note, click on the ImageQuery field.
  3. By changing the Subject field you set the name of the Note, from where the picture will be taken.
  4. You can also create more ListNoteImage styles in order to use different notes for different views.
  5. Click Save & Close to close the styles editor.

If you use multiple ListNoteImage styles, you should make sure to set the correct style in the properties of the image item back in the view designer window.

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 image instead, so that there is not an empty slot in the view.

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 that 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