dan.stoll

Nintex App Studio for the win

Blog Post created by dan.stoll Employee on Mar 24, 2017

Whilst there has been a height of activity with Nintex Workflow Cloud and Nintex for O365 over the past month or so.. The App Studio team have been feverishly coding away with the next amazing release that really sets Nintex App Studio apps apart.

 

This release you will see some UI enhancements to the build process within App Studio. Which brings the new modular design framework to the product. 

But the biggest addition is what you can now do with Custom Content... 

 

So let me show you what you can do.. Above you can see how you can move around the order of the menu. You can also add new menu items, such as a built in barcode scanner.. Which takes me back to this post that I wrote a while back Getting even deeper linking with Nintex Mobile and Nintex Mobile Enterprise . Now if you are using QR codes with deep links in them, you can use a QR code scanner all with in the Nintex App without having to rely on a 3rd party. 

 

The other menu type is content.. Eg. Videos, PDF, Office Docs and HTML.. And this is where things get really cool... So not only can you upload this contents so they are embedded in the app for reference by the app users, you can also use HTML to have a landing page. The App utilizes the devices internet browsing capabilities, so if you place a HTML file in a container it will open in the app.. Further to this, if the menu container is the first item in the menu the first HTML page in the container will become the lading page.. Confused ?? See below

Now how did I create this magic.. Well quite easy really.. Check it out.

Firstly I create a new menu item and I called it home. In this container I uploaded a HTML file that I built. 

 

This is the contents of the HTML file:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0" />
<style>
body {
background-color: #000000;
}

h1 {
color: #ffffff;
}

p {
color: #ffffff;
}

.button {
display: inline-block;
border: 2px;
border-color: #ffffff;
height: 50px;
width: 100%;
background: #000000;
padding: 5px 5px 5px 5px;
color: #ffffff;
text-align: center;
font: bold 1.5em/40px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
.button:hover {
background-color: #6b6a6a;
color: darkred;
}
a.button {
text-decoration: none;
}
</style>

</head>
<body>
<p>
<img src="https://image.ibb.co/cwYbbF/joga300.png">
</p>
<p>
<a href="ntx-jogacoach://Resources" class="button">Resources</a>
</p>
<p>
<a href="ntx-jogacoach://Videos" class="button">Video</a>
</p>
<p>
<a href="tel:+1-111-222-3333" class="button">Call JOGA HQ</a>
</p>
<p>
<a href="sms:+1-111-222-3333&body=Love%20your%20work." class="button">SMS JOGA HQ</a>
</p>
<p>
<a href="ntx-jogacoach://form?ntx-name=Marketing%20Help&Organization=JOGA&ntx-msgLoading=Loading%20Marketing%20Help%20Form&ntx-msgSuccess=Just%20Checking..%20" class="button">Marketing Help</a>
</p>
</p>
</body>
</html>

 

Here in source you can see where I have used deep linking to point to menu items and to also open the form "Marketing Help"

Awesome right.. In anticipation of some questions, here are a few answers ... 

  • Yes you can use iFrames
  • Yes you can use jQuery
  • No you can not reference assets within the app, eg CSS files, JS libraries..
    • But you can refer to them if they are hosted on the internet .. e.g. CDN, google fonts. etc

 

I'm super pumped about this release as it has opened up so many more scenarios for using Nintex App Studio. Imagine being able to create a field app, that has all the manuals, maps and reference material all built in to the app. So with all this power, I'd love to see what you come up.. Be sure to post some screens of your app in the comments below. 

 

Until next time  

Outcomes