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 )
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:
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!