Dynamic Tab In Salesforce ( CSS and apex:dynamicComponent )

Some time we need to create dynamic tab. This we can achieve with below way :-
1) By CSS
2) By <apex:dynamicComponent

DEMO 1:- By CSS

Page :-

<apex:page controller="DynamicTabController" sidebar="false"  standardStylesheets="false" showHeader="false">
<head>
 <style type="text/css">

 .black_overlay{
       display: none;
       position: absolute;
       top: 0%;
       left: 0%;
       width: 100%;
       height: 100%;
       background-color:#F8F8F8  ;
       z-index:1001;
       -moz-opacity: 0.8;
       opacity:.80;
       filter: alpha(opacity=80);
  }
  .white_content {
      display: none;
      position: relative;
      z-index:1002;
      overflow: auto;
  }

    #layer1 
                {
                position: absolute;
                visibility: hidden;
                width: 800px;
                height: 450px;
                left: 50%;
                top: 20%;
                background-color: #ccc;
                border: 1px solid #000;
                padding: 10px;
                overflow:scroll;
               }
            
            #close 
            {
                float: right;
            } 

 
.tabs {
  position: relative;   
  min-height: 550px; /* This part sucks */
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
  overflow: auto;
  
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}            
            
    </style>

</head>    

<apex:form style="none">

        <center>
          <div class="tabs">
            <apex:repeat value="{!lstAccount}" var="acc"> 
               <div class="tab">
                   <input type="radio" id="tab-{!acc.Name}" name="tab-group-1" checked="True" />
                   <label for="tab-{!acc.Name}">{!acc.Name}</label>
                    <div class="content">
                       <table width="100%">
                            <apex:repeat value="{!$ObjectType.Account.FieldSets.Account_FieldSet}" var="fieldSet"> 
                                <tr> 
                                    <td>
                                        {!fieldSet.Label}
                                    </td>   
                                    <td>
                                        <apex:inputField value="{!acc[fieldSet]}"/>
                                    </td>
                                </tr>   
                            </apex:repeat>
                       </table>
                    </div> 
                </div>
             </apex:repeat>
        </div>
        </center>
    
        
</apex:form>

</apex:page>

Class:-

public with sharing class DynamicTabController 
{
    public List<Account> lstAccount{get;set;}
    
    public DynamicTabController()
    {
        lstAccount=new List<Account>();

                String query = 'SELECT ';
                for(Schema.FieldSetMember f : this.getFields()) 
                {
                    query += f.getFieldPath() + ', ';
                }

                query += '  Id FROM Account limit 5 ';
                System.debug('query ------>'+query );

                lstAccount = Database.query(query);        

    }

    public List<Schema.FieldSetMember> getFields() 
    {
        return SObjectType.Account.FieldSets.Account_FieldSet.getFields();
    }

}

Live Demo Link :-
http://amitblog-developer-edition.ap1.force.com/apex/DynamicTab

DEMO 2:- <apex:dynamicComponent >

Page :-

<apex:page controller="dynamicComponentDemoController">

<apex:form >
        <apex:pageBlock >
            <apex:pageBlockButtons location="bottom">
                <apex:inputText value="{!newTabName}"/>
                <apex:commandButton value="Add Tab" action="{!addTab}"/>
            </apex:pageBlockButtons>
            <apex:dynamicComponent componentValue="{!tabPanel}"/>

            <apex:dynamicComponent componentValue="{!MyPanel}"/>


        </apex:pageBlock>
</apex:form>

</apex:page>

Class:-

public with sharing class dynamicComponentDemoController {

    public static Component.Apex.tabPanel MyPanel {get;set;}
    
    public  dynamicComponentDemoController ()
    {
        MyPanel = new Component.Apex.tabPanel();
        MyPanel.switchType = 'client';

        List<Account> lstAccount = [select id,name,industry from account limit 5];
        
        integer idx = 0;
        for(Account acc : lstAccount )
        {
            idx ++;
            Component.Apex.Tab tab = new Component.Apex.Tab();
            tab.id = 'tab_First'+string.valueof(idx);
            tab.label = acc.Name;
           /* 
            Component.Apex.CommandButton command = new Component.Apex.CommandButton();
            command.value='Save';
            command.expressions.action='{!save}';
            tab.childComponents.add(command);

            Component.Apex.InputText t = new Component.Apex.InputText();
            t.expressions.value ='{!c.status}' ;
            tab.childComponents.add(t);
           */ 
                    
    
            Component.Apex.outputText f = new Component.Apex.outputText();
            f.value = 'Industry  :-'+acc.industry ;
            tab.childComponents.add(f);
            
            MyPanel.childComponents.add(tab);
        }
    }
    
    public void addTab() {
        names.add(newTabName);
    }
 
    string[] names = new string[0];
    public String newTabName { get; set; }
    
    public Component.Apex.TabPanel getTabPanel() 
    {
        Component.Apex.TabPanel panel = new Component.Apex.TabPanel();
        panel.switchType = 'client';
        for(integer idx = 0; idx < names.size(); idx++) {
            Component.Apex.Tab tab = new Component.Apex.Tab();
            tab.id = 'tab'+string.valueof(idx);
            tab.label = names[idx];
            
            Component.Apex.CommandButton command = new Component.Apex.CommandButton();
            command.value='Save';
            command.expressions.action='{!save}';
            tab.childComponents.add(command);
    
            Component.Apex.outputText f = new Component.Apex.outputText();
            f.value = 'Description';
            tab.childComponents.add(f);

            Component.Apex.InputText t = new Component.Apex.InputText();
            t.expressions.value ='{!c.status}' ;
            tab.childComponents.add(t);
            
            panel.childComponents.add(tab);
        }
        return panel;
    }
    
    public void save()
    {
    }

    
}

Live Demo Link :- http://amitblog-developer-edition.ap1.force.com/dynamicComponentDemo

Amit Salesforce | Salesforce Tutorial

Saturday, 8 November 2014

Dynamic Tab In Salesforce ( CSS and apex:dynamicComponent )

3 comments: