Gadget Creation with Gadget Wizard


  • Manage Portal Gadgets
  • Gadget Wizard
  • Gadget Forms
  • Gadget-savvy Reports

Manage Portal Gadgets

Manage Portal Gadgets

Gadgets are small boxes in which we can show reports in the front page of ERP5. They are used to create complete dashboards which can be used to have a quick overview of what is going on within the ERP and by so within the company.

We will see how to create a gadget in this tutorial. In order to follow the instructions you will need a developer access to your instance. If you work on TioLive, you need to request such access to the support. Then you can login to your instance with your developer access. It can be done by going on the URL then login with correct credentials. You will then land in the Zope developer interface. If you want to see the standard ERP5 interface, you can replace 'manage' per 'view'. You can do this anywhere in ERP5 so you can navigate from user interface to developer interface.

The first step is to go in the gadget module. It can be done by calling an URL, which is or by the 'My Favorites' menu, then 'Manage Gadgets'

You can see the list of available gadgets in your instance and their status (Public or Visible). If you want to edit on of those gadgets you can just click o one of them.

In order to create a new gadget, we will call the gadget wizard: 'Action' >> 'Gadget Wizard'

You will then be redirected to a Dialog Box to create a new gadget.

Invoke the Gadget Wizard

Invoke the Gadget Wizard

On the Gadget Wizard we can choose different options. We will only configure a few of them in this tutorial. While becoming more skilled on ERP5 development, you will learn what are the other options for.

In this tutorial we will only fill in the following options:

- Skin ID: it configures where will be put the generated script. It must be considered as choosing a folder for your customization. We recommend you to always use 'Custom', so all your development scripts are in the same folder. Once they are well done, you can move them to an other folder if needed.

- Gadget ID: this is the unique ID of your gadget. You can choose it as you prefer. All spaces will be replaced with underscores.

- Title: this field let you choose the title of your gadget. It will be displayed in the list of gadget and in the top bar of the gadget itself.

- 'Type of renderer objects': By default ERP5 Form is selected. Later you might want to change the output, but for now we can keep it like this.

- 'Type of rendering': In our example we will choose 'Asynchronous'

Once you selected all the options, you can click on 'Gadget Wizard'

Gadget Definition

Gadget Definition

Once you created the gadget thanks to the gadget wizard, you are redirected to the gadget itself.

The first thing we can do is to add a picture to the gadget. This picture will be displayed in the 'gadget catalog', when the user chooses the gadgets he/she wants to display to his/her dashboard. Procedure goes as follows:

- Click on 'Browse' next to 'Upload'

- Upload the photo and save it.

- Go back to the gadget record (thanks to the breadcrumb)

Once it is done, we will directly work in Zope interface. The gadget we just created through the Gadget Wizard generated the creation of two forms. Those forms have been created in the folder you choose with 'Skin ID' in the previous step. If you are in development time, you probably have chosen the 'Custom' skin. If you go in, you can access the list of all skins folder, in our case 'custom'.

Two forms have been generated:

- ERP5Site_viewGADGETID Gadget: Contains the « listbox » which is the filter or the search made according to the preferences.

- ERP5Site_viewGADGETID GadgetPreferences: Contains the Options which can be called in the search or in the filter.

Define Rendering Form

Define Rendering Form

First of all we will add the report which will be showed by the gadget. The easiest way is to copy and paste the listbox created in a report, thanks to the Report wizard. Procedure goes as follows:

- Create report thanks to the reports wizard (Read developer-Create.Report)

- Select the listbox created, then click on 'Copy'

- Go on the 'ERP5Site_view<GADGETID>Gadget' form of the gadget, then click on 'Paste'

Now that we selected the report to show in the gadget, we can change some options by editing the listbox itself. For example we might want to show only 10 rows and change the displayed titles of the columns. All of this is configured in the listbox itself.

Last important thing is to organize within our gadget how the report will be displayed. While your are on the 'ERP5Site_view<GADGETID>Gadget' form of the gadget, you can click on the 'Order' tab.

You will see where the report is currently being displayed. You have four zones which are 'Left', 'Right', 'Center' and 'Bottom'. The last option is 'Hidden' which allows you to hide part of your content.

To move content from zone to another goes as follows:

- Select the content you wish to move

- Select the target zone thanks to 'Move to' list

- Click on 'Transfer' to validate the choice.

Define Parameter Form

Define Parameter Form

Once the report(s) is/are well configured, you might want to add the possibility to choose one or more arguments for your request. Those arguments will be displayed as an option in the gadget.

As we just have seen before, we will create the argument in the form, either from scratch, or by Copy/paste an argument from an existing report to ERP5Site_view<GADGETID>GadgetPreferences form.

We can then choose the place where it will be displayed in the Gadget. We might choose a top position for the arguments while we will choose the bottom zone for the report itself.

Make Report Gadget-savvy

Make Report Gadget-savvy

If you prefer not use the gadget report, you can create the report yourself by creating a custom script which will show the information you want to display.

Test Gadget

Test Gadget

Finally you can go back to the first page of you ERP5 instance. By clicking on 'Add gadgets' you will access the 'Gadget Catalog'.

You can now select your newly created gadget, and display it in your dashboard.

Bottom Gadget
Right Gadget