Direkt zum Hauptbereich

Darstellung mehrerer Spalten in VisualForce

Zur Abwechslung möchte ich die APEX-Welt verlassen und eine kleine, aber keine triviale Aufgabe in Bezug auf die Frontend-Programmierung beschreiben.
Ich habe eine VisualForce Page, die als Suchmaske fungiert. Es gibt eine Hand voll Felder, die in einem Block mehrzeilig und mehrspaltig dargestellt werden. Insgesamt gibt es 3 Zeilen und 3 Spalten.

Problem: die letzte Spalte wird auf die minimale Breite zusammengedrückt, so dass es einen Umbruch in den Feldbezeichnungen gibt.


In meinem Konstrukt gibt es viele Felder mit Default-Werten. Aus dem Grund muss ich auf die einfache Darstellung eines Feldes <apex:inputField value="{!myObject.name}"/> verzichten.
Statt dessen sieht der Aufbau eines Feldes so aus:
<apex:pageBlockSectionItem>
  <apex:outputLabel value="{!$ObjectType.myObject.fields.City__c.label}"/>
  <apex:inputText value="{!City}" />
</apex:pageBlockSectionItem>

Lösung: die Richtung ist schon mal klar - ich muss die Spaltenbreite verändern. 
Wie? 
- Natürlich mit CSS. 
Wo? 
- Entweder im <apex:outputLabel oder im <apex:inputText oder in den beiden? In der HTML-Welt reicht es meistens aus, nur die Spalten der ersten Zeile mit CSS zu versehen, die anderen Zeilen richten sich danach. Funktioniert es aber mit VisualForce vielleicht anders? Nicht zu vergessen ist die Möglichkeit,
die Style Eigenschaften in dem übergeordneten Element <apex:pageBlockSectionItem> zu implementieren.
Jetzt habe ich mehr Fragen als Antworten.
Nach ein paar Tests, und noch ein paar Tests, und noch ein paar... habe ich die einzige funktionierende Lösung gefunden: der entsprechende Style-Befehl in jedem <apex:pageBlockSectionItem> jeder Zeile löst das Problem. Sehr wichtig ist die Benutzung der !importantEigenschaft.
Das Ergebnis sieht ungefähr so aus:

<apex:page controller="AddressSearch" sidebar="false">
 <style>
  .dataColumn{ width:100px !important;}
 </style>

 <apex:form >
  <apex:pageBlock title="Search Customer" mode="detail">
   <apex:pageBlockSection title="" columns="3" collapsible="false" showheader="false">
     <!-- ROW 1 -->
     <!-- COLUMN 1 -->
     <apex:pageBlockSectionItem dataStyleClass="dataColumn">
      <apex:outputLabel value="City"/>
      <apex:inputText value="{!City}" />
     </apex:pageBlockSectionItem>
     <!-- COLUMN 2 -->
     <apex:pageBlockSectionItem dataStyleClass="dataColumn">
      <apex:outputLabel value="Address EID" />
      <apex:inputText value="{!AddressEID}" />
     </apex:pageBlockSectionItem>
     <!-- COLUMN 3 -->
     <apex:pageBlockSectionItem dataStyleClass="dataColumn">
      <apex:outputLabel value="Street Line1"/>
     <apex:inputText value="{!Addressline1}" />
     </apex:pageBlockSectionItem>     
    <!-- ROW 2 -->
     ...........
    <!-- ROW 3 -->
     ...........
   </apex:pageBlockSection>

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

</apex:page>

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...

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...

Zeitgesteuerter Flow blockiert Custom Leadkonvertierung

Die programmierte Konvertierung eines Leads bricht mit der Fehlermeldung "Unable to convert lead that is in use by workflow" ab. Der Grund ist ein Prozess, der automatisiert und zeitgesteuert ausgeführt wird. Dieser Prozess ruft zu einem späteren Zeitpunkt einen Flow auf. Während der Speicherung eines Leads wird dabei automatisch ein Flow Interview erstellt. Dieser Datensatz vom Typ "FlowInterview" blockiert die Leadkonvertierung. Lösung: Unmittelbar vor der Leadkonvertierung eine Checkbox auf dem Lead auf TRUE setzen. Da dieselbe Checkbox in den Process Builder Kriterien eingebunden ist und der Prozess nur auf den FALSE Wert reagiert, löscht das System automatisch das entsprechende Flow Interview.