Adding a widget in OpenERP Web Client

Adding a widget in OpenERP Web Client

June 7, 2011 By Shelton

Recently I came across a post in a forum about adding a widget in OpenERP Web Client. I thought it would be nice to share the information through our blog.

In the OpenERP v6 Web Client, at the right handside we can see a twitter widget by default. Also, we can add more widgets like google maps, facebook etc. which are available by default. Our aim is to add a custom Search box widget which will search the blogs in Zesty Beanz website.

We can do this via PostgreSQL phppgadmin. In the database, we can find a table named res_widget. This is the table where the widgets are defined. We can add another row to create our new widget. Here we have some values to be entered in the table.

First of all, it asks for an id. The id field have a default expression " nextval('res_widget_id_seq'::regclass) ". We leave this field as such. The following fields are also entered as given below:

create_uid - 1

create_date - the date when it is created

write_date - the field is left blank and the Null field is checked.

write_uid - the field is left blank and the Null field is checked.

content - The following code is entered here.

&lt;div id=&quot;cse&quot; style=&quot;width: 100%;&quot;&gt;Loading&lt;/div&gt;

&lt;script src=&quot;http://www.google.com/jsapi&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

  google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST});

```
  google.setOnLoadCallback(function() {
```

    var customSearchControl = new google.search.CustomSearchControl('017699803165190727778:3vmr-8xg18u');

    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);

```
    customSearchControl.draw('cse');
```
```
  }, true);
```
```
&lt;/script&gt;
```
```
 
```
```
&lt;style type=&quot;text/css&quot;&gt;
```
```
  .gsc-control-cse {
```
```
    font-family: Arial, sans-serif;
```
```
    border-color: #FFFFFF;
```
```
    background-color: #FFFFFF;
```
```
  }
```
```
  input.gsc-input {
```
```
    border-color: #777777;
```
```
  }
```
```
  input.gsc-search-button {
```
```
    border-color: #333333;
```
```
    background-color: #333333;
```
```
  }
```
```
  .gsc-tabHeader.gsc-tabhInactive {
```
```
    border-color: #777777;
```
```
    background-color: #777777;
```
```
  }
```
```
  .gsc-tabHeader.gsc-tabhActive {
```
```
    border-color: #333333;
```
```
    background-color: #333333;
```
```
  }
```
```
  .gsc-tabsArea {
```
```
    border-color: #333333;
```
```
  }
```
```
  .gsc-webResult.gsc-result {
```
```
    border-color: #FFFFFF;
```
```
    background-color: #FFFFFF;
```
```
  }
```
```
  .gsc-webResult.gsc-result:hover {
```
```
    border-color: #000000;
```
```
    background-color: #FFFFFF;
```
```
  }
```

  .gs-webResult.gs-result a.gs-title:link,

  .gs-webResult.gs-result a.gs-title:link b {

```
    color: #444444;
```
```
  }
```

  .gs-webResult.gs-result a.gs-title:visited,

  .gs-webResult.gs-result a.gs-title:visited b {

```
    color: #444444;
```
```
  }
```

  .gs-webResult.gs-result a.gs-title:hover,

  .gs-webResult.gs-result a.gs-title:hover b {

```
    color: #444444;
```
```
  }
```

  .gs-webResult.gs-result a.gs-title:active,

  .gs-webResult.gs-result a.gs-title:active b {

```
    color: #777777;
```
```
  }
```
```
  .gsc-cursor-page {
```
```
    color: #444444;
```
```
  }
```
```
  a.gsc-trailing-more-results:link {
```
```
    color: #444444;
```
```
  }
```
```
  .gs-webResult .gs-snippet {
```
```
    color: #333333;
```
```
  }
```
```
  .gs-webResult div.gs-visibleUrl {
```
```
    color: #000000;
```
```
  }
```

  .gs-webResult div.gs-visibleUrl-short {

```
    color: #000000;
```
```
  }
```

  .gs-webResult div.gs-visibleUrl-short {

```
    display: none;
```
```
  }
```

  .gs-webResult div.gs-visibleUrl-long {

```
    display: block;
```
```
  }
```
```
  .gsc-cursor-box {
```
```
    border-color: #FFFFFF;
```
```
  }
```
```
  .gsc-results .gsc-cursor-page {
```
```
    border-color: #777777;
```
```
    background-color: #FFFFFF;
```
```
  }
```

  .gsc-results .gsc-cursor-page.gsc-cursor-current-page {

```
    border-color: #333333;
```
```
    background-color: #333333;
```
```
  }
```
```
  .gs-promotion {
```
```
    border-color: #CCCCCC;
```
```
    background-color: #E6E6E6;
```
```
  }
```
```
  .gs-promotion a.gs-title:link,
```
```
  .gs-promotion a.gs-title:link *,
```
```
  .gs-promotion .gs-snippet a:link {
```
```
    color: #0000CC;
```
```
  }
```
```
  .gs-promotion a.gs-title:visited,
```
```
  .gs-promotion a.gs-title:visited *,
```
```
  .gs-promotion .gs-snippet a:visited {
```
```
    color: #0000CC;
```
```
  }
```
```
  .gs-promotion a.gs-title:hover,
```
```
  .gs-promotion a.gs-title:hover *,
```
```
  .gs-promotion .gs-snippet a:hover {
```
```
    color: #444444;
```
```
  }
```
```
  .gs-promotion a.gs-title:active,
```
```
  .gs-promotion a.gs-title:active *,
```
```
  .gs-promotion .gs-snippet a:active {
```
```
    color: #00CC00;
```
```
  }
```
```
  .gs-promotion .gs-snippet,
```

  .gs-promotion .gs-title .gs-promotion-title-right,

  .gs-promotion .gs-title .gs-promotion-title-right *  {

```
    color: #333333;
```
```
  }
```
```
  .gs-promotion .gs-visibleUrl,
```
```
  .gs-promotion .gs-visibleUrl-short {
```
```
    color: #00CC00;
```
```
  }
```
```
&lt;/style&gt;
```

title - The title of the widget. I've given the title as Zesty Beanz Search.

Now our new widget will be available in the Homepage Widgets Management in the web client. We can add the widget from here and the widget will be available at the right hand side of the web client.

India

.

UAE

Germany

Adding a widget in OpenERP Web Client

Contact Form