Set image based on location in Forms

Document created by eharris04 Employee on Apr 25, 2016Last modified by eharris04 Employee on May 15, 2016
Version 4Show Document
  • View in full screen mode

Fun with Forms: One Form to Rule them All!

 

AuthorSean Fiene
Long Description

Wouldn't it be cool if you could dynamically have an image appear depending on the country the end user is viewing the form?

I thought so, so I created this cool sample form to show what can be achieved with a little JavaScript and CSS in Nintex Forms.

For this example, let's imagine that we have an office in the United States and an office in Australia (oddly enough, Nintex does!).

DependenciesNone
Support Info

Sean Fiene

Compatibility

Nintex Forms

Platform

SharePoint Server 2010

SharePoint Server 2013

Screenshots

When viewed in the United States:

 

usView.png

When viewed in Australia:

 

auView.png

Additional Information

To accomplish this, I used a free geoip service and stored the output of the 'country' data to a variable. The variable would then be used to determine the appropriate CSS class to apply to the label control used to populate the image.

 

The label control has HTML embedded to apply a ID and Class.

 

The below JavaScript can be placed in the 'Custom JavaScript' section in Nintex Forms Settings:

  1. NWF$(document).ready(function () {
  2.     NWF$.getJSON("http://freegeoip.net/json/", function (data) {
  3.         var country = data.country_name;
  4.         var ip = data.ip;
  5.      
  6.         NWF$('#showCountry').text(country);
  7.    
  8.         switch (country) {
  9.             case "United States":
  10.                NWF$('#testBackground').addClass('seattle').removeClass('default');
  11.                 break;
  12.             case "Australia":
  13.                 NWF$('#testBackground').addClass('apac').removeClass('default');
  14.                 break;
  15.         }    });
  16. });

 

The below CSS can be added in the 'Custom CSS' section in Nintex Forms Settings:

 

  1. .apac {
  2. background-image: url('http://www.nintex.com/~/media/corporate/images/sections/platforms/nintex-products-connect-to-content.ashx?h=153&la=en&w=446');
  3. }
  4. .seattle {
  5. background-image: url('http://www.nintex.com/~/media/corporate/images/sections/platforms/nintex-products-on-premises-cloud-hybrid.ashx?h=232&la=en&w=312');
  6. }

Nintex Xchange Terms of Use Policy

Nintex makes no warranty or guarantee about the reliability, performance, quality, or functionality of any assets, and any assets you install are therefore provided as is. By downloading this asset, you agree to the terms of use.

1 person found this helpful

Attachments

Outcomes