cancel
Showing results for 
Search instead for 
Did you mean: 

Adding Form Icons in Nintex Mobile

andrewg
Nintex Newbie
6 5 1,667

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.

5 Comments
Chris_Ben
Nintex Newbie

I tried this with my OneDrive for Business account and couldn't for the life of me find the embed option.  20 mins later, I discovered embed is only available for OneDrive, not OneDrive for Business!  Hah!  Hopefully this saves the rest of you 20 mins (just like Andrew has already saved you an hour by teaching you about the mobile preview submit feature)

andrewg
Nintex Newbie

Yes, that's right. Good to see the difference. For whatever reason they don't let OD for Business do the same embedding. In a client scenario, we created a OD account and using it like a "service account" just to host it.

harfmt
Nintex Newbie

Hi Andrew, when you said you were able to use some of the "in app" URLs to show images. How did you do that? i've only been able to display one image to a mobile form using a URL. No other images will display. And I can't see what the difference is between the one that displays and the others that don't. 

andrewg
Nintex Newbie

In-app may be a bad description on my part. What I mean is if the link to the image is clicked on by a user, the image appears in the browser as an image displayed within the application. Like Dropbox menus, folders, profile information, all of the "App" things appear and then the image as a file displayed in-app. But the other URLs I gave a mapping to that worked consistently were those that if a user had the URL and pasted in the browser, only the image would display. No application menus, profiles, nothing. Only the image. Those are the best to use for mobile apps. 

So though I could get one to work, my recommendation is to not use URL's that work in-app. Try to get the method that is external and image only. Dropbox, google, and onedrive, all have different ways to produce that experience as described above. 

harfmt
Nintex Newbie

Yes, we worked out that the images have to be public which is a bit of an issue. I'll have to test if this works offline. Which is the whole point in using the Nintex app for us.

Kind Regards

Joanne Morris

Senior Technology Systems Analyst

Technical Services

Thiess Pty Ltd

179 Grey Street, South Bank QLD 4101

Locked Bag 2009, South Brisbane QLD 4101

T +61 7 3002 9428

M 0409059814

E <mailto:jmorris@thiess.com.au> jmorris<mailto:jmorris@thiess.com.au>@thiess.com.au<mailto:username@thiess.com.au>

thiess.com<http://www.thiess.com/>

<http://www.thiess.com.au/>

<http://www.facebook.com/ThiessGroup>