Panel config files

•

Environment: onsite

• 6 minutes to read

Corresponding to the same diagram as we looked at discussing the components of a page, a panel config file contains config data on the other elements of the page.

Inside a panel, there can be many cards
Inside a card, there can be views
Inside a view, there can be many controls (Which are not shown in the diagram)

Thus, a panel configuration file defines the UI structure of a panel and contains the layout of Cards in the panel, which in turn contain views and controls.

Panels represent the main containers of a page (the outer UI frame) and are the first elements to support positioning attributes.

Each main entity page has 4 panels that define the upper menus, left navigator buttons, entity details, and lower action buttons.

PageFramework

<!-- SoExamplePanel.config -->
<panel id="PanelContainerFile" type="PanelType"
       soprotocol="PanelContainerFile" paneltype="Main">
  <caption>Panel Caption</caption>
  <cards>
  <!-- Cards contain views -->
  </cards>
  <config>
  <!-- config values loaded during initialization -->
  <!-- child element are type specific,
       different panel types require
       different configuration settings.
       example below: panes and splitter-boundaries
       are specific where panel type="SplitterPanel"
        -->
    <panes />
    <splitter-boundaries />
  </config>
</panel>

Note

It is up to the panel implementation to interpret what these cards are going to be used for, and how they are shown.

SoContactPanel

Below is an excerpt of the SoContactPanel.config file. We have cut out some parts to keep it reasonably short.

<?xml version="1.0" encoding="utf-8"?>
<panel id="Contact" type="SplitterPanel" soprotocol="Contact" paneltype="Main" placeholderid="MainPlaceHolder">
  <caption>[SR_COMMON_CONTACT]: [current:contact_name]</caption>
  <cards>
    <card id="ContactMainCard" type="SoTabbedCard" placeholderid="leftpanel" cardtype="MainCard">
      <views>
        <view id="MainView" reference="MainView"></view>
      </views>
      <functional-rights>
        <functional-right>project</functional-right>
      </functional-rights>
      <config>
        <only-visible-views>true</only-visible-views>
        <system-view>SystemView</system-view>
        <datahandlers-to-save>
          <datahandler-reference>ContactEntityDataHandler</datahandler-reference>
        </datahandlers-to-save>
      </config>
    </card>
    <card id="ContactMiniCard" reference="MiniCard"></card>
    <card id="ContactArchives" placeholderid="bottom" type="SoTabbedCard" cardtype="ArchiveCard">
      <views>
        <view id="ContactPersonArchiveView" type="SoView" soprotocol="personarchive" >
          <caption>[SR_PL_PERSONS]</caption>
          <tooltip></tooltip>
          <controlgroups>
            <controlgroup id="mainpersongroup" type="SoControlGroup" position="absolute" left="0px" right="0px" top="0px" bottom="0px">
              <controls>
                <control id="DisablePersonAdd" type="SoScriptControl">
                  <config>
                    <switch value="contact" binding="current">
                      <case operator="equal" value="0">
                        SoHelper.DisableElementsBySoId('ContactPersonArchive_0');
                      </case>
                    </switch>
                  </config>
                </control>
                <control id="ContactPersonArchive" type="SoArchiveControl" width="100%" top="0px" left="0px" height="100%" position="absolute" >
                  <menu>
                    <context>archive</context>
                    <subcontext>header</subcontext>
                    <id binding="none">0</id>
                    <position>belowcursor</position>
                    <click>right</click>
                  </menu>
                  <config>
                    <restriction-mappings>
                      <restriction-mapping source="person_id" target="personId"/>"
                    </restriction-mappings>
                    <toolbar>
                      <button caption="[SR_MB_ADD]"
                              icon="images/toolicons/Mini_Add_Passive.gif"
                              iconselected="images/toolicons/Mini_Add_Passive.gif"
                              iconhover="images/toolicons/Mini_Add_Hover.gif"
                              icondisabled="images/toolicons/Mini_Add_Disabled.gif"
                              onclick="javascript:Dialog.open('Person','person[dialog=stop].main[mode=edit;new=true]?person_id=0','ContactPersonArchiveArchiveControl.RefreshList()');"
                              dataright="create" 
                              datasourcename="ContactEntityDataHandler.ContactPersonEntity"
                              xtablerightname="person"
                              />
                      <button caption="[SR_MB_DELETE]"
                              icon="images/toolicons/Mini_Delete_Passive.gif"
                              iconselected="images/toolicons/Mini_Delete_Passive.gif"
                              iconhover="images/toolicons/Mini_Delete_Hover.gif"
                              icondisabled="images/toolicons/Mini_Delete_Disabled.gif"
                              disabled="true"
                              dataright="delete"
                              onrowselect="DisableOnEmpty"
                              linkhint="nav=deletePerson"
                              />
                    </toolbar>
                    <restrictions>
                      <restriction name="contactId" operator="=" binding="current">contact</restriction>
                    </restrictions>
                    <providername>person</providername>
                    <archivecolumninfo-datasourcename>ArchiveColumnConfigDataHandler.ContactPersonArchive</archivecolumninfo-datasourcename>
                    <showheader>true</showheader>
                    <showtoolbar>true</showtoolbar>
                    <defaultsort>rank</defaultsort>
                    <current>person</current>
                    <linkhint-prefix>personarchive:</linkhint-prefix>
                    <dblclick-action>javascript:Dialog.open('Person','person[dialog=stop].main[mode=edit;new=true]?person_id=0','ContactPersonArchiveArchiveControl.RefreshList()');</dblclick-action>
                  </config>
                </control>
              </controls>
            </controlgroup>
          </controlgroups>
          <triggers>
            <trigger type="current">contact</trigger>
            <trigger type="current">person</trigger>
          </triggers>
        </view>
      </views>
      <config>
        <only-visible-views>true</only-visible-views>
      </config>
    </card>
  </cards>
  <config>
    <panes>
      <pane id="leftpanel">ContactMainCard</pane>
      <pane id="rightpanel">ContactMini</pane>
      <pane id="bottompanel">ContactArchives</pane>
    </panes>
  </config>
  <function-rights>
    <function-right type="hide">hide-company</function-right>
  </function-rights>
</panel>

The essential structure of the panel configuration looks like this:

<panel id="Contact" type="SplitterPanel" soprotocol="Contact" paneltype="Main" placeholderid="MainPlaceHolder">
  <cards>
    <card id="ContactMainCard" type="SoTabbedCard" placeholderid="leftpanel" cardtype="MainCard">
      <views>
        <view id="MainView" reference="MainView"></view>
      </views>
    </card>
    <card id="ContactMiniCard" reference="MiniCard"></card>
    <card id="ContactArchives" placeholderid="bottom" type="SoTabbedCard" cardtype="ArchiveCard">
      <views>
        <view id="ContactPersonArchiveView" type="SoView" soprotocol="personarchive" >
        </view>
      </views>
      </config>
    </card>
  </cards>
</panel>

The outer element in this config file is panel. All the other config data is inside this element and makes up the config for the panel.

cards element

The second level here is the cards element, which holds the config data for all the cards in the config. That means a panel can hold many cards and the config data for those cards are grouped by the cards element.

The placeholderid is a reference to a region of a page – where the content of this section should be placed. These names are defined on the master page.
The type and cardtype indicate which rendering interface should be used. These are defined in the SoObjectMapping.config file.

card element

The next level of the config file is the card element. The config data for the card can appear in 2 ways inside the cards element. If it is referenced, there will be a separate config file for the card.

Option 1:

<card id="ContactMainCard" type="SoTabbedCard" placeholderid="leftpanel" cardtype="MainCard">

Option 2:

<card id="ContactMiniCard" reference="MiniCard"></card>

The cards can contain any number of views, which are laid out according to the definition on the card and the properties of the control.

Different panel types

Name	Description
MainPanel	Most simple panel without any special capabilities. A blank canvas.
SoDialogPanel	Base panel for all dialogs. In edit mode by default.
SplitterPanel	Base panel for all main pages that displays classic SuperOffice splitter panel (see image above). Can be used without splitter capability, as seen when viewing the browser panel page by clicking the SuperOffice logo.

Recommended types for main panels

Element type	Type attribute
Panel	SplitterPanel
Card	SoTabbedCard
View	SoView
ControlGroup	SoControlGroup

Recommended types for simple dialogs

Element type	Type attribute
Panel	SoDialogPanel
Card	SoDialogSimpleCard
View (main)	SoDialogSimpleView
- ControlGroup	SoControlGroup
View (footer)	SoDialogSimpleFooterView
- ControlGroup (footer)	OkCancelButtonBar

Recommended types for normal dialogs

Element type	Type attribute
Panel	SoDialogPanel
Card	SoDialogCard
View (header)	SoDialogHeaderView
View (main)	SoDialogView
- ControlGroup	SoControlGroup
View (footer)	SoPlainView
- ControlGroup (footer)	OkCancelButtonBar