About Me

Joe McShea If you didn’t already get it from the blog title, my name is Joe McShea. I am an SharePoint consultant/software architect and founder of IntelliPoint Solutions LLC, a northern Virginia based software consulting firm focused on helping customers deliver enterprise collaborative software solutions on the Microsoft stack. I have been designing and developing software and other technology solutions for more than 20 years. Since 2007, I’ve done quite a lot of SharePoint work.

Historically, I’ve done mostly farm solutions in C#, sometimes with a little JavaScript mixed in to spice things up. Clearly the direction Microsoft is going with SharePoint Online calls for a change, so I’ve started focusing a lot of effort on No Code Sandbox Solutions and the App Model. Towards that end, I’m also the author of an open source project for SharePoint called SPEasyForms, which is the initial focus of this blog, although eventually I plan to blog on other SharePoint Online and SharePoint 2013/2010 development topics.

SPEasyForms is an open source solution for Office 365 and SharePoint 2013 and 2010, hosted on CodePlex. It is a tool for customizing SharePoint new, edit and display forms through a list settings page. No code is required; it is intended to be for power users and administrators to use to customize SharePoint forms without needing to know JavaScript, HTML, or CSS. Just deploy the solution, go to a list settings page, and configure things like tabs and conditional field visibility through a drag and drop GUI interface. It was also written to be extensible, and this site is intended to document how to code JavaScript extensions and plug them into SPEasyForms.

About SPEasyForms – Latest Stable Release! v2015.01.06
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.  It works on SharePoint 2010, 2013, 2016, and Online (Office 365).

The things you can configure with SPEasyForms 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 or containers into 2 or more columns instead of one per row (technically, one or more, but one column doesn’t really buy you much)
    • Stack (NEW!) – allows you to stack 2 or more containers on top of each other, so you can put multiple containers onto a single tab or accordion page.
    • Wizard (NEW!) – a specialty container that allows users to page through containers using next and previous buttons.
    • HTML Snippets (NEW!) – a specialty container, that doesn’t actually hold any fields, but allows you to inject arbitrary HTML into the page, including referencing external scripts and style sheets.
  • Conditional Visibility – conditionally format a field:
    • Based on various conditions like:
      • Membership in a SharePoint group
      • Which form is open (i.e. the new, edit or display form)
      • Comparing the values of other fields based on various comparison operators (i.e. make this field read only when the Color field is equal to Red), comparison operators include:
        • Equals – equals a string literal
        • Matches – matches a JavaScript regular expression
        • NotMatches – does not match a JavaScript regular expression
        • GreaterThan (NEW!) – greater than a string literal
        • GreaterThanOrEquals (NEW!) – greater than or equals to a string literal
        • LessThan (NEW!) – less than a string literal
        • LessThanOrEquals (NEW!) – less than or equals a string literal
        • NotEquals (NEW!) – is not equal to a string literal
* All comparison operators ignore case
** All comparison operators except Matches/NotMatches will check if both operands are valid dates and use date comparison, check if both operands are valid numbers and use numeric comparison second, and lastly use string comparison
    • Formatting Options:
      • Hiding a field completely
      • Making a field read-only
      • Highlighting a field in one of four colors
  • Field Control Adapters – modify the controls users see in the form to input data; current implementations include:
    • 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
    • Lookup Detail (NEW!) – allows you to pull in additional fields from a lookup list based on the value selected in a lookup field.
    • Default to Current User (NEW!) – pre-populate a user field with the current user on the new form.
    • Star Rating Adapter (NEW!) – can be applied to numeric fields. Fields are displayed as five stars and edited by clicking on one of the stars.

Most of the things marked (NEW!) were actually released in the updates package to v2014.01. The Stack and Star Ratings Adapter are actually brand new.

There is a full fledged user manual that explains this functionality in nauseating detail, but it’s approximately 45 pages.  There’s also a quick start guide, which provide a lighter overview of this functionality to get you started with using SPEasyForms quickly. The full manual is installed with the solution and available in the editor from the help button on the ribbon. There are also 4 approximately 10 minute videos that cover most of the material in the user manual.

