Submit a new idea! Ideas for #Office365 #SharePoint custom feedback using lists,CSS & scripts

Its a beautiful day outside. Drizzles with a sweet sweet rainbow. Looking out longingly I got an idea,

How about we work on a fun form exercise?! It’ll be pretty, it’ll be functional and it’ll be in #Office365 with simple controls and script. Sounds fun no?

I thought it was. I was also inspired by Netflix, Starbucks and all things good and great in this world including but not limited to W3CSS, Bootstrap, JS and oh wait! SHAREPOINT and FORMS!!!

Since the code part is pretty self explanatory, am not gonna delve(see what I did there wink wink) deep in it. Still, to recreate this pretty form, you need to
  •  Create a list (SubmitYourIdea in this sample and yep am pretty creative)
    • Structure of the list is pretty straightforward, a few custom columns depending on what you want to gather from contributors:
      liststruct.png

       

  • Create a script file in your Site Assets (or anywhere else you please) call it PutYourThoughts.js (cause… why not?) You are welcome to copy the script and edit to suite your taste. I just chose something fun to do as a proof of concept and share it with my interweb peeps.
  • Create a site page and include the script file reference in a Content Editor Web Part/Script Editor web part. Save and page and here you go, a  completely responsive form for your folks to submit ideas on new projects/categories/just badmouth how awful the current project sucks. Freedom of speech rules!ideaform.png

Where is the Netflix and Starbucks connection you ask? Well, the form theme is inspired from them. So thanks folks!

What are the other uses/ possible derivatives using this idea?

  1. You can collect feedbacks(on your sites, projects, etc.,)
  2. Use this as a way to gather ideas from your team/staff
  3. Connect this with a #flow and extend its usage more! 🙂

Enjoy your new incoming ideas! Keep learning and sharing. Almost forgot, here is the solution in action with a not so subtle hint of enhancement to the code.

 

#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!