Direkt zum Hauptbereich

Benutzung von Tabs in Visualforce


Seit einiger Zeit beschäftige ich mich wieder etwas intensiver mit Visualforce.
Eine neue Visualforce Seite muss die Konfiguration von 10 verschiedenen Objekte ermöglichen.
Die einfachste Lösung ist die Benutzung von apex:tabPanel - was im Endeffekt eine Tabelle mit mehreren Tabs darstellt. Unter jedem Tab wird jeweils ein List View ausgegeben, was mit APEX Mitteln ebenfalls ganz einfach funktioniert.
Eine einzige große Schwachstelle in diesem Konstrukt ist das kurzzeitige Verlassen der Seite. Das passiert immer dann, wenn ein neuen Datensatz erstellt oder ein bestehender Datensatz gelöscht wird. Nach der Aktion wird zwar die Visualforce Seite automatisch geöffnet, aber der falsche Tab ist aktiv.

Mit einer kleinen Anpassung bringt man der Visualforce Seite bei, den richtigen Tab beim Öffnen der Seite zu aktivieren.
Das Ergebnis ist im folgenden Videoschnitt zu sehen. Hier sieht man einen Ausschnitt einer Visualforce Seite mit diversen Tabs und das Verhalten der Seite beim Löschen von Datensätzen aus der in die Seite integrierten Listenansicht.

Anpassungen:
1) Beim Klicken auf die Tabs wird der Name des aktiven Tabs im Cookie festgehalten:
   onTabEnter="jsResetCookie('tab2name');"
Die als ActionFunction deklarierte JavaScript Funktion  apex:actionFunction name="jsResetCookie"  übergibt den aktiven Cookie-Namen an den Controller und die entsprechende Controller Methode resetPageCookie  überschreibt den Cookie.

2) Beim Laden der Seite wird der Name des aktiven Tabs aus dem Cookie über die Page-Action action="{!initSettings}" gelesen und der aktive Tab in der Tabelle markiert <apex:tabPanel ... value="{!cookieValue}" >


VisualForce Page

<apex:page controller="myController" action="{!readPageCookie}">
  <apex:pageMessages />
  <apex:form >
    <!-- ACTION FUNCTIONS -->
    <!-- RESET COOKIE -->
    <apex:actionFunction name="jsResetCookie" action="{!resetPageCookie}" reRender="emtyBlock">
      <apex:param name="firstParam" value="" assignTo="{!cookieValue}" />
    </apex:actionFunction>
    <!-- Empty panel for Cookie Reset -->
    <apex:outputPanel id="emtyBlock" />         
    <!-- ---------------- -->
     
    <!-- TABBED TABLE -->
    <apex:tabPanel switchType="client" selectedTab="{!cookieValue}" value="{!cookieValue}" >
      <!-- TAB 1 -->
      <apex:tab label="Mein Tab1" name="tab1name" id="tab1" onTabEnter="jsResetCookie('tab1name');">  
              hier kommt der Inhalt
      </apex:tab>
         
      <!-- TAB 2 -->
      <apex:tab label="Mein Tab2" name="tab2name" id="tab2" onTabEnter="jsResetCookie('tab2name');">
            hier ist ein List View
           <apex:ListViews type="User__c"  id="ListUsers" />
      </apex:tab>
    
      <!-- TAB 3 -->
      <apex:tab label="Mein Tab3" name="tab3name" id="tab3" onTabEnter="jsResetCookie('tab3name');">
            hier ist noch ein List View
           <apex:ListViews type="Holiday__c"  id="ListHolidays" />
      </apex:tab>
   
    </apex:tabPanel>
  </apex:form>   

</apex:page>



Controller

public without sharing class ControllerResourceManagement {    
     public String cookieValue{get; set;}
     /*++++++++++++++++++
     resetPageCookie
     */
     public void resetPageCookie() { 
          Cookie activeTab = new Cookie('activeTab', cookieValue, null, -1, false);
          // Set the new cookie for the page
          ApexPages.currentPage().setCookies(new Cookie[]{activeTab});
     }

     /*++++++++++++++++++
     readPageCookie
     */
     public void readPageCookie() {
          cookieValue = 'tab1';
          Cookie c = ApexPages.currentpage().getCookies().get('activeTab');
          if(c != null)
               cookieValue = c.getvalue();
     }
}

Kommentare

Beliebte Posts aus diesem Blog

Community Builder funktioniert nicht

Nachdem ich eine in einer Sandbox konfigurierte und getestete Lightning Community per Changeset auf die Produktion übertrage und bereitgestellt hatte, stellte ich fest, dass sich die Community nicht konfigurieren lässt. Das Deployment lief fehlerfrei durch. Alle Komponenten der Lightning Community sind verfügbar. Jedoch erscheint die Fehlermeldung Cannot read property 'def' of undefined sobald ich auf den "Builder" - Link klicke. Folgendes Workaround löst das Problem: 1. Go to "All Communities" and click on "Workspaces" beside the problematic community. 2. Go to "Administration | Pages" and click on "Go to Site.com Studio". 3. Once site.com studio has finished loading, click on the "Site Actions" icon (small cog in top right of screen), and select "Export This Site". 4. When prompted, specify a local location to save the site export, and wait for the file download to complete. 5. After the d...

Salesforce Community URL Settings

Ich habe mich in den letzten Tagen etwas ausführlicher mit Salesforce Communities in Kombination mit der API beschäftigt. Ein Problem dabei war, den richtigen Endpoint zu berechnen, wie im letzten Beitrag beschrieben API im Salesforce Partner Portal. Um die Weichen im Code für Community Benutzer einzubauen, muss während der Laufzeit berechnet werden, in welchem Context sich der aktuell eingeloggte Benutzer befindet. Dabei muss man sich zwangsweise mit den Fragen folgender Art beschäftigen: ist der eingeloggte Benuter ein Community Benutzer? ob und welche Community ist gerade aktiv? wie sieht die definierte Community URL aus? Antwort auf die Frage 1: private Boolean isCommunityUser(){         Boolean bIsCommunityUser = false;         String sUserType = UserInfo.getUserType();         sUserType = sUserType.toUpperCase();         if(sUserTyp...

Bad value for restricted picklist field

Der Einsatz von "Restricted Picklists" bereitet spätestens im Deployment Kopfschmerzen. Basiert das Deployment auf Basis eines Drittanbietertools, dann sind die Kopfschmerzen noch intensiver. In meinem Fall habe ich versucht, ein neues Picklist-Feld mit Copado zu deployen. Während der Bereitstellung bekomme ich die folgende Fehlermeldung: System.DmlException: Insert failed. First exception on row 0; first error: INVALID_OR_NULL_FOR_RESTRICTED_PICKLIST, bad value for restricted picklist field: Z012: [CountryGroup__c] Das neue Picklist-Feld übernimmt alle Werte aus einem Global Value Set. Das bedeutet, die Option "Restrict to the values defined in the value set" ist automatisch aktiv und lässt sich nicht deaktivieren. Eine APEX-Testklasse beschreibt ebenfalls die neue Pickliste. Mit dem folgenden Workaround konnte ich das Deployment-Problem lösen: 1) Global Value Set samt Pickliste per Changeset in die Zielorg übertragen und bereitstellen ggf. Prof...