7 thoughts on “About Me

  1. Hey Joe
    Cool – I know Scott Shearer.

    Was wondering if you could give me a heads up on problems with SPEasyForms going into non-edit state. Created 2 forms with couple of HTMLsnippet and multiple containers. Displayed fine. I then renamed several fields in my SharePoint lists.

    Although, the forms still displayed I can no longer edit the SPEasyForm. When and expand and show verbose many of the fields are colorized and non-editable. On the other form they are all non-editable. Any idea what might have caused this?

    Greg

    Like

    1. Hi Greg,

      I’m not sure what you mean by you can no longer edit the SPEasyForm? or the fields are non-editable? If they’re red in verbose mode, and you know that it’s because that field no longer exists, all you can do is drag it back to the default form which will get them out of the configuration. But if you only renamed fields, they shouldn’t be red in verbose mode. Renaming a field in SharePoint just changes the display name and I don’t use the display name for anything.

      The last ditch solution to any problem like this is delete the configuration and re-configure it from scratch. Just delete the spef-layouts-XXX.txt file from the site assets library and SPEasyForms should now come up clean. It’s not ideal, but I’m saving things about the list in the configuration (of course). If you change too many things in the list itself after configuring SPEasyForms, of course it’s going to get out of sync.

      Joe

      Like

  2. Hi Joe,

    In SPEasyForms, How can i expand All Accordion sections in my View form just like you are doing it in the design where there is a folder link in the ribbon. Is there a JQuery function i can call or is there a way to do it. Please Advise?

    Thanks

    Kauser

    Liked by 1 person

    1. Hello Kauser,

      Unfortunately, there isn’t a way to do this right now in SPEasyForms. The jQuery-ui Accordion does not support expanding more than one content area at a time. I’m not actually using the Accordion in my editor, the expand and collapse functionality on the properties pane is custom code.

      Since I did the Accordion in SPEasyForms, I have discovered there is a way to support this functionality, but it’s a bit of a trick and it’s not currently implemented in SPEasyForms. The SPEasyForms Accordion HTML Looks something like this:

      <div class='accordion'>
          <h3 id='accordionHeader1'>Title</h3>
          <div id='accordionContent1'>Contents</div>
          <h3 id='accordionHeader1'>Title</h3>
          <div id='accordionContent1'>Contents</div>
      </div>
      

      and then jQuery-ui is called like:

      $(".accordion").accordion({ active: 0 });
      

      This creates a single accordion, which only allows one content area to be open at a time. There isn’t any option or command to override this behavior. It’s frequently requested in the jQuery-ui forums, but their response has always been if that’s the behavior you want don’t use an accordion.

      The way to get around this is to make a slight change to the HTML, like so:

      <div class='accordion'>
          <h3 id='accordionHeader1'>Title</h3>
          <div id='accordionContent1'>Contents</div>
      </div>
      <div class='accordion'>
          <h3 id='accordionHeader1'>Title</h3>
          <div id='accordionContent1'>Contents</div>
      </div>
      

      Note that each content area is in it’s own div. Now when you say:

      $(".accordion").accordion({ active: 0 });
      

      it actually creates multiple Accordions, each with only a single content area, so each content area can be opened and closed independently. It still looks like a single Accordion, but the behavior is what you want. To expand all, the command is:

      $(".accordion").accordion({ active: 0 });
      

      (i.e. expand the first content area in each accordion), and to close them all:

      $(".accordion").accordion({ active: false });
      

      I have thought about adding another container to SPEasyForms that uses this technique, called something like CollapsibleSection, but there is no such functionality in SPEasyForms right now.

      Joe

      Like

  3. Joe;
    First, thanks so much for this solution. It has been really useful. Do you have a CSS cross reference for the form field names, form fields text, fonts, etc. Thanks so much. Patrick

    Like

    1. Hi Patrick,

      You’re welcome!

      I do not. Most of the CSS is handled by the jQuery-UI theme, which is well documented in the jQuery-UI CSS Framework documentation, and there are numerous articles on the web going into more detail.

      I do have my own style sheet too, which is about 150 lines non-minified. This mostly handles margins and padding for things like nested containers etc., but there are a few other things like the field names are bold because of this style sheet just because that’s my preference (but it’s a dubious choice given issues like accessibility). I haven’t documented this CSS.

      And of course, the container code spits out a lot of HTML with a lot of classes so you can easily target all tabs, or a particular tabs, or a single tab etc., but I haven’t really documented this either. I do show some examples of targeting containers in the HTML Snippet Container post on this site and in the built-in documentation, but it’s very light and hardly what you’re asking for.

      I’d be happy to answer any specific questions you have regarding the SPEasyForms specific CSS (I’m no expert on the jQuery-UI CSS, I basically just use the theme roller for modifying this), and maybe in the process I’ll end up producing this documentation.

      Joe

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s