Quick & Easy SharePoint Forms with StratusForms

Quick & Easy SharePoint
Forms with StratusForms
April Dunnam
Lead Consultant/Developer at ThriveFast

MAKE SURE TO THANK OUR SPONSORS!
WEAR YOUR NACS WRISTBAND FOR
LUNCH SPECIALS ON BRANSON LANDING
PLAY VENDOR BINGO FOR YOUR
CHANCE TO WIN A i7 16GB 1TB SURFACE
BOOK

About the Presenter
• SENIOR CONSULTANT/DEVELOPER AT THRIVEFAST
• WORKING WITH SHAREPOINT SINCE 2007
• ACTIVE BLOGGER, SPEAKER AND USER GROUP LEADER
• KARAOKE QUEEN
@aprildunnam
www.sharepointsiren.com
www.thrivefast.com

What is StratusForms?
• Free jQuery library
• 100 % Client side form creation
• Build Forms using standard
HTML, CSS and JavaScript
• Utilizes SPServices for
SharePoint CRUD
operations
• You can write additional
business logic using
JavaScript to interact with
other systems
• www.stratusforms.com

Functionality
• Works with SharePoint 2007, 2010, 2013, 2016 & O365
• Stores all form fields in one non-proprietary JSON object
• Can promote fields in the form to SharePoint list fields
• Supports many field types including People Pickers (2013 only)
• Other features
• Repeating content
• Parent/Child List Relationships
• Form and Field encryption/password protection
• File Upload

Limitations
• No visual editor
• Requires developer skillset
• Documentation
• Not all features are documented
• Mostly videos or slack channel – email info@stratusforms.com to join
• No support for Managed Meta Data
• More steps required to work with O365 Modern Sites
• Can deploy the Content Editor SPFX web part to work with modern sites
• https://github.com/rob-windsor/ContentEditorSpfx

StratusForms vs PowerApps
StratusForms
• Free
• Works on SP 2007, 2010, 2013, 2016, O365
• Requires HTML/JS/CSS skills
• Can add code to connect to other systems
• Can design responsive form to be mobile
friendly
• Use if on SP 2007 – 2016 or if PowerApps
doesn’t fit your needs on SPOnline
PowerApps
• Requires O365 Subscription
• Only works in O365 although you can
connect to on-prem SP
• No development skills required
• Multiple connectors to other systems with
no code required
• Native desktop and mobile apps
• Consider it first if on SPOnline Modern Site –
Microsoft is pushing this as the InfoPath
replacement

Getting started with StratusForms
• Download required files and sample forms
• https://github.com/mrackley/StratusForms
• Has dependencies on Jquery, Jquery UI and SPServices
• Set up your back-end SharePoint List
• Create Multi-Line Plain Text Field called “StratusFormsData”
• This is where the JSON object is stored
• Create fields for any data you want promoted to the list

Code Basics
• Every element needs a unique ID <input type=“text” id=“Email”>
• Make a field required using a class <input type=“text” id=“Email”
class=“required”>
• Promote a field to a SharePoint List Field (use INTERNAL field
name)
• <input type=“text” id=“Email” class=“required” listFieldName=“Title”>
• Get internal field name by going to List Settings - > Click the name of your
column and look for Field= in the address bar

Tips to Make Life Easier
• Always start with the minimal.js example and see if you can get that
working first. Build from there.
• Triple check your column names to make sure you have the correct
internal field name.
• Order Matters!
• Make sure you’re script link paths are valid and in the right order
• For example: jQuery and SPServices needs to run before StratusForms JS
• Developer Tools are your friend
• Caching will get you. Added something and it’s not showing up? Clear
your cache
• It is case sensitive. Check your column names and code to see if they
match
• Reduce HTML creation time by using a generation tool like Bootsnip or
StratusForms Builder

Initializing a Form
$("#SFForm").StratusFormsInitialize({
htmlForm: ”<link to html>",
queryStringVar: "formID",
listName: ”<name of your list>",
completefunc: function()
{
}
});
});

