Difference between revisions of "Images"

From Resco's Wiki
Jump to navigation Jump to search
m (fix blog link)
 
(40 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{Branding TOC}}
 
{{Branding TOC}}
 
[[Resco Mobile CRM]] offers several ways how to work with images. Broadly speaking, there are two large groups of images:
 
[[Resco Mobile CRM]] offers several ways how to work with images. Broadly speaking, there are two large groups of images:
* '''Entity images''' are related to a particular record in your database, such as the photos of your contacts, signatures on an order, or photos of broken machinery collected during an inspection.
+
* '''Dynamic images''' are related to a particular record in your database, such as the photos of your contacts, signatures on an order, or photos of broken machinery collected during an inspection.
 
* '''Project images''' are related to your [[app projects|app project]]. They include icons and other static images used in your app.
 
* '''Project images''' are related to your [[app projects|app project]]. They include icons and other static images used in your app.
  
Entity images can be stored in two locations:
+
Dynamic images can be stored in two locations:
* On your backend server, in special entities designed to hold binary documents, for example, Annotation / Note.
+
* On your backend server, in special entities designed to hold binary documents, for example, annotation/note on Dynamics/Resco Cloud, or sf_contentversion or sf_attachment on Salesforce.
 
* On external document storage, such as SharePoint. Use external document storage for images related to your organization entities and records, if you don’t want to use server database for these, for example, for cost reasons (storing documents in external document servers is cheaper than storing them directly in the CRM server), or you already have existing external storage that you don’t want to migrate. See [[Documents]] for more information.
 
* On external document storage, such as SharePoint. Use external document storage for images related to your organization entities and records, if you don’t want to use server database for these, for example, for cost reasons (storing documents in external document servers is cheaper than storing them directly in the CRM server), or you already have existing external storage that you don’t want to migrate. See [[Documents]] for more information.
  
Line 16: Line 16:
 
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.
 
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 projects|app project]] and select '''Images''' from the '''Project''' menu of [[Woodford]] to get started.
+
Edit an [[app projects|app project]] and select '''Images''' from the '''Project''' menu of [[Woodford]] to get started.  See [[Image examples]] for a more detailed description of a few frequent use cases.
 +
 
 +
=== Form and home icons ===
 +
 
 +
The modern and recommended way of changing home screen icons and form tab icons is to use the icon gallery, available directly in these UI components.
 +
