AnsweredAssumed Answered

How to implement CRUD Share page with forms engine

Question asked by alejandrogarciaseco on Jan 11, 2013
Hi folks,

I'm trying to find out the best way for using the forms engine within a CRUD functionality, providing the best user experience as possible.

I have created a custom Share page which will be used as site administration page. One of its functionalities is the management of members of the site, therefore it will allow the site administrator to search current members as well as view details, create, edit, or delete members. I have taken as model the out-of-the-box users management in the administration console as per of the functionality is pretty similar.

Users management in administration console doesn't use the form engine, but I would like to use it for user creation, edition and view of its properties. I'm wondering if somebody has implemented a similar functionality by taking advantage of the forms engine, as well as there already exists in Share a similar one but I found nothing.

After have spent some time reading about forms engine architecture, investigating and creating some pilots I came up with the following approaches:

[size=150]Approach 1[/size]
To provide a better user experience, I would like to preserve the flow of the original administration console's users management which dynamically loads the required content of the page by performing AJAX requests returning JSON responses. The only way I presume I can do it is by performing asynchronous requests to the forms component and then add the returned HTML content into the current page. For example, a request to /share/service/components/form?itemKind=node&itemId=workspace%3A%2F%2FSpacesStore%2F3152987c-4cc9-49c4-b934-4ad293e73884&mode=create&htmlid=to_be_replaced_with_current_htmlid would return a form with the data of a user:


   <style type="text/css" media="screen">
      @import url("/share/res/yui/calendar/assets/calendar_aa6d35544845f9e37c2e63f30c3fc.css");
      @import url("/share/res/components/object-finder/object-finder_6ace14eb15aeb2f5fc580252b2e234a.css");
      @import url("/share/res/components/form/form_b0441863b8c8626acf9439fcf5430e3.css");
   </style>

   <script type="text/javascript" src="/share/res/components/form/form_759f5c75621bd2fdc25f232733606013.js"></script>
   <script type="text/javascript" src="/share/res/components/form/date_c5fc1a135563584dfe4fa2ebfda6d7c7.js"></script>
   <script type="text/javascript" src="/share/res/components/form/date-picker_867acd42dd913caf3fdf3b5fb915b6b.js"></script>
   <script type="text/javascript" src="/share/res/components/form/period_6687cd14ce6f0519843823e177d338.js"></script>
   <script type="text/javascript" src="/share/res/components/object-finder/object-finder_7613d05fefd03476b1aa73321a9de750.js"></script>
   <script type="text/javascript" src="/share/res/components/form/rich-text_832156d1b3b4b7b336b9fcfd13a7e98.js"></script>
   <script type="text/javascript" src="/share/res/components/form/content_9080c79dc38a9d8a6ce5405a1fc53f.js"></script>
   <script type="text/javascript" src="/share/res/components/form/workflow/transitions_c015c3dc53be0a35a52e8d10f45cbd.js"></script>
   <script type="text/javascript" src="/share/res/components/form/workflow/activiti-transitions_5da4db124822ea4a3062f14ab3402594.js"></script>
   <script type="text/javascript" src="/share/res/components/form/jmx/operations_7cbe27c4e529dd693674fe2a8ff1bd.js"></script>
   <script type="text/javascript">//<![CDATA[
//]]></script>





<div class="form-field">
         <label for="whatever_prop_cm_firstName">First Name:<span class="mandatory-indicator">*</span></label>
      <input id="whatever_prop_cm_firstName" name="prop_cm_firstName" tabindex="0"
             type="text"
            
            
             value="Administrator"
             title="The person's first name"
             
             
              />
</div>  
   </div>
      </div>
     
   <div id="whatever-form-buttons" class="form-buttons">
         <input id="whatever-form-submit" type="submit" value="Submit" /> 
   </div>
         </form>
   </div>


Then that HTML response could be included in a wrapper div for example.

[size=150]Approach 2[/size]
Create an additional page made up of three different regions. Each region will bind the forms component but with different initialization parameters: one region for view mode, another for create mode and another for edit mode. Something like:

      <component>
         <region-id>view-user</region-id>
         <url>/components/form</url>
         <properties>
            <itemKind>node</itemKind>
            <itemId>{nodeRef}</itemId>
            <mode>view</mode>
            <submitType>json</submitType>
            <showCaption>true</showCaption>
            <showCancelButton>true</showCancelButton>
         </properties>
      </component>
     
      <component>
         <region-id>edit-user</region-id>
         <url>/components/form</url>
         <properties>
            <itemKind>node</itemKind>
            <itemId>{nodeRef}</itemId>
            <mode>edit</mode>
            <submitType>json</submitType>
            <showCaption>true</showCaption>
            <showCancelButton>true</showCancelButton>
         </properties>
      </component>
     
      <component>
         <region-id>create-user</region-id>
         <url>/components/form</url>
         <properties>
            <itemKind>node</itemKind>
            <itemId>{nodeRef}</itemId>
            <mode>create</mode>
            <submitType>json</submitType>
            <showCaption>true</showCaption>
            <showCancelButton>true</showCancelButton>
         </properties>
      </component>

Requests to this additional page would be performed from the search page providing the appropriate parameters for each scenario (view, create or update user). Regions could be shown or hidden using custom evaluators in the template-instance definition, for example.

I would like to hear from developers experienced with forms engine what's the better way of implementing such solution. Although I wasn't able to find any resource (extension, blog post, tutorial…) about a similar functionality made up with forms engine, I believe it is reasonable anybody have had to do anything similar before.

Thanks in advance.

Outcomes