Difference between revisions of "Extending Admin UI"

Line 16: Line 16:
  
 
  HelloWorldExtension.AccountXFormModifier = function (xFormObject) {
 
  HelloWorldExtension.AccountXFormModifier = function (xFormObject) {
  //find _TAB_BAR_ element
+
    //find _TAB_BAR_ element
  var cnt = xFormObject.items.length;
+
    var cnt = xFormObject.items.length;
  for(i = 0; i <cnt; i++) {
+
    for(i = 0; i <cnt; i++) {
if(xFormObject.items[i].type=="tab_bar")  
+
      if(xFormObject.items[i].type=="tab_bar")  
  break;
+
        break;
  }
+
    }
  //get a tab index
+
    //get a tab index
  var myTabIndex = ++ZaAccountXFormView.TAB_INDEX;
+
    var myTabIndex = ++ZaAccountXFormView.TAB_INDEX;
  //add a tab
+
    //add a tab
  xFormObject.items[i].choices.push({value:myTabIndex, label:"Hello World"});
+
    xFormObject.items[i].choices.push({value:myTabIndex, label:"Hello World"});
  //define a form for my new tab. This ahs to be a _CASE_ element
+
    //define a form for my new tab. This ahs to be a _CASE_ element
  
  var myTab = {type:_CASE_, relevant: ("instance[ZaModel.currentTab] == " + myTabIndex), items: [{type:_OUTPUT_, label:null, value:"Hello World!"}]};
+
  var myTab = {type:_CASE_, relevant: ("instance[ZaModel.currentTab] == " + myTabIndex), items: [{type:_OUTPUT_, label:null, value:"Hello World!"}]};
 
    
 
    
  //find SWITCH element
+
    //find SWITCH element
  for(i = 0; i <cnt; i++) {
+
    for(i = 0; i <cnt; i++) {
if(xFormObject.items[i].type=="switch")  
+
      if(xFormObject.items[i].type=="switch")  
break;
+
        break;
  }
+
    }
  //add my tab to the form
+
    //add my tab to the form
  xFormObject.items[i].items.push(myTab);
+
    xFormObject.items[i].items.push(myTab);
}
+
}
ZaTabView.XFormModifiers["ZaAccountXFormView"].push(HelloWorldExtension.AccountXFormModifier);
+
ZaTabView.XFormModifiers["ZaAccountXFormView"].push(HelloWorldExtension.AccountXFormModifier);

Revision as of 02:00, 25 February 2006

The API for extending Admin UI is similar to Zimlets. Extensions for Admin UI are deployed using the same utility. The easiest way to understand how to create extensions for Admin UI is by example. So, lets create a sample "Hello World" extension. The example will one tab to the Accounts view. The tab will be called "Hello World" and it will have some text.

The extension will consist of two files: helloworld.xml - XML definition of the extention helloworld.js - JavaScript code of the extension helloworld.xml:

   <zimlet name="helloworld" version="1.0" description="Sample Extension for Admin UI" extension="true">
   <include>helloworld.js</include>
   </zimlet>

That's it. It is that short. It defines the name of the extension, description and included JS files. Note, that unlike Zimlet definition files it has a parameter extension="true". This is what tells zimlet utility that this is not a regular Zimlet, but an extension for Admin UI. So, moving forward. helloworld.js

 function HelloWorldExtension() {}
HelloWorldExtension.AccountXFormModifier = function (xFormObject) {
   //find _TAB_BAR_ element
   var cnt = xFormObject.items.length;
   for(i = 0; i <cnt; i++) {
      if(xFormObject.items[i].type=="tab_bar") 
        break;
   }
   //get a tab index
   var myTabIndex = ++ZaAccountXFormView.TAB_INDEX;
   //add a tab
   xFormObject.items[i].choices.push({value:myTabIndex, label:"Hello World"});
   //define a form for my new tab. This ahs to be a _CASE_ element
  var myTab = {type:_CASE_, relevant: ("instance[ZaModel.currentTab] == " + myTabIndex), items: [{type:_OUTPUT_, label:null, value:"Hello World!"}]};
 
   //find SWITCH element
   for(i = 0; i <cnt; i++) {
     if(xFormObject.items[i].type=="switch") 
       break;
   }
   //add my tab to the form
   xFormObject.items[i].items.push(myTab);
}
ZaTabView.XFormModifiers["ZaAccountXFormView"].push(HelloWorldExtension.AccountXFormModifier);
Jump to: navigation, search