cancel
Showing results for 
Search instead for 
Did you mean: 

Set image based on location in Forms

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...');
  3. }
  4. .seattle {
  5. background-image: url('http://www.nintex.com/~/media/corporate/images/sections/platforms/nintex-products-on-premises-cloud-...');
  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.

Attachments
Version history
Revision #:
1 of 1
Last update:
‎04-25-2016 01:26 PM
Updated by: