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.