Tabbed forms in Alfresco 5.0

[h_john]

Hi.

I have a large alfresco form in my project and I`ve decided to make tabs for group of fields.

I found some information here https://community.alfresco.com/community/ecm/blog/2013/10/16/a-generic-tabbed-template-for-complex-l... and  Forms Examples

But in the first case there are no files to download on http://code.google.com/p/tabbed-form/source/checkout and the second one I`ve got a problem with installing it on me Alfresco 5.0 server.

Can some one help me with it? Now I`ve already made some changes in tab-edit-form.ftl   and now I can see the form with tabs, buttons, but I can not change view between tabs and don`t see form fields at all.

Here is my tab-edit-form.ftl

<#import "/org/alfresco/components/form/form.lib.ftl" as formLib />
 
<!-- Dependency files for Tabview -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/tabview/assets/skins/sam/tabview.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/tabview/tabview-min.js"></script>
 
 
<#if error?exists>
   <div class="error">${error}</div>
<#elseif form?exists>
 
   <#assign formId=args.htmlid + "-form">
   <#assign formUI><#if args.formUI??>${args.formUI}<#else>true</#if></#assign>
 
   <#if formUI == "true">
      <@formLib.renderFormsRuntime formId=formId />
   </#if>
    
   <div id="${formId}-container" class="form-container">
       
      <#if form.showCaption?exists && form.showCaption>
         <div id="${formId}-caption" class="caption"><span class="mandatory-indicator">*</span>${msg("form.required.fields")}</div>
      </#if>
          
      <#if form.mode != "view">
         <form id="${formId}" method="${form.method}" accept-charset="utf-8" enctype="${form.enctype}" action="${form.submissionUrl}">
      </#if>
       
      <div id="${formId}-fields" class="form-fields">  
        <div id="${formId}-tabview" class="yui-navset">  
            <ul class="yui-nav">
                <#list form.structure as item>
                    <#if item.kind == "set">
                        <li <#if item_index == 0>class="selected"</#if>><a href="#tab_${item_index}"><em>${item.label}</em></a></li>
                    </#if>
                </#list>
                <li><a href="#tab_others"><em>Others</em></a></li>
            </ul>                     
            <div class="yui-content">
                <#list form.structure as item>
                    <#if item.kind == "set">
                       <div id="tab_${item_index}">
                               <@renderSetWithoutColumns set=item />
                       </div>        
                    </#if>
                 </#list>
                 <div id="tab_others">
                    <#list form.structure as item>
                        <#if item.kind != "set">
                               <@formLib.renderField field=form.fields[item.id] />
                        </#if>
                     </#list>
                 </div>      
            </div>  
         </div>
      </div>
          
      <#if form.mode != "view">
         <@formLib.renderFormButtons formId=formId />
         </form>
      </#if>
 
   </div>
</#if>
 
<#macro renderSetWithColumns set>
   <#if set.appearance?exists>
      <#if set.appearance == "fieldset">
         <fieldset><legend>${set.label}</legend>
      <#elseif set.appearance == "panel">
         <div class="form-panel">             
            <div class="form-panel-body">
      </#if>
   </#if>
    
   <#list set.children as item>
      <#if item.kind == "set">
         <@renderSetWithColumns set=item />
      <#else>
         <#if (item_index % 2) == 0>
         <div class="yui-g"><div class="yui-u first">
         <#else>
         <div class="yui-u">
         </#if>
         <@formLib.renderField field=item />
         </div>
         <#if ((item_index % 2) != 0) || !item_has_next></div></#if>
      </#if>
   </#list>
    
   <#if set.appearance?exists>
      <#if set.appearance == "fieldset">
         </fieldset>
      <#elseif set.appearance == "panel">
            </div>
         </div>
      </#if>
   </#if>
</#macro>
 
<#macro renderSet set>
   <#if set.appearance?exists>
      <#if set.appearance == "fieldset">
         <fieldset><legend>${set.label}</legend>
      <#elseif set.appearance == "panel">
         <div class="form-panel">
            <div class="form-panel-heading">${set.label}</div>
            <div class="form-panel-body">
      <#elseif set.appearance == "accordion">
      <div class="yui-skin-sam">
          <div class="yui-cms-accordion multiple fade fixIE">       
              <div class="yui-cms-item yui-panel">
                  <div class="hd">${set.label}</div>
                  <div class="bd">
                    <div class="fixed">
      </#if>
   </#if>
    
   <#list set.children as item>
      <#if item.kind == "set">
         <@renderSet set=item />
      <#else>
         <@formLib.renderField field=item />
      </#if>
   </#list>
    
   <#if set.appearance?exists>
      <#if set.appearance == "fieldset">
         </fieldset>
      <#elseif set.appearance == "panel">
            </div>
         </div>
      <#elseif set.appearance == "accordion">
                    </div>
                </div>
            <div class="actions">
              <a href="#" class="accordionToggleItem"> </a>
            </div>
         </div>
       </div>
       </div>
      </#if>
   </#if>
</#macro>
 
<#macro renderSetWithoutColumns set>
   <#if set.appearance?exists>
      <#if set.appearance == "fieldset">
         <fieldset><legend>${set.label}</legend>
      <#elseif set.appearance == "panel">
         <div class="form-panel">
            <div class="form-panel-body">
      </#if>
   </#if>
    
   <#list set.children as item>
      <#if item.kind == "set">
         <@renderSet set=item />
      <#else>
         <@formLib.renderField field=item />
      </#if>
   </#list>
    
   <#if set.appearance?exists>
      <#if set.appearance == "fieldset">
         </fieldset>
      <#elseif set.appearance == "panel">
            </div>
         </div>
      </#if>
   </#if>
</#macro>
 
 
<script>
(function() {
    var tabView = new YAHOO.widget.TabView('${formId}-tabview');
})();
</script>

[douglascrp]

I cannot help you with the code and tests right now, as I don't know the solution and I have no time to read it right now, but I found the source code that was migrated to github.

You can get it here GitHub - rjmfernandes/tabbed-form: Automatically exported from code.google.com/p/tabbed-form 

I hope that it's useful.

[h_john]

Thank you very much! I`ll try with this files.