* [[Home_screen#Change_icons|Home screen icons]]
 +
* [[Form#Form_tab_icons|Form tab icons]]
 +
 
 +
The older, traditional way of working with images is described below.
  
 
=== Working with images ===
 
=== Working with images ===
Line 26: Line 34:
 
* Common Images: This check box controls whether images that are not platform-specific should be displayed.
 
* 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.
 
* Platform-specific check boxes: Select which platforms are interesting for you and work with the relevant images only.
 +
 +
While you can upload different image sizes for different platforms, we recommend using only the common images and XHDPI resolution (@2x); Woodford will automatically resize images as appropriate for the device.
 +
 +
[[File:Images.png|600px]]
  
 
=== Changing a standard image ===
 
=== Changing a standard image ===
Line 49: Line 61:
  
 
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.
 
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.
 +
 +
To use transparency and colorization, use 32-bit PNG files with transparency.
  
 
=== Bulk changes ===
 
=== 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 [https://www.resco.net/downloads/icons.zip 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.
+
Bulk import is done by importing a specifically named zip file that contains the images in a specific folder structure. To ensure that you have the folders right, you can start with the existing icons:
 +
* either download a [https://www.resco.net/downloads/MobileCRM.zip zip file with the default icons] from Resco web
 +
* or export all custom icons from a Woodford project: Edit an app project, select '''Design > Images''' from the '''Project''' menu and click '''Export'''.
 +
: Tip: Export the icons from an inspections project, it contains many custom icons.
 +
 
 +
Once you have the file, extract it and 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).
+
Different devices have different screen capabilities, and therefore there are different directories for them.
 
* MonoDroid – Android devices
 
* MonoDroid – Android devices
 
* MonoTouch – iOS (iPhone, iPad)
 
* MonoTouch – iOS (iPhone, iPad)
 
* Windows – Windows tablets
 
* 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.
+
You can also use images in different resolutions. The standard resolution (used mostly in older devices) is 72 pixels per inch (PPI). These days, our projects use double of the standard resolution; this is indicated by the suffix @2x in the file name. It is generally sufficient to add only one image resolution when importing new icons, Woodford will generate all the necessary sizes automatically.
  
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).
+
If you are familiar with the Adobe XD design tool, you can use it for managing images; see [[Adobe XD plug-in]] for more information.
  
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.
+
==== Example ====
  
 
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:
 
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:
  
 
<pre>
 
<pre>
MobileCrm\Images.MonoTouch\Home\cust1.png
 
 
MobileCrm\Images.MonoTouch\Home\cust1@2x.png
 
MobileCrm\Images.MonoTouch\Home\cust1@2x.png
MobileCrm\Images.MonoTouch\Home\invoice.png
 
 
MobileCrm\Images.MonoTouch\Home\invoice@2x.png
 
MobileCrm\Images.MonoTouch\Home\invoice@2x.png
 
</pre>
 
</pre>
  
To import the file, go to your [[app projects|app project]], select '''Images''' from the '''Project''' menu, click '''Import''' and upload the zip file.
+
To import the file, go to your [[app projects|app project]], select '''Design > Images''' from the '''Project''' menu, click '''Import''' and upload the zip file. Don't forget to '''Save''' all changes.
 +
 
 +
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 app 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.}}
 +
 
 +
=== Default image size ===
  
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.
+
Each part of the user interface has its own directory for icons. Each directory has a recommended size:
  
{{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.}}
+
{| class="wikitable sortable"
 +
! Directory || Size in pixels for mockups (72 PPI) || Size in pixels for final export (@2x)
 +
|-
 +
| Home          || 40x40 || 80x80
 +
|-
 +
| Tabs          || 28x28 || 56x56
 +
|-
 +
| Activity      || 32x32 || 64x64
 +
|-
 +
| CallDirection || 32x32 || 64x64
 +
|-
 +
| DetailView    || 24x24 || 48x48
 +
|-
 +
| Email        || 20x20 || 40x40
 +
|-
 +
| Search        || 16x16 || 32x32
 +
|-
 +
| Buttons      || 32x32 || 64x64
 +
|-
 +
| Controls      || 32x32 || 64x64
 +
|-
 +
| Cmd          || 28x28 || 56x56
 +
|}
  
== Entity images ==
+
== Dynamic images ==
  
When designing a custom [[view]] or [[form]], you can display images related to your record.
+
When designing a custom [[view]] or [[form]], you can display images related to your record. See [[Image examples]] for a more detailed description of a few frequent use cases.
  
* To learn more about what view and form images represent in Dynamics, please check this [http://blog.resco.net/2014/06/23/data-images-simply-explained/ blog post]. {{Badge|Blog}}
+
* To learn more about what view and form images represent in Dynamics, please check this [https://www.resco.net/blog/data-images-simply-explained/ blog post]. {{Badge|Blog}}
* See also an example of Woodford setup for view and form images in this [http://blog.resco.net/2014/06/23/data-images-setup/ blog post]. {{Badge|Blog}}
+
* See also an example of Woodford setup for view and form images in this [https://www.resco.net/blog/data-images-setup/ blog post]. {{Badge|Blog}}
  
 
=== Use Note attachment as image in views ===
 
=== Use Note attachment as image in views ===
Line 91: Line 136:
 
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.
 
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:
+
To display pictures on a view, you need to do the following:
  
 
# Edit an app project and select the entity from the '''Project''' menu.
 
# Edit an app project and select the entity from the '''Project''' menu.
Line 101: Line 146:
 
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 [[style editor]].  
 
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 [[style editor]].  
 
# Click '''Edit Styles''' and select '''ListNoteImage'''.
 
# Click '''Edit Styles''' and select '''ListNoteImage'''.
# To change the Subject name of the Note, click on the '''ImageQuery''' field.
+
# To change the Subject name of the Note, click the '''[[ImageQuery]]''' field.
 
# By changing the Subject field you set the name of the Note, from where the picture will be taken.
 
# By changing the Subject field you set the name of the Note, from where the picture will be taken.
 
# You can also create more ListNoteImage styles in order to use different notes for different views.
 
# You can also create more ListNoteImage styles in order to use different notes for different views.
Line 108: Line 153:
 
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.
 
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.
  
Now, you need to save these changes, publish the mobile project and synchronize the Mobile CRM application. Then open any Account record in the app, create an associated Note with Subject “ListImage” and attach/capture a picture. This picture is used in the list for this record.
+
Now, you need to save these changes, publish the mobile project, and synchronize the Mobile CRM application. Then open any Account record in the app, create an associated Note with Subject “ListImage” and attach/capture a picture. This picture is used in the list for this record.
 
 
=== 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.
 
 
 
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 [https://youtu.be/9vL4QRN_1dk?t=607 section]. {{Badge|Webinar}}
 
 
 
=== Use Note attachment as image in edit forms ===
 
 
 
You can add a picture to edit form exactly like to the view. For example, when you are editing a form for the Account entity, click '''Add Image''' and select '''FormNoteImage'''.
 
  
A new field called image1 is added to the form. You can rename it by editing the '''Binding''' field in the '''Properties''' pane (for example to ''Account Image''). To apply the change, just click the image field item.
+
=== Use Note attachment as image in forms ===
  
By default, the Note where the edit form picture should be attached needs to have a subject name exactly “FormImage”. Again, this can be changed using styles. Click '''Edit Styles''', select '''FormNoteImage''', then click on '''ImageQuery''' field to change the Subject name of the Note. You can also create more FormNoteImage styles and use different notes for different entities.
+
You can add a picture to a form exactly like the view. In this example, we display an image on the Account form.
  
If you have multiple FormNoteImage styles, make sure that you set the correct style for the image1 item.
+
# Edit an [[app projects|app project]].
 +
# Select '''Account''' from the '''Project''' menu, then click '''Show UI'''.
 +
# Edit the form.
 +
# Click '''Add Image''' and select '''FormNoteImage'''. A new field called image1 is added to the form.
 +
# Select the image. You can rename it by editing the '''Binding''' field in the '''Properties''' pane (for example to ''Account Image''). To apply the change, just click the image field item.
 +
# By default, the Note where the edit form picture should be attached needs to have a subject name exactly “FormImage”. If you need to change the subject name, use styles:
 +
#* Click '''Edit Styles''', select '''FormNoteImage''', then click the '''[[ImageQuery]]''' field to change the Subject name of the Note.
 +
#* You can also create more FormNoteImage styles and use different notes for different entities. Close the style editor.
 +
# If you have multiple FormNoteImage styles, make sure that you set the correct style for the image1 item ('''Properties''' pane > '''Style''').
  
{{Note|If you set the same Note Subject for List and Form view, the image attached to a simple Note will be used for both, View and Form images.}}
+
{{Note|If you set the same Note Subject for your view and form, the same image attached to a simple Note will be used for both.}}
  
 
=== Entity image (Dynamics) ===
 
=== Entity image (Dynamics) ===
Line 144: Line 185:
 
When changes are saved, the project needs to be published and synchronized with the Mobile CRM app. Entity images will appear on the view and on the edit form for those records that have an entity image.
 
When changes are saved, the project needs to be published and synchronized with the Mobile CRM app. Entity images will appear on the view and on the edit form for those records that have an entity image.
  
=== Resizing and cropping images ===
+
The maximum size of the image is 144x144 pixels. <sup>[https://docs.microsoft.com/en-us/dynamics365/customerengagement/on-premises/developer/image-attributes#uploading-image-data [docs.microsoft.com]]</sup>
  
 +
=== Change filename of note images ===
 +
The filename of a note image created using a media tab can be modified.
 +
# Using Woodford, edit the form for the Note entity and add the parameter File Name.<br>[[File:Add filename to form.png]]
 +
# In the app, go to the Note form. Modify the filename and click '''Save'''.
 +
It is not possible to change the filename directly on the media tab.
  
 
[[Category:Woodford]]
 
[[Category:Woodford]]

Latest revision as of 09:58, 21 July 2021

Branding and customization

Resco Mobile CRM offers several ways how to work with images. Broadly speaking, there are two large groups of images:

  • Dynamic images are related to a particular record in your database, such as the photos of your contacts, signatures on an order, or photos of broken machinery collected during an inspection.
  • Project images are related to your app project. They include icons and other static images used in your app.

Dynamic images can be stored in two locations:

  • On your backend server, in special entities designed to hold binary documents, for example, annotation/note on Dynamics/Resco Cloud, or sf_contentversion or sf_attachment on Salesforce.
  • On external document storage, such as SharePoint. Use external document storage for images related to your organization entities and records, if you don’t want to use server database for these, for example, for cost reasons (storing documents in external document servers is cheaper than storing them directly in the CRM server), or you already have existing external storage that you don’t want to migrate. See Documents for more information.

Project images can be stored:

  • In the Images section of Woodford. This is the standard storage for user interface icons.
  • In the Offline HTML section of Woodford. You can put here images used for a more invasive overhaul of the user interface. Also, the static images used in mobile reports are stored here.

Project images

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. See Image examples for a more detailed description of a few frequent use cases.

Form and home icons

The modern and recommended way of changing home screen icons and form tab icons is to use the icon gallery, available directly in these UI components.

The older, traditional way of working with images is described below.

Working with images

The Images pane shows an alphabetical listing of images available in the app. Multiple variants of each image are 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.

While you can upload different image sizes for different platforms, we recommend using only the common images and XHDPI resolution (@2x); Woodford will automatically resize images as appropriate for the device.

Images.png

Changing a standard image

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

  1. Locate the existing icon in the list and 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.

To use transparency and colorization, use 32-bit PNG files with transparency.

Bulk changes

Bulk import is done by importing a specifically named zip file that contains the images in a specific folder structure. To ensure that you have the folders right, you can start with the existing icons:

  • either download a zip file with the default icons from Resco web
  • or export all custom icons from a Woodford project: Edit an app project, select Design > Images from the Project menu and click Export.
Tip: Export the icons from an inspections project, it contains many custom icons.

Once you have the file, extract it and 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.

Different devices have different screen capabilities, and therefore there are different directories for them.

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

You can also use images in different resolutions. The standard resolution (used mostly in older devices) is 72 pixels per inch (PPI). These days, our projects use double of the standard resolution; this is indicated by the suffix @2x in the file name. It is generally sufficient to add only one image resolution when importing new icons, Woodford will generate all the necessary sizes automatically.

If you are familiar with the Adobe XD design tool, you can use it for managing images; see Adobe XD plug-in for more information.

Example

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@2x.png
MobileCrm\Images.MonoTouch\Home\invoice@2x.png

To import the file, go to your app project, select Design > Images from the Project menu, click Import and upload the zip file. Don't forget to Save all changes.

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

Default image size

Each part of the user interface has its own directory for icons. Each directory has a recommended size:

Directory Size in pixels for mockups (72 PPI) Size in pixels for final export (@2x)
Home 40x40 80x80
Tabs 28x28 56x56
Activity 32x32 64x64
CallDirection 32x32 64x64
DetailView 24x24 48x48
Email 20x20 40x40
Search 16x16 32x32
Buttons 32x32 64x64
Controls 32x32 64x64
Cmd 28x28 56x56

Dynamic images

When designing a custom view or form, you can display images related to your record. See Image examples for a more detailed description of a few frequent use cases.

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

Use Note attachment as image in views

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 the 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 style editor.

  1. Click Edit Styles and select ListNoteImage.
  2. To change the Subject name of the Note, click 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 style 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.

Now, you need to save these changes, publish the mobile project, and synchronize the Mobile CRM application. Then open any Account record in the app, create an associated Note with Subject “ListImage” and attach/capture a picture. This picture is used in the list for this record.

Use Note attachment as image in forms

You can add a picture to a form exactly like the view. In this example, we display an image on the Account form.

  1. Edit an app project.
  2. Select Account from the Project menu, then click Show UI.
  3. Edit the form.
  4. Click Add Image and select FormNoteImage. A new field called image1 is added to the form.
  5. Select the image. You can rename it by editing the Binding field in the Properties pane (for example to Account Image). To apply the change, just click the image field item.
  6. By default, the Note where the edit form picture should be attached needs to have a subject name exactly “FormImage”. If you need to change the subject name, use styles:
    • Click Edit Styles, select FormNoteImage, then click the ImageQuery field to change the Subject name of the Note.
    • You can also create more FormNoteImage styles and use different notes for different entities. Close the style editor.
  7. If you have multiple FormNoteImage styles, make sure that you set the correct style for the image1 item (Properties pane > Style).
Note If you set the same Note Subject for your view and form, the same image attached to a simple Note will be used for both.

Entity image (Dynamics)

Microsoft Dynamics 2013 and later includes a special picture field, where you can store images of Accounts, Contacts, Leads, etc. If you use this kind of picture field, you can use it also on Mobile CRM application.

First, make sure that the field Entity Image is enabled for the entities where you want to use them. Select the entity from the Project menu, scroll to Entity Image and verify that the field is enabled.

Once you enable the Entity Image field, the default image set for the record will be automatically displayed on the Contact Information Form. No additional action is needed.

To add entity images to your view, edit the view, click Add Image and select ListEntityImage. The image is added to your view; adjust the size and position of your existing fields to avoid overlap. To preserve the default functionality, we recommend not to edit the ListEntityImage style. You need to save the changes and publish the customization (or proceed to setting up the edit form entity image).

To add entity images to your form, edit the form, click Add Image and select ListEntityImage. The image is added to your form. You can rename the image by editing the Binding field in the Properties pane. To apply the change, you need to click on the image field item.

When changes are saved, the project needs to be published and synchronized with the Mobile CRM app. Entity images will appear on the view and on the edit form for those records that have an entity image.

The maximum size of the image is 144x144 pixels. [docs.microsoft.com]

Change filename of note images

The filename of a note image created using a media tab can be modified.

  1. Using Woodford, edit the form for the Note entity and add the parameter File Name.
    Add filename to form.png
  2. In the app, go to the Note form. Modify the filename and click Save.

It is not possible to change the filename directly on the media tab.