Panels UI Magic with Nintex Forms for Office 365

Document created by swethasan on Jun 6, 2016Last modified by eharris04 on Jun 6, 2016
Version 3Show Document
  • View in full screen mode

Multiple panel buttoned layout to traverse through various sections of your Nintex forms for Office 365

Author@swethasan (Swetha Sankaran, President-Women In SharePoint DC)
Long DescriptionCreate 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. Customizations 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.

Support Info

Office 365 SharePoint SME| swetha.sankaran@gmail.com

Compatibility

Nintex Forms for Office 365

Platform

SharePoint Online

Screenshots

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

When you click + New Item > Home Panel

When you click the 1st button:

When you click the 2nd button:

 

When you click the 3rd button:

 

Clicking save will submit the entered data to your SharePoint online list.

Here is the sample rule for the panel:

Additional Information

CLICK HERE to watch the video demo of the Form in action.
Be 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 & CSS

function 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;
}

Nintex Xchange Terms of Use Policy

Nintex makes no warranty or guarantee about the reliability, performance, quality, or functionality of any assets, and any assets you install are therefore provided as is. By downloading this asset, you agree to the terms of use.

4 people found this helpful

Attachments

Outcomes