Nintex Forms – Site Logo Branding

For those that haven’t read the post on Nintex Forms – Simple Branding, you should take a look.  It’s a good starter for this post.

This post goes to a different level.  It’s about customizing the form in such a way, that you make it dynamic in the files that it interacts with.  Files such as images, css, javascript etc. 

The easiest way that I found to describe this, is to customize the Site Logo.  For each site that you’re working on, you may want to have a custom logo for your Nintex Forms.  Lets say you have a Finance and a Human Resources site.  Although you may want to have a standard company logo on the forms you use, but you may want something more specific to the site.  Something that differentiates forms on a Finance site compared to an HR site.

Click on the Fullscreen button for better viewing.

Dynamically Generating a Logo Url

The first thing to do, is decide upon some standard for your sites.  What works best for me, is to have a SharePoint document library called Logos.  In there I will have an image file named Logo.jpg.  This will exist on all sites in my farm that I want to customize the logo on the Nintex forms.

Logos Library

Now that that is done, I can start creating the form for a library.  That can be the start of a template form or it can just be a customized form for a specific list of library.

When you click on the Nintex Forms button on the ribbon, it auto-generates a form for you and uses the default Nintex Forms logo.

Default Forms Logo

To customize the logo, double click on it to bring up the Image settings. Remove the default url and click on the Insert Reference button to the right of the url.  In the Common properties, there is a Site URL.  This is used to dynamically pick up the url to the site at runtime.  Add the library and logo file name to the end of it:

Building the URL

When the url for an image is set to dynamically built, this is what the image will look like :

Dynamically Generated URL

The dynamically generated image url will make the image look like above.  The image itself will display correctly at run time when the form is displayed, either with a preview or the creation/update of an item.

This is what it looks like in Preview mode:

Preview Mode

Moving the Form to another Site

As long as there is a library named Logos with a file in there called Logo.jpg in another site, moving this form to that site should have no issue.

Export the form to a file, navigate to the other site, to whatever list or library you want to design a form on.  Click on the Nintex Forms button and import your form file.  The looks will be identical to the source list/library.

Click on Preview and the form will come up and it should have the logo from this new site.

New Site Form

Notice above, that the logo is different but there was no change to the form after import. It simply figured it out because the url used in the url is evaluated at runtime.

Extending this to the Farm

Although importing a form will help in not having to redesign the form, this is actually more suited to a template.  As with the previous post on Simple Branding, it would be ideal that this went into a farm template.  That way, no importing will be required, it will simply be inherited when the Nintex Forms button is clicked and the form is generated.

Conclusion

As with everything, when designing forms, keep the template concept in mind.  This not only makes things easier for you in the future when designing forms, but also all the other users in your company if they are designing forms.

Leave a Reply

Your email address will not be published. Required fields are marked *