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

SPEasyForms is a tool for applying jQuery constructs like tabs and accordion to SharePoint forms without necessarily knowing anything about JavaScript or HTML or CSS.  The things you can configure fall into 3 broad categories:

  • Containers - the ability to organize fields in a form in some way; current implementations include:
    • Tabs - an implementation of jQueryUI tabs
    • Accordion - an implementation of jQueryUI Accordion
    • Columns - the ability to put fields into 2 or more columns instead of one per row (technically, one or more, but one column doesn't really buy you much)
  • Conditional Visibility - control when a column is visible based on the SharePoint group membership of the current user and/or the current value of another field in the form
  • Field Control Adapters - modify the controls users see in the form to input data; current implementations including:
    • Cascading Look Ups - join two look up fields such that the values available in one look up are trimmed based on the value selected in another look up
    • Autocomplete - provide type ahead functionality in a text field based on values pulled from a field in another list on the same site

There is a full fledged user manual that explains this functionality in nauseating detail, but it's approximately 40 pages.  This document is intended to provide a light overview of this functionality to get you started with using SPEasyForms quickly.

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, Library or Calendar ribbon:

image

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

Settings

Now that you’ve got it installed, I'll take you through quick step-by-step instructions for configuring each of the three broad categories, starting with configuring 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 properties pane, 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, which is no different at this point because empty containers are not drawn.  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 I’m betting you are more or less thinking “great, so I have 2 empty tabs that don't even show in the form, big whoop!”  You can fix that pretty quickly by dragging and dropping fields from the default form to the tabs.

All edits are done in the properties pane on the left side of the screen.  The WYSIWYG pane simply displays the configuration.  No edits are performed in the WYSIWYG pane.

image

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.

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). Note: there are no delete confirmation dialogs, but there are undo/redo buttons on the ribbon, which is even better.
  • image   Edit the name of this tab (or column or content area).
  •    Add conditional visibility rule.
  •    Configure field control adapter.

The last two buttons will be described in their own sections below.  Anyway, I think you now have enough information to start using the danged thing.  Don’t forget to save, after which you can go and open the new form on the list you just configured and observe the fruits of your handiwork.

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.  Since title is generally a required field, this rule probably isn't such a good idea, as nobody will be able to submit a new item because they will get a validation error (which won't even be displayed as the entire row is hidden in a form when you hide a field), so keep that in mind. 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 button in the ribbon.  This is a static list, nothing is sortable or editable, but you can double click a rule to launch the visibility rules dialog again.

image

Field Adapters

As mentioned earlier, there are two field adapters currently implemented. I'll quickly describe adding an Autocomplete adapter. To do that:

  • Click the shuffle icon next to any SPFieldText field (I'll configure the Title field).

  • Choose the list you want to reference for the Autocomplete field. There will be a slight delay as I get information about the list from the server. Then choose the field you want to reference (note: if the form column drop down is empty, click on cancel, click on "Clear Cache", and try again). I have a list of Standard meetings and the title field contains meeting titles so that's what I've used:

  • Once you've done that, the Field Adapters view will look like:

  • Once you've saved the configuration, open the new form of list and the Title field should have type ahead functionality starting at 2 characters:

Note: If the shuffle icon does not appear next to a field, it's because there are no adapter implementations for that field type.

To remove an Autocomplete adapter from a field, either click the shuffle icon next to it in the properties pane, or double click on it in the Adapter view to bring up the Autocomplete dialog. Then blank out the Lookup List field and hit OK and the adapter will be removed.

Wrap Up

That’s pretty much it for an overview of SPEasyForms functionality.  Hope you find it useful.  Rate it, leave comments in the discussion board, add issues if you encounter bugs or to request feature enhancements etc.  If any of the above isn't clear, check out the corresponding section in the full blown user manual, and hit me up on the discussion board if it still isn't clear.

Last edited Jan 8, 2015 at 12:45 PM by shearersj, version 5