RibbonX-Workshop - Das Backstage-View (ab Office 2010)

Über die Backstage-View-Ebene können wir die Elemente im Officemenü beeinflussen und eigene Elemente setzen.

Wichtig:
Trotz einheitlichem Namespace in Office 2010 und Office 2013 gibt es unterschiedliche idMso für einige Einträge in den Officemenüs.
Beispiel ist "Speichern Unter". In Excel 2010 lautet die idMso "FileSaveAs" und ist vom Typ "button". In Excel 2013 lautet die idMso "TabSave" und ist vom Typ "Tab". Solange die Add-In-Fehlerprüfung deaktiviert ist fällt dieses Manko nicht weiter auf. Bei aktivierter Add-In-Fehlerprüfung wird dann eine Fehlermeldung ausgegeben dass ein Element nicht existiert, der Rest der Programmierung funktioniert aber dennoch.

Hinweis:
Das Backstage-View kann die selben Elemente beinhalten die sie auch im Menüband verwenden, die Argumente und dazugehörigen Rückruf-Routinen (Callbacks) sind identisch. Daher möchte ich hier nicht näher darauf eingehen und beschränke mich auf den RibbonX-Code. Menüs sind im Backstage-View nicht zulässig.

Im ersten Beispiel wollen wir "Speichern Unter" deaktivieren.

<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui" >
  
   <ribbon></ribbon>

   <backstage>
      <!-- "Speichern Unter" deaktivieren in Excel 2010 -->
      <button idMso="FileSaveAs" visible="false" />
      <!-- "Speichern Unter" deaktivieren in Excel 2013 -->
      <tab idMso="TabSave" visible="false" />
   </backstage>

</customUI>



Kommen wir nun zum Hinzufügen einer einzelnen Schaltfläche.
Hinweis: Mit isDefinitive entscheiden Sie ob das Backstage-View sichtbar bleiben soll oder nicht. Mit true blendet man das Backstage-View aus, bei false bleibt es angezeigt.

<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui" >
   <ribbon></ribbon>

   <backstage>
      <button id="btn3" imageMso="AutoDial" label="Test34" onAction="onAction_Button1" isDefinitive="true" />
   </backstage>

</customUI>


Kommen wir jetzt zum schwierigen Teil. Fangen wir mit einem Anzeigebeispiel an.

Highslide JS


Das Backstage-View ist unterteilt in einen linken (firstColumn) und einen rechten (secondColumn) Anzeigebereich. Die Anzeigebereiche enthalten unterteilte Abschnitte (topItems).

Wichtig:
"primaryItem" enthält die Hauptschaltfläche im Tab. Es darf immer nur ein Element (nur button und menu erlaubt) im "primaryItem" enthalten sein.

"layotContainer" gruppiert Elemente, "layoutChildren" stellt die Anzeigerichtung dar (horizontal oder vertical).

<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui" >
  
<ribbon></ribbon>

<backstage>

   <tab  id="tabBV" label="Beispielmenue" insertBeforeMso="TabHelp">

      <!-- Beginn linker Anzeigebereich -->

      <firstColumn >

         <group id="grp0" label="Öffnen" >
            <primaryItem>
                  <button id="btn0" label="Haupt-Button" onAction="Start1" />
            </primaryItem>
      
            <topItems  >
               <layoutContainer id="lay1" layoutChildren="horizontal">
                  <button id="send2" isDefinitive="true" imageMso="_1" style="large" onAction="senden2" label="Senden2" />
                  <button id="send3" isDefinitive="true" imageMso="_2" style="large" onAction="senden3" label="Senden3" />
               </layoutContainer>
            </topItems>
         </group>

         <group id="grp1" label="Einstellungen" >
            <topItems>
                <checkBox id="cbx0" label="Auswahl 1" onAction="Auswahl1" />
                <checkBox id="cbx1" label="Auswahl 2" onAction="Auswahl2" />
            </topItems>
         </group>

      </firstColumn>
      <!-- Ende linker Anzeigebereich -->

      <!-- Beginn rechter Anzeigebereich -->

      <secondColumn>
         <group id="grp2" label="Menüeinstellungen" visible="true">
            <topItems>
               <layoutContainer id="lay2" layoutChildren="horizontal">
                  <button id="send4" isDefinitive="true" imageMso="_3" style="large" onAction="senden4" label="Senden4" />
                  <button id="send5" isDefinitive="true" imageMso="_4" style="large" onAction="senden5" label="Senden5" />
               </layoutContainer>
            </topItems>
         </group>

         <group id="grp3" label="Einstellungen" >
            <topItems>
                <checkBox id="cbx3" label="Auswahl 4" onAction="Auswahl4" />
                <checkBox id="cbx4" label="Auswahl 5" onAction="Auswahl5" />
            </topItems>
         </group>
           
 
      </secondColumn>
      <!-- Ende rechter Anzeigebereich -->

   </tab>

</backstage>

</customUI>


Weitere Elemente:
category, task, taskFormGroup
Aus optischen Gründen (Darstellungsprobleme in Office 2013) soll hier darauf nicht näher darauf eingegangen werden.

Darstellungsbeispiel:
Highslide JS


Beispielcode (Quelle: Access-Ribbon )

<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
   <ribbon startFromScratch="false">
       <!-- Ribbon XML -->
   </ribbon>
  <backstage>
    <tab  id="btab1" label="Tab Label 1. ">
      <firstColumn>
       <taskFormGroup id="MytskfrmGroup1" label="Label taskFormGroup 1. Column" helperText="Helpertext for 1. Column">
           <category id="cat1" label="Label 1. Category" >
            <task id="tsk1" label="Label 1.0 Task" description="Description 1.0 Task" imageMso="HappyFace">
             <group id="myGroup21" label="Label 1. Group" helperText="Style:= normal"  style="normal">
                <primaryItem>
                  <button id="hBtn1" label="HeroButton" imageMso="HappyFace"/>
                </primaryItem>
                <topItems>
                    <labelControl id="lblInForm1" label="topItems:"/>
                    <button id="btnInForm1" label="Button 1."/>
                </topItems>
               
                <bottomItems>
                    <labelControl id="lblInForm2" label="bottomItems:"/>
                    <button id="btnInForm2" label="Button 2."/>
                    <button id="btnInForm3" label="Button 3."/>
                </bottomItems>
             </group>
             <group id="myGroup22" label="Label 2. Group" helperText="Style:= warning" style="warning"/>
             <group id="myGroup23" label="Label 3. Group" helperText="Style:= error" style="error"/>
            </task>
               <task id="tsk1a" label="Label 1.1. Task" description="Description 1.1 Task" imageMso="AppointmentColorDialog">
              <group id="myGroup24" style="normal"/>
            </task>
           </category>
         <category id="cat2" label="Label 2. Category">
            <task id="tsk2" label="Label 2.0 Task" description="Description 2.0 Task">
              <group id="myGroup25" style="normal"/>
            </task>
           </category>
       </taskFormGroup>
     </firstColumn>
    </tab>
    <button id="btnBackstage1" label="Label Backstage Button" imageMso="HappyFace" onAction="OnActionButton"/>
  </backstage>
</customUI>