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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s