andrewg@intellinet.com

Adding Form Icons in Nintex Mobile

Blog Post created by andrewg@intellinet.com Champion on Feb 8, 2017

I have been creating several forms in Nintex Mobile in my O365 tenant for some time now and wanted to add some flare by adding icons the forms. My initial attempts prove somewhat difficult so I wanted to post my results and steps taken to add icons more quickly the next time I need to. 

 

As of this writing, (So yes, I expect this behavior to change in future updates to Nintex Mobile App), the issue I ran into was not being able to upload images to my Site Assets library on my SharePoint site and use those icons within the app. What I found was the app does not use the account that is used to log into the tenant to access the image. So this required me to upload my images to public facing locations so the app could essentially anonymously download. 

 

So this was the next hurdle, I don't have a public facing website I can randomly upload images to. But I thought, I do have OneDrive, DropBox, and a Google account, can't I use those? What I found out was Yes, and No.

 

Prerequisite

First off, make sure your image is a 150x150 PNG file. After you upload it to a web facing location, you can reference it in your Nintex Form settings, under the section Nintex Mobile App Settings, and provide the URL for the icon and publish.

 

Using Google

If you upload a file to your google drive you can share it in many ways. If you upload a file, then click Share, you can set it to Anyone with the link can view.

This gives you a url similar to 

https://drive.google.com/file/d/0B-y5w7UhzHNQtsBzWHNLR01Jbms

This is a public image now, but it doesn't work. Why? Because it isn't a static image. If you go to that URL, you get an in app view within google docs like this,

So in order to make the image a static file, that can also be used on public sites, you can use the Google drive API. Which is using the following setup

https://docs.google.com/uc?id=FILE-ID
https://drive.google.com/uc?id=0B-y5w7UhzHNQtsBzWHNLR01Jbms

Now the image shows up in my mobile app next to my forms! Also, when I navigate to this url, the browser only shows the image, not within a website like before.

 

Using Dropbox

Using dropbox is exactly like using Google Drive. You upload your image, share it so that anyone can view, and you copy the provided URL. 

https://www.dropbox.com/s/lk06samy1198l6o/x.png - in App, doesn't work
https://dl.dropboxusercontent.com/s/lk06samy1198l6o/x.png - Works!!

But the provided URL is seen in line 1 above and displays exactly like Google Drive and is not a static image. But using the Dropbox API and in the format in line 2, the image will appear in the browser and my Nintex Mobile App!

 

Using OneDrive

To use OneDrive, go to the OneDrive website. You might need to sign in with your Microsoft account.

Pick the file you want to embed by selecting the check box in the upper-right corner of the file.

Tap or click Embed on the top of the page, and then choose Generate.

Copy and paste the URL into the form settings.

The URL you will get using Embed will format like the following:

https://osl0mw-bn1305.files.1drv.com/y3myB3iOA2fQCV82R1M6R77-dkb0WX1TWCBkRHQR8LekbFLiXdWWkdiW_WLyBjgRloBSwP-9Nxf4NitzzYz52fQECVl0rYINpOIA0x_ukIbJp0pk7Y

When I didn't use the embed method but simply shared the image to anonymous, I could get to the image but the in app behavior is the same as the previous two. 

 

Images within Forms

Just one final note, I was able to use some of the "in app" URLs to show images within my forms, but not as icons for my forms. Below is a screenshot of one of the games we will see at InspireX2017.

Outcomes