Monthly Archives: November 2013

Lookup data from another list inside a Nintex Form

Background

A common requirement among form designers is the ability to surface SharePoint data from another list and optionally process that data. Displaying an entire list item or a list view is possible with the List Item and List View controls respectively, however the aforementioned controls render html as their output which cannot be processed in a Nintex formula. In scenarios where you want to obtain a value from a list column, for display or processing in a formula, the lookup function is a viable approach.

An example would be a purchase order form whose list of purchasable items is maintained in a central list within SharePoint.

Henceforth is an example of how to use the Lookup function.

A Purchase Order utilizing the Lookup function

Given a Products list containing the following purchasable items:

100113_2356_Lookupdataf1

We want to create a Nintex form allowing a user to purchase items from a centralized list. The first step is to create our Nintex Form with a Lookup control that is connected to the Products list.

part1

Let’s preview the form. We see that the control displays each item in the Products list as a selectable item in the dropdown:

100113_2356_Lookupdataf3

Next, users should be able to purchase multiple items; let’s put this control inside a repeating section and add a text box to capture the quantity of each item.

100113_2356_Lookupdataf4

Great – users can purchase different types of products and various quantities of each. Next, we want to show to the user the price of each item they select. To do so, we make use of the Lookup function.

The Lookup function

The lookup function allows a form designer to get data from a column within SharePoint.

As mentioned, we want to display the associated price of a given product depending on what the user selects to purchase. To do so, we drag on a calculated value control and configure it as follows:

lookup-function-for-price

100113_2356_Lookupdataf6

In the above screenshot you can see the filled out function. The first parameter tells the function to access a list called “Products”. We need to tell the function which item in the products list we are interested in, as we only want column data for one list item, not all of them.

The second and third parameters are for this purpose, it specifies which column to filter on (ID in this case) and the value in that column that should be matched against. You’ll notice that the third parameter is red and underlined. That is because it is a ‘named control’. I.e. the value comes from the lookup control we put on the form to allow users to select a product. This formula is now dynamic. When the ‘Product’ control’s value changes, this formula is re-run.

The last parameter is ‘Price’. This is the column name which we want to bring back and display.

Let’s hit preview and have a look:

basic-lookup-of-price

In the above animation you can see the behaviour of the lookup function as it fetches the price upon product selection in the dropdown.

The request to SharePoint happens asynchronously, so the form isn’t refreshed or held up while the data is being fetched.

This is the most basic scenario where we can see how powerful the lookup function is. We can now extend our form to show the total cost of products per item in our form, which is the formula Qty*Price, as well as a running total at the bottom of the repeating section:

100113_2356_Lookupdataf8

Incorporating Rules

What happens if a user is trying to order more than what’s in stock? Preferably we want to show that there is insufficient stock based on what’s in the Products list.

We can provide this ability by using the lookup function inside another calculated value control.

Add another Calculated Value control inside the repeater and open up the formula builder. For this control, we want to show the text ‘Insufficient Stock’ if the quantity in stock of a given product is less than the quantity entered by the user:

100113_2356_Lookupdataf9

We’ve named this control ‘InsufficientStock’. Now, this control will read ‘Insufficent Stock’ when the quantity entered is greater than what’s in stock.

Next, we will create a rule on the Quantity control to bold the text and display it in red only when the control reads ‘InsufficientStock’.
rule

Here is the final result with the rule to change the display format of the quantity control:

Lookup-function-final

Once you familiarize yourself with the lookup function, it opens up new possibilities with Nintex Forms. We value feedback so please post your experience using the Lookup function and what type of scenarios you’re using it in. Don’t forget to tell us about capabilities you’d like to see in future releases!

We’ve earmarked querying the user profile service as a next step for this feature, allowing a form designer to surface user profile data on a form 🙂

The Lookup function is available in version 2.2 for SP 2013, and version 1.4 for SP 2010.

Tom Shirley,
Senior Developer at Nintex.

Advertisements

A little custom styling can go a long way

A few weeks back, I helped my mate Dan Stoll in showing him how to make use of 3rd party Javascript libraries to implement tabbed pages within a Nintex Form. See this article to get up to speed: http://www.sharepointpub.com/jquery-ui-tabs-and-nintex-forms/

If you take a look at the end result in the linked article, it was functional, but it didn’t look very pretty. A quick look at some of the more popular websites on the net show some great examples (example one, two and three) of how a fairly standard web form can look.

Now, I’m not a web designer or formally trained in User Experience (UX), but I am a big fan of simple, bold, easy-on-the-eye forms.

With that in mind, I wanted to take the sample utilizing tabs one step further; I wanted to make it look as good as it should!

A Register form built with Nintex Forms

Here’s the form published to Nintex Live for anonymous access: http://ntx.lv/1ahndPs  <– Click the link to see what’s possible!

Have a play with the tabs and fill in some data. Don’t worry, you’re not actually signing up for anything 🙂

RegisterFormScreenshot1

Now, some people out there would think there’s no way this is a Nintex Form! Well, to them I’d say, think again. Our product is fairly extensible so that you can get what you need done by including a bit of CSS and JS…

The bottom line is the form is looking and feeling way more user friendly. It’s just a concept, so there are lots of room for improving things. But the takeaway is that custom styling can do a great deal in improving the usability of a Nintex Form.

So how do you go about getting something styled like this? Stay tuned for part 2 of this blog post which will be up shortly!

The obligatory ‘hello world’ blog post…

The catalyst for starting this blog is to share with the community some of the new features that we’re putting into Nintex Forms. I’m sure this blog will evolve over time, but the current objective is to get more information out into the public sphere on how to use Nintex Forms to its fullest potential.

If you’re not familiar with the name used for this site, ‘walking the stack’ is a programming term where a developer typically starts with a executing piece of code and ‘walks’ up the stack trace to investigate the path of execution, usually to troubleshoot something.

A quick intro on me.. I’m a developer based in Melbourne, Australia and currently working with the fantastic people at Nintex on their Nintex Forms product . My passions are computer programming and hiking around Australia. Hit me up on twitter @_TomShirley

Here’s a quick video sample of one of my hiking escapes for good measure!