One question I get frequently is how to build real world forms with SharePoint. This involves in particular organizing the fields in logical blocks (e.g. Street/City/Zip Code/State) and tweaking the layout to have multiple columns or interactive zones (e.g. tabs).
Until last year, InfoPath was the official go-to application for form design. You can still use it today, however in January 2014 Microsoft announced that InfoPath was retired. Some InfoPath fans will tell you that with Microsoft’s deprecation policy you are still safe for 10 years… What they don’t mention is that this is only true if you decide never to upgrade to new SharePoint versions!
Considering the lack of visibility on the future of SharePoint forms, I have decided to explore what could be done with my SPELL library.
SPELL already includes several building blocks to help with forms, in SP 2007, SP 2010, SP 2013 and Office 365. It can parse a default SharePoint form page, identify field types (e.g. text, drop-down choice, multi-lookup), and add behaviors like cascading selects or pre-populated fields. Also, I already have a solution for form layouts, however just limited to tabs. The new solution will expand it, to allow for more custom layouts.
To accommodate the new features, SPELL is going to evolve:
- the existing Form module will be renamed Form Behaviors: cascading selects, item ID, pre-populated fields, read only fields, color coding, etc.
- the new module will be called Form Layout and will include Form Tabs.
To get started, I have built a proof of concept. Feel free to play with it, and let me know what you think! Eventually the plan is to release a gratis and a commercial version, just like I already did with Tabs and Cascading Selects.
A quick walk through:
- Move the logo to confirm that your browser supports drag and drop
- In the Form Editor, select the target form, the layout and the name of each zone. Then press “Retrieve Form and Render Layout”.
- Drag and drop the fields to add them to the custom form layout. Double click on a field name to switch to a stacked display (example: Task Name in the screenshot below).
What if my browser doesn’t support drag and drop?
The proof of concept is not going to work. You’ll need to switch to a browser that supports the HTML5 standard (yes, HTML5 officially became a standard…today!), or add the feature via a polyfill.
Note that:
- a fix for older browsers will be included in the final solution
- only the designer – not the regular end user – needs the drag and drop feature.
Tentative release schedule:
- End of 2014: alpha version, available to existing SPELL users.
- Early 2015: the SPELL Form Layout will be offered for on premises environments (SP 2007, SP 2010, SP 2013).
- For new SPELL users on Office 365, I plan to make the solution available in the second half of 2015.
Path to SharePoint... and Beyond! 
This sounds interesting. Will this integrate with SP workflow?
Thanks for the comment Paul.
The solution only modifies the look on the page, behind the scene all the SharePoint features will keep working as usual. Do you have a specific workflow action in mind?
Tried playing and looks good but missing grouping and optional section functionality in designing forms.
Hi Lotus,
Could you please be more specific, and maybe point me to examples on the Web?
I only included two layouts in this proof of concept, but the idea is that each organization will build their own set of layouts. The purpose of the tabbed layout is to show that the page can be interactive, not just static.
Thanks for the feedback!
Great proof.
I had a question related to an earlier one you answered on workflows. I understand that your proof only affects the look and feel of the form. And that underlying workflows will still run as normal. My question is how would your solution support “in-form” approvals. I am thinking along the lines of supporting the ability to have hidden fields which only become visible when a field is changed. For example Status to “Approval In Progress” Which would then show the fields which are related to the approving the form (in addition to the ones available for a new form or an edit form). I guess the ultimate question is will your solution support this type of interaction?
Once again great proof and I cannot wait to see the Alpha version.
Good question! You can implement this with the “Form Behaviors” module that is already available today. Beyond standard behaviors like cascading selects or displaying the item ID, this module has a “Custom Action” that allows you to plug in your own scenario.
If a behavior is frequently requested, then I can add it as a built in action. But when it comes to conditional formatting, people are very creative and it’s good to keep that flexibility.
Managing such custom actions means that you need to dig into code (just like when you use Client Side Rendering in SP 2013), so this is not for the average end user.
Thanks for the comment!
It is possible to have easy tabs which are linked to a page url rather than a webpart?
It is possible, and the commercial version (SPELL Tabs) allows a mix of inline tabs and external links.
You could also have external links exclusively, but in this case you don’t really need the Easy Tabs / SPELL Tabs. A static tab menu would be good enough.