WYSIWYG Business Cards App in SharePoint Online using @Nintex Forms and Workflow for @Office365 apps

Title: WYSIWYG Business Cards App in SharePoint Online using Nintex Forms and Workflow for Office 365 apps

Details:

A solution showcase session. ‘What you see is what you get’ in this business cards app for Office 365 SharePoint Online using Nintex forms and workflow apps for Office 365.

Business Case: 

Your customer has a business need where they want to preview their cards order as it would appear in print before they submit their request.

They want to preload user information when they log in to the system. When they submit their request, the manager who handles the processing should get ALL details of user submitting request with a means to view the requests in site.Anyone in the organization can submit request for cards and the manager should have access to everything in the system.

Learning Objectives:
In this session, attendees will learn how to create apps in Office 365 SharePoint online with preview panel of their data containing logged in user profile information as well as customize/ brand their forms.

Focus Areas:
#SharePoint, #Office365 and the Cloud and #Nintex apps for Office 365

Skill Level:
Introductory / Intermediate

Speaker Bio:

 

Swetha Sankaran is an Office 365 SharePoint online expert working with SharePoint and Microsoft BI stack since 2008. Currently focusing on Office 365 user adoption, apps, forms and workflows processes to automate several business processes from manual/ paper based forms.

She is a Microsoft Certified Specialist(SharePoint and Business Intelligence), Nintex Certified Forms and Workflow Professional, Computer Engineer, President – Women in SharePoint DC,ProductivityEDU and Co-Chair #FEDSPUG

Twitter: @SwethaSan
LinkedIn: Link2Swe
Blog: www.swethasankaran.com

Click here to RSVP

Custom control scripts for Nintex Forms

Handy scripts to get custom display value in a field based on the value submitted by the user.


To get login id of the user in a label control without @organizationname.org

  • Set the control’s CSS style value to a custom style name. (.my-custom-label in this example)
  • Include an empty style in the Custom CSS section in form settings (.my-custom-lable{}; for this example)
  • Set controls
  • NWF$(document).ready(function(){
    var ppl= NWF$(‘#’ + varEmployeeName);
    ppl.change(function(){
    if(this.value == “”){
    NWF$(“.my-custom-label label”).text(”);
    }
    else{
    var name = this.value.split(‘|’)[2].split(‘@’)[0];
    NWF$(“.my-custom-label label”).text(name);
    alert(name);
    }
    });
    });

To get custom formatted telephone(or fax) number in a label.

  • Set the control’s CSS to a custom style
  • Include empty style in the Custom CSS section in form settingsCustom CSS section in form settings (.my-custom-phone in this sample)
  • NWF$(document).ready(function() {
    var tel=NWF$(‘#’+telephoneVar);
    tel.change(function() {
    var telephone = this.value.replace(/(\d\d\d)(\d\d\d)(\d\d\d\d)/, “Tel – ($1) $2-$3”);
    NWF$(“.my-custom-phone”).text(telephone);
    alert(telephone);
    tel.prop(‘maxlength’,10); 
    });
    telephone.png
    To set maxlength of telephone/fax you can set variable.prop(‘maxlength’,10)

Note: 
Store the client id of the control in a JavaScript variable. This is what you use to get the input value from the control prior to calculating the value for display purposes.

 

 

#Nintex Forms magic with panels for Office 365

This post is about multiple panel buttoned forms layout to traverse through various sections of Nintex forms for #Office365 in #SharePoint Online lists.

Create a completely customized Nintex forms for Office 365 SharePoint Online list. The home panel has button interface to traverse through different sections of the forms as required. Customization include switching the panels with button click in the home panel, custom control designs and scripts. You can download this for reusable script & css in form settings.

Dependencies: Nintex forms for Office 365, Script, CSS Supporting browsers.

Compatibility: Nintex Forms for Office 365

Platform: SharePoint Online

List with three columns: Title, JavaScript and CSS(No, you don’t need those three for this to be fancy )PM1

When you click + New Item > Home PanelPM2

When you click the 1st button:PM3

When you click the 2nd button:PM4

When you click the 3rd button:PM5

Clicking save will submit the entered data to your SharePoint online list.
Here is the sample rule for the panel:PM6

 

VideoBe warned, I type like its my 1958 mechanical typewriter and conveniently forgot to turn off the microphone while recording,
Oops! But you get to watch fun forms in action, so its all cool!Scripts & CSSfunction fnJumpToPanel(panelNo)
{
var txtBoxNumber= NWF$(“#”+txtBoxNumberID);
txtBoxNumber.val(panelNo);
NWF.FormFiller.Functions.ProcessOnChange(txtBoxNumber); //alert(panelNo);
}/*Custom form CSS*/
.btn {
padding: 0 5px 0 5px !important;
border-color: #2e6da4 !important;
border: 1px solid transparent;
border-radius: 4px;   font-weight: 400;
line-height: 1.4285;
text-align: center;text-shadow:1px 1px 2px black, 0 0 25px, blue, 0 0 6 darkblue;}
.panelCustom{
border: 1px solid #dfdfdf;
border-radius: 10px;
-moz-border-radius: 5px;
-moz-box-shadow: 5px 5px 5px #888888;
-webkit-box-shadow: 5px 5px 5px #888888;
box-shadow: 5px 5px 5px #888888;
}

Here is the link to the article’s Nintex Xchange Community Connect post: https://community.nintex.com/docs/DOC-4060

Good luck!

Missing Nintex Forms Icon – Fix

One of our SharePoint Online site was missing the following Nintex forms items this morning –

  1. Nintex Forms Icon in the SharePoint List ribbon
    NF1
  2. Nintex List Forms Online webpartNF2
  3. Missing new form webpart in the SharePoint page. The page was just blank.NF3

-I had not made any changes to the site and permissions of the site did NOT allow for modifications to pages for other users.
-I WAS the owner of the site with FULL CONTROL
-Behavior was the same on ALL browsers

Having ruled the above out, I went on to research the reason for this behavior. #Nintex Connect always has useful resources and found that there were a couple other who had the issue.

Ref:
https://community.nintex.com/thread/9810,
https://community.nintex.com/thread/9931

Solution was straight forward, remove Nintex Forms app and reinstall it. It does NOT modify the form design in your list. ALL customization stays intact, so no big deal. Below image shows the steps I had to unistall and reinstall the app

NF4.png

Now that we have removed and reinstalled Nintex Forms for Office 365 app in our “SITE”, missing Nintex forms elements reappear in their corresponding sections.

NOTE:

While Nintex Forms items are restored, you still need to:

  • Customize the List form in Nintex and publish it once again. You will notice that all your custom designs are intact.
  • Open your Nintex List Workflow and republish it. (Especially if you have task forms that are customized.)
  • Re-add the webpart in your SharePoint page and set the required webpart properties.

If they aren’t done, then SharePoint smartly users its OOTB form to display custom list and Task list items. Not the pretty Nintex. 🙂

Items to also keep in mind:

This happens in specific site, NOT the entire site collection/tenant. So NO need to fret/worry about OTHER site Nintex Forms.  They remain unaffected.

While I could not pin point to find out what caused this, I am happy the fix was easy enough to implement and NO loss of data/time or even energy.

And thats why I love the simplicity of Nintex and cloud collaboration.

Good luck!

@Nintex Workflow Professional Certificate

Today I took an exam and added Nintex Workflow Professional Certificate to my list of official certifications. Target audience for the certification are experienced forms and workflow creators. Questions covered designing, creating and debuggins Nintex workflows and forms concepts. #Excited to have taken the test as it was the high point of my day!

Nintex tells me I am skilled at creating Workflows and Forms! WOOT!!

NintexWorkflowProCertificate.PNG

SharePoint Fest DC 2016 – April 27-29, 2016

Hola folks!

Interested in getting hands-on training on Office 365 SharePoint? Look no further!

SharePoint Fest is headed back to downtown Washington, DC and you won’t want to miss it!
http://www.sharepointfest.com/DC 

SharePoint Fest DC 2016 will be held at the Walter E.Washington Convention Center from April 27th through 29th. You can register for theconference and workshop at **** http://www.sharepointfest.com/DC/index.php/register  ****

Save an additional $200 on a platinum pass or save $100 on a gold pass or the pre-conference workshops ONLY if you register by April 1st!

Look out for additional door prizes for FEDSPUG-WSPDC usergroup members.

Check out the agenda for SharePoint Fest DC here: http://www.sharepointfest.com/DC/index.php/agenda and see you there.

Hyperlink to Edit item in SharePoint using Nintex for Office 365

Business case:

Users want direct link to Edit Item from their notification email body without having to go to the form ribbon and then clicking on Edit Item as seen below.

EditItemURL1.png

Solution:

Say you have ‘Send an Email’ action in the Nintex workflow with the text below.

U‍RL of the current item: {Workflow Context:Current item URL}‍

This would email selected user with the URL of the current item from Workflow Context. Clicking on that will then redirect users to

Actual URL of the Nintex form in DISPLAY mode:

https://yourtenant.sharepoint.com/sites/Forms/Swetha/TestSite/FormsApp/NFLaunch.aspxSPAppWebUrl=https://yourtenant.sharepoint.com/sites/Forms/Swetha/TestSite/FormsApp&SPHostUrl=https://yourtenant.sharepoint.com/sites/Forms/Swetha/TestSite&remoteAppUrl=https://formso365.nintex.com&ctype=0x0100B52DC7B8A6EC4040BAB784010BB614F9&wtg
=/sites/Forms/Swetha/TestSite/Lists/EmployeePromotions/Item/&mode=2&List=6aa1b4ba-ca60-4434-93d6-f4146d026075&ID=6&Web=f8661cf5-7a18-430f-9f92-262850e0087d

 

URL of the Nintex form in EDIT mode:

https://yourtenant.sharepoint.com/sites/Forms/Swetha/TestSite/FormsApp/NFLaunch.aspxSPAppWebUrl=https://yourtenant.sharepoint.com/sites/Forms/Swetha/TestSite/FormsApp&SPHostUrl=https://yourtenant.sharepoint.com/sites/Forms/Swetha/TestSite&remoteAppUrl=https://formso365.nintex.com&ctype=0x0100B52DC7B8A6EC4040BAB784010BB614F9&wtg=/sites/Forms/Swetha/TestSite/Lists/EmployeePromotions/Item/&mode=1&List=6aa1b4ba-ca60-4434-93d6-f4146d026075&ID=6&Web=f8661cf5-7a18-430f-9f92-262850e0087d

 

Splitting the URL string for EDIT item as seen below:

Line 1: https://yourtenant.sharepoint.com/sites/Forms/Swetha/TestSite/FormsApp/NFLaunch.aspx?PAppWebUrl
Line 2: =https://yourtenant.sharepoint.com/sites/Forms/Swetha/TestSite/FormsApp&SPHostUrl
Line 3: =https://yourtenant.sharepoint.com/sites/Forms/Swetha/TestSite&remoteAppUrl
Line 4: =https://formso365.nintex.com&ctype=0x0100B52DC7B8A6EC4040BAB784010BB614F9&wtg
Line 5: =/sites/Forms/Swetha/TestSite/Lists/EmployeePromotions/Item/&mode=1&List=6aa1b4ba-ca60-4434-93d6-f4146d026075&ID=6
Line 6: &Web=f8661cf5-7a18-430f-9f92-262850e0087d

We can see that mode=1 opens the item in Edit Mode for that particular item ID which we can get dynamically from Current item ID.

To get dynamic link for Edit item in Nintex workflow for office:

Use Nintex Build String Action output to a single variable called varEditURLTxt

1) Open the item in EDIT mode and copy the URL of the item.

2) Get everything in the EDIT URL until ‘&ID=’

2) Insert reference to current item ID

3) Add the remaining portion of the EDIT URL(Line 6 above)

Now this string variable contains the dynamic URL which can inturn be included as hyperlink in email body of ‘Send an Email’ action. When the users click on the hyperlink generated, they will be redirected to ‘Edit item’ form instead of display.

Final URL:

https://yourtenant.sharepoint.com/sites/Forms/Swetha/TestSite/FormsApp/NFLaunch.aspx?SPAppWebUrl=https://yourtenant.sharepoint.com/sites/Forms/Swetha/TestSite/FormsApp&SPHostUrl=https://yourtenant.sharepoint.com/sites/Forms/Swetha/TestSite&remoteAppUrl=https://formso365.nintex.com&ctype=0x0100B52DC7B8A6EC4040BAB784010BB614F9&wtg=/sites/Forms/Swetha/TestSite/Lists/EmployeePromotions/Item/&mode=1&List=6aa1b4ba-ca60-4434-93d6-f4146d026075&ID=‍{Current Item:ID}‍&Web=f8661cf5-7a18-430f-9f92-262850e0087d

EditItemURL2.png

 

While this post talks about the SharePoint master list item and its link to edit form, you can do this same exact set of steps for allowing your users to open the Workflow Task items in Edit mode as well with a quick hyperlink.

Once again with dynamic ‘Build string’ action. Provided you have a ‘Assign a task’ action where you have managed to capture TaskID, and want to provide a quick edit link to the ‘next’ approver, to do the above

1) Get the ID of the task item (taskID – GUID variable value and ‘Advanced Lookup’ to ‘Workflow Task’ List to get the ID)

2) ‘Do Calculation’ to get  the task’s ID ‘plus’ 1

3) Build the string doing the same steps as above from the Edit workflow task Item link.

This logic for task item edit hyperlink will ONLY work if it is the second task in the sequential/ serial workflow…that was my requirement, if I have any others in future, will post another blog! In the meantime, feel free to share your workarounds!

Good luck!!!

#Nintex connect community

Considering I’ve trained and continue to train several power-users in Nintex and enabling them to be their department superstars who address their complex, day-to-day business workflow and form requirements using Nintex for Office 365 apps as well, I wanted to share this blog link on Nintex community manager Frank Field. He is amazing with his responsiveness to questions.

https://www.nintex.com/blog/whats-it-like-to-be-nintex-connect-community-manager/ 

Feel free to join Nintex connect community to get help from various SMEs in the community. They are always willing to help and get back with answers to address the issue you are facing.

Frank Field is an amazing community manager who is always available to help.

Personally, for me, Nintex community support has been exceptional, if you wish to join the same, check this link out: https://community.nintex.com/welcome

Happy collaborating and stay warm.

Public Speaking Tips from Nintex Experts

Speaking in front of a group of people can be nervous experience for some of us and its totally OK. Not everyone is devoid of stage fear/ fear of presenting ideas. Perhaps we feel like our ideas aren’t worth sharing, or maybe we don’t feel confident about our presentation skills or it could be anything else that puts a mental block for us when we ponder speaking speaking in front of a group of people.

Whatever be our case or story, anyone who wants to speak in front of anyone else, will definitely benefit from checking out this awesome #Nintex blog on public speaking, where Nintex experts share their tips and tricks that works for them. We can learn from each other and a lot from this post.

11 Public Speaking Tips from Nintex Experts

Feeling #excited and fortunate to be included in the list and happy to contribute. Thanks Tammy Batey! 🙂

If I can speak, so can you!  If you have a story to tell (Office365/SharePoint/Nintex related – lessons learnt, solutions implemented, hurdles crossed) and want to share, email me at swetha.sankaran@gmail.com

Perhaps we can have you share your story in our next #WSPDC, #FEDSPUG  usergroup session in our 15 minutes of fame section or a full section even! Limitless possibilities. 🙂

Peace, love and happy SharePointing on the cloud. Oh! and a very happy new year!

Swetha

#leadership, #office365, #public-speaking