This project has moved. For the latest updates, please go here.

SPEasyForms is a Rapid Application Development (RAD) tool for applying jQuery constructs like tabs and accordion to SharePoint forms without necessarily knowing anything about JavaScript or HTML or CSS.  It also allows you to configure conditional visibility rules for fields in the form.  So you can say “make the title editable by owners, viewable by members, and hidden for everyone else."  In a future release we also plan to allow you to configure delegate controls, which will change the behavior of the out of box SharePoint controls used to enter data into a particular field.  For instance, you could configure a text field with type ahead with the data coming from a field in another SharePoint list, or tie two drop down lists together as cascading drop downs.  But who cares about a future release, I assume you’re here because you want to see what the thing does right now, and before we can get into that we need to cover some basic things like system requirements and how you can install the danged thing.

System Requirements

SPEasyForms has currently only been moderately tested on Office 365 and lightly tested on SharePoint 2010 and 2013.  If you want to try it out now on 2013 or 2010, feel free and post any issues you encounter to the discussion board and we’ll address them when we can.  There are no plans to support SharePoint 2007.  I don’t think it would take a lot of work to get it working on 2007, but I don’t even have a 2007 test environment.  Other than that, the only thing you need to install SPEasyForms is a site collection and sufficient privileges to install and activate a sandbox solution.

Installation

Download the latest recommended release from https://speasyforms.codeplex.com and follow these steps to install it:

  1. Go to the root site of your site collection and go to Site Settings –> Web Designer Galleries –> Solutions.
  2. Click the Upload Solution button in the ribbon.
  3. Browse to the SPEasyForms.wsp file you downloaded from CodePlex and hit OK.
  4. When the upload finishes, click the Activate button from the ribbon.

Now that wasn’t too painful, was it?  To confirm that it appears to be working, go to a list in your site collection and look for a button in the Settings panel of the List or Calendar ribbon:

image

Click the button and you should see the SPEasyForms Settings page, which looks something like this:

Settings

Now would be a good time to mention the limitations of the solution.  SPEasyForms is intended to work on the out of box new, edit, and display forms for most list types.  It does not work on Discussions, I don’t expect it to work on Surveys, and there are a whole bunch of other list types it hasn’t been tested on.  Once its been tested we will disable the ribbon button on lists where we know it will not work.

For those that want the more technical skinny, and whose eyes don’t glaze over when they hit words like XSLT and CSS, the actual constraints are as follows:

  • The form should be in a table with the CSS class ms-formtable.
  • Each row should contain a single field, and be comprised of two table cells with the CSS classes ms-formheader and ms-formbody in that order.
  • The row should contain somewhere in it’s source the texts [fieldname=”<the field display name>”], [fieldinternalname=”<the field internal name”], and [fieldtype=”<sharepoint field type>”].  The names in these expressions are case insensitive, the values are not.
  • The actual name of the ASPX page should contain new, edit, or disp, case insensitive, and it would be helpful if it was actually the new form if it contains new, the edit form if it contains edit, etc.

These constraints are all met by most out of box list forms.  They are not met, however, by SharePoint designer generated custom forms, unless you do some manual messaging of the generated XSLT.

Anyway, now that you’ve got it installed, there are really only a couple of things you can do to get started on the settings page, either add a container like tabs or create conditional visibility rules for a field.  We’ll start with adding tabs.

Adding Tabs

To add tabs:

  • Click the Add button.

image

  • Select Tabs from the drop down list and click Add.

image

  • Enter tab names one per line and hit OK.

The settings page should now look like this:

image

The left-hand side of the settings page, which is the editing surface, now shows a tabs container at the bottom with two tabs.  The right-hand side of the page, which is a WYSIWYG pane at least for basic form structure, shows what the form looks like.  Note also that the save button is now active because you have changes that need saving.  It becomes inactive whenever you save and active whenever you have pending changes.  At this point there is quite a bit you can do, but I’m betting you are more or less thinking “great, so I have 2 empty tabs, big whoop!”  You can fix that pretty quickly by dragging and dropping fields from the default form to the tabs.

image

In fact, you can drag and drop fields from any field collection to any field collection, or even reorder fields within a field collection by drag and drop.  And as soon as you drop something, the WYSIWYG updates to reflect your changes.  If you were actually thinking “big whoop” a couple of seconds ago, I think at least an ooh aah would be in order about now.  Well, I thought it was cool anyway.

But as the info-mertials say, wait that’s not all.  You can add as many containers as you want.  You can also reorder the containers by drag and drop.  You can collapse all containers (hide the fields) with the Collapse button (or expand with…Expand), toggle individual containers collapsed status by double clicking the container, or toggle individual field collections by double clicking the collection name.  Below is an example of a four container form (the bottom 2 collapsed in the editor), which demonstrates all three container types currently implemented.

image

Admittedly, it is not the most realistic example, four containers for nine fields is probably overkill.  But I’m trying to demo SPEasyForms here, not win a blue ribbon for most aesthetically pleasing form.  So what are all of those other little buttons on the containers?  They are:

  • image   Add more tabs (or columns or content areas).
  • image   Delete this container or tab/content area (depending on where it is).
  • image   Edit the name of this tab (or column or content area).

And the last button is for creating conditional visibility rules, which gets its own section below.  Anyway, I think you now have enough information to start using the danged thing.  Don’t forget to save.  There is no confirmation when leaving the page…yes, I know we need to fix that.  There is also no delete confirmation dialog…yes, I know we have to fix that too.

Conditional Visibility

To configure conditional visibility rules for a field:

  • Click the image button next to the field in the editor panel.

image

  • Click the image plus button on the dialog.

image

  • The only required field for a rule is the state, choose either Hidden, ReadOnly, or Editable.  If that’s the only thing you fill in, the rule will apply to all users on all forms.  Click OK.

image

The conditional visibility dialog now shows the rules for the current field in a list.  The above rule will hide the field Title on all forms.  There are a couple of other options on the add rule dialog, so lets create a more complex rule:

  • Click the image plus button on the dialog again.

image

  • Select ReadOnly for the state.

image

  • Applies to is a type ahead entity picker for SharePoint Site Groups.  Start typing the name of one or more SharePoint groups and select it from the drop down.  You can also check the box labeled author to apply this state to whoever created the item regardless of their group membership.
  • For forms, you can apply this rules for any combination of the new, edit, and display forms.  The default is all three.
  • Click OK.

That brings us back to the conditional visibility dialog, where there are now two rules:

image

When a user comes to a form, for each field for which there are conditional visibility rules configured, the first rule which matches the current user is the only rule that will be enforced for that field.  That means the order for the fields is very important, you want to go from very specific rules to very general rules.  It also means the above rules don’t make sense; the second rule will never be reached, since the first rule applies to everyone.  You can reorder the rules by drag and drop:

image

The other buttons next to each rule in the list are:

  • The  image button takes you to a dialog where you can edit the rule.
  • The  image deletes the rule.

Finally, you can get a list of all configured rules for all fields on the main settings form, by clicking the Conditional Visibility tab at the top of the WYSIWYG.  This is a static list, nothing is sortable or editable, to edit you still need to launch the dialog for a given field from the editor panel on the left-hand side.

image

That’s pretty much it for an overview of SPEasyForms functionality.  Hope you like it.  Rate it, leave comments in the discussion board, and peace out.

Last edited Jul 25, 2014 at 2:40 PM by mcsheaj, version 14