Add/Update a Form
function SubmitForm()
{
$("#SFForm").StratusFormsSubmit({
listName: ”<list name>",
completefunc: function(id) {
alert("Save was successful. ID = " + id);
window.location = window.location.pathname +
"?formID=" + id;
}
});
}

Field Validation
• Custom field validation
<input type=“text” id=“Email” class=“required”
listFieldName=“Title” validate="validEmail">
• Built in validation functions
• Date - validDate
• Email - validEmail
• Phone # - vaildPhone
• Social Security Number - validSSN

People Picker
<div id="myID" listFieldName="<internal field name of person field>"
data-StratusFormsType="PeoplePicker"></div>
• Must include SharePoint client libraries for it to work:
<script type="text/javascript" src="/_layouts/15/clientforms.js" ></script>
<script type="text/javascript" src="/_layouts/15/clientpeoplepicker.js"
></script> <script type="text/javascript" src="/_layouts/15/autofill.js"
></script> <script type="text/javascript"
src="/_layouts/15/clienttemplates.js" ></script>
• Must use ExecuteOrDelayUntilScriptLoaded instead of
$(document).ready to initialize your form to make sure the client
libraries are loaded first
ExecuteOrDelayUntilScriptLoaded(Init,"SP.js"); function Init() { //StratusForms
Initialization code goes here }

Setting People Picker Programmatically
//to set people picker to value of current user:
$("#<id of people picker
div>").StratusFormsAddCurrentUserToPeoplePicker();
//to set people picker to value of another user:
$("#<id of people picker
div>").StratusFormsAddCurrentUserToPeoplePicker(<id of user>);

File Upload
<div class="SFDontSave" id="<unique ID>" data-StratusFormsType="File" data-
StratusFormsFileOptions="{libraryName:'<name of document library>',
lookupField:'<internal name of lookup field in document library>',
displayOnly:false}"></div>
Parameters:
• libraryName: Name of the document library you created to store your files
• lookupfield: Internal field name of the lookup field you created in the
document library
• displayOnly: If set to “true” users will see a list of clickable links for the
uploaded files for the current form, but not see upload functionality. If set to
“false” users will see a list of clickable links for any previously uploaded files
AND an file upload element to upload new files.
• *files are not actually uploaded to the document library until the user
submits the form to save/update it*

Reporting
• Can utilize SharePoint views and your promoted fields
• jQuery DataTables and SPServices for additional reporting needs
• https://datatables.net
• http://sympmarc.github.io/SPServices/
• http://stefaanvangoolen.com/jquery-datatable-with-spservices-data-on-a-
sharepoint-page/

Demo: Building Your First Form with
StratusForms
Minimal and Timesheet examples
Download at https://github.com/mrackley/StratusForms

DEMO: Form Builder
• Allows you to configure your list and
columns and it will spit out the
necessary HTML/JS
• NOTE: The link is hidden but it’s still
accessible if you have the path. The
code it spits out references an old
version of StratusForms (1.2) where the
latest version is 1.5. If you want to
utilize features in the 1.5 version you’ll
need to update your script references
• Doesn’t have all of the features but it
will get you 75% there
• http://www.stratusforms.com/formbuil
der.html

DEMO: Field Reporting Solution
Custom Responsive Daily Field Report Using StratusForms

Thank You!
www.sharepointsiren.com
www.thrivefast.com
@aprildunnam
April.Dunnam@thrivefast.com

MAKE SURE TO
ATTEND THE
ATTENDEE
PARTY FRIDAY
NIGHT AT
7:30PM AT
BLACK OAK
GRILL FOR
GREATE LIVE
MUSIC
GET YOUR
FREE DRINK
TICKETS AT THE
END OF THE
DAY SESSION

PRIZE DRAWINGS HAPPEN AFTER THE END OF THE DAY SESSIONS ON FRIDAY AND
SATURDAY. YOU MUST ATTEND THE END OF THE DAY SESSION TO WIN.

Quick & Easy SharePoint Forms with StratusForms

More Related Content

Similar to Quick & Easy SharePoint Forms with StratusForms (20)

More from April Dunnam (13)

Recently uploaded (20)

Quick & Easy SharePoint Forms with StratusForms

Editor's Notes