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?
- Open Templafy task pane in your Office application/start your document creation flow
- Go to the ellipsis menu in the task pane and click on
Dynamics Designer
- Go to the
Element
tab, like shown below: - Select
Image
in the first dropdown - Add your bindings
- 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.
Binding | {{DataSources.Offices.Logo}} |
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 | ![]() |
![]() |
Comments
0 comments
Article is closed for comments.