Image Binding

About this article

Image binding is a type of binding which is configured from the Element tab in the Dynamics Designer. Image bindings are used when you want to update an image in a content control in Word or shape in PowerPoint. This article will explain how to set up image bindings. 

• How to set up an image binding from Dynamics Designer?
• Inherit Dimensions
• Width and height
• Image
• Visibility
• Remove and keep content
• Disable updates

Prerequisites

What is an image binding?

An image can be dynamically or statically inserted into documents and presentations by referencing an image uploaded to a data source in the Admin Center of a tenant. From the Dynamics designer, you can then link to the image with an image binding.

How to set up an image binding?

1. Open Templafy task pane in your Office application/start your document creation flow
2. Go to the ellipsis menu in the task pane and click on Dynamics Designer
3. Go to the Element tab, like shown below:
   
   
   
   
4. Select Image in the first dropdown
5. Add your bindings
6. Click Create

Inherit Dimensions

When setting up your Image binding, you will have an option to inherit the native width and height of your image. These bindings can be used:

• {{InheritDimensions.InheritNone}}: nothing is inherited.
• {{InheritDimensions.InheritWidth}}: the native width of the image is inherited.
• {{InheritDimensions.InheritHeight}}: the native height of the image is inherited.

Width and height

The fields Width and Height allow the user to adjust the size of the inserted images by statically defining the values or by dynamically defining them. 

You can refer to a data source if you have a reference for width and height added in a data source, or you can type in your dimensions in centimeters, e.g. 3.75 cm. If you only define a width for example, then the height will be adjusted and set upon creation. 

In order for dynamic bindings to be inserted, they need to be added to a data source first. Simply create two more columns for Width and Height and add the desired value.

Image

This field is used to create a binding to an image. For example {{UserProfile.Office.Logo.Image}} or https://www.mycompany.com/logo.png.

Visibility

A visibility binding is almost exclusively used with an IfElse() function for the purpose of hiding/showing bindings. There are two properties that can be used with visibility: VisibilityType.Visibility and VisibilityType.Hidden

Examples of visibility bindings can be seen in this article: Element binding visibility

Remove and keep content

If checked, the content control will be removed and the binding will just show the image. The image will be editable by users. Document updater will not apply. 

Disable updates

If Disable Updates is checked, no changes will be applied when using document content updater. By default, it's unchecked, allowing updates.

Example 1

Inserting dynamically a static image located in the Offices data source. 

Example 2

Inserting dynamically an image depending on the Office location of the user. 

In the example below these data sources are used. The column Logo of the Offices data source is a reference to the column Name of the LogoInsertion data source:

In the user profile, the Offices data source is used in a dropdown where the user can set the appropriate office.

Binding (width)	{{UserProfile.Office.Logo.Width}}
Binding (height)	{{UserProfile.Office.Logo.Height}}
Binding (image)	{{UserProfile.Office.Logo.Image}}
Input	Office Eindhoven	Office Sydney
Output

Example 3

The same as example 2, but using the DataSources[] function.

Binding (width)	{{DataSources.Offices[UserProfile.Office.Name].Logo.Width}}
Binding (height)	{{DataSources.Offices[UserProfile.Office.Name].Logo.Height}}
Binding (image)	{{DataSources.Offices[UserProfile.Office.Name].Logo.Image}}
Input	Office Eindhoven	Office Sydney
Output

Related articles