OpenGamma UI - custom security configurations

OG-Platform
1

Hello,

We are using OpenGamma v2.1.0. We are going to implement our own security. We need few new configuration pages for our security. New pages should look similar to https://www.dropbox.com/s/kh934rmwmqtj4wc/2013-11-05_1118.png

As we see from code UI is build with JavaScript. Do you have some documentation about your UI framework which could help us create new pages?

Thanks
Andriy

2

A ‘Cash Security’ was recently added to the develop branch so you should be able to follow the same steps as seen in the following commits:

  1. Ensure the security type is supported by the blotter
    https://github.com/OpenGamma/OG-Platform/commit/7f9c525e1af8581c8c921c15982f5cb16845eb14

  2. Specify whether the security is OTC
    https://github.com/OpenGamma/OG-Platform/commit/1488c657abfc2fd9cf5ad57773b9a61e4b1dd6c2

3.1. Create the js file to control the security called og.blotter.forms.yournewsecurity
3.2. Add the new security to the list of available types, note the data-type element should match the name above
3.3 Create the template to be used as markup
3.4 Add the js file to OG-Web/web-engine/WEB-INF/uiResourceConfig.xml
https://github.com/OpenGamma/OG-Platform/commit/e15f052f4e49d33358969a6fef78fcb3dfb923a1

The instructions on adding a new security (not including the UI side of things) can be found here
http://docs.opengamma.com/display/DOC210/Adding+support+for+a+new+custom+Security
The docs here might be a little out of date with some specifics, but generally it should be okay.

3

Thanks Ian,

Can we have more details about step - 3.3 Create the template to be used as markup?

4

Using this commit as and example: https://github.com/OpenGamma/OG-Platform/commit/e15f052f4e49d33358969a6fef78fcb3dfb923a1

We use http://handlebarsjs.com/ templates. So anything in double curly brackets is replaced when the template is compiled.

In the example below, the name attribute translates to the json object that will be submitted with the form. I would suggest you save/or load an existing trade and inspect the json in your browsers developer tools.

<input name='security.rate' type='text' value='{{rate}}'/>

The {{rate}} part is replaced when you pass this variable to the template as part of the extras object.

new form.Block({
   module: 'og.blotter.forms.blocks.cash_tash',
   extras: {start: data.security.start, maturity: data.security.maturity,
      region: data.security.regionId, amount: data.security.amount, 
      rate: data.security.rate},
   children: [
      new form.Block({module: 'og.views.forms.currency_tash', 
         extras: {name: "security.currency"}}),
      new og.blotter.forms.blocks.Regions({name: 'security.regionId', 
         value: data.security.regionId, form: form}),
      new ui.Dropdown({ form: form, resource: 'blotter.daycountconventions', 
         index: 'security.dayCount', value: data.dayCount, 
         placeholder: 'Select Day Count' })
   ]
})

Above we have one of the building blocks of the form consisting of; the module which points to the html template, the extras object, and an array of children blocks. In this case they create a currency dropdown, a regions dropdown and a day count conventions dropdown. These children blocks replace {{item_0}}, {{item_1}} and {{item_2}} respectively.