New tab in the UI


#1

Hi ,

Is there anyway that i can configure the tabs i am interested in. Like say i only want portfolio , position and timeseries tab with a tab that i made , how can i do that with minimum effort. ?

As always appreciate a lot for all your help and efforts.

Thanks
Vineeth


#2

I’ve asked someone on the WebUI team to take a look at your question. They should get back to you here shortly.


#3

Hello Vineeth,

If you open up the file og.common.masthead.ftl in the directory:

OG-Platform/projects/OG-Web/web-engine/WEB-INF/pages/prototype/modules/common/

you will find the list of tabs in the administration interface. As you can see, aside from the link to analytics, all of the others are actually just #hash links. If you want to remove a tab, just removing its link in this file will do it.

To create a new tab, you have three options

  1. Create a whole new file (like the analytics file). The web root is located at:

OG-Platform/projects/OG-Web/web-engine/WEB-INF/pages/prototype/

You can use the file gadget.ftl as a stripped down model if you like.

  1. Create a #hash link like the other tabs and write a Javascript view. If you choose this option, you will need to use our view framework. Let me know if you’re going this route because it’s slightly more complex.

  2. Link to an external file on another service altogether.

I hope this helps!


#4

Hello @afshin ,

I forgot to mention one thing. I am trying to see if i can get my requirement without touching OG-Web.
I haven’t fully reviewed the options you gave me , anyway let me get back to you after that.

Thanks
Vineeth


#5

I followed the following steps

  1. Added
  2. reports

to ./web-engine/WEB-INF/pages/prototype/modules/common/og.common.masthead.ftl

2)Placed the file - https://gist.github.com/2579224
at ./web-engine/WEB-INF/pages/prototype/reports.ftl

3)Added



/scripts/og/api/og.api.text.js




/scripts/og/views/og.views.reports.js

at
./config/com/opengamma/web/uiResourceConfig.xml

  1. Placed https://gist.github.com/2579254 at ./web-engine/prototype/scripts/og/views/og.views.reports.js

  2. Made the following change to
    common.layout = (({
    ‘analytics.ftl’: common.layout.analytics,
    ‘reports.ftl’: common.layout.analytics,
    ‘analytics2.ftl’: common.layout.analytics2,
    ‘admin.ftl’: common.layout.admin
    })[window.location.pathname.split(’/’).reverse()[0].toLowerCase()] || $.noop)();
    at ./web-engine/prototype/scripts/og/common/og.common.routes.js

  3. And finally placed my HTML and dependencies at folder - ./web-engine/reports/

Is this the right way of doing ?

Again i am intrested to know if there is any method by which i can add the tab without touching OG-Web. This will save me the time to merge from upstreeam.


#6

So, @afshin is better placed to answer the general method questions, but I did discuss the question of adding features without touching OG-Web and while I don’t think there’s currently a way of doing it, we thought it was a good idea that would be useful for us internally too. So you can reasonably expect us to add some method of doing this (probably along the lines of a project that can essentially overlay the files in OG-Web) pretty soon. One thing I might suggest is using ftl/urls with a name less generic than ‘reports’ as it’s probably likely to be something we’ll add at some point (also no such thing is under development yet). Obviously that’s purely up to you, but I just want to avoid you having to deal with name clashes later on.

@afshin will get back to you.


#7

Hi @vineeth,

The steps you described ought to work. Have you created a segment in uiResourceConfig.xml that describes all the JS resources you want in og_reports.js? As an example, you could copy the og_gadget.js bundle since it is fairly barebones.

Additionally, you don’t actually need to use our Javascript view code in your FTL file. That file can contain pretty much anything you like.

Are you getting any errors?


#8

@afsin - Things are working pretty well. The solution i have told is working for me. Anyway let me look into all the suggestions you have given.
Thanks a lot for your answers.

Thanks
Vineeth


#9

I followed the same steps. I always get javascript alert as follows.

/ UI Layout Initialization Error

The specified layout-container does not exist.

How can I fix it?


#10

it also shows me

Reason: Not Found

after the javascript alert.


#11

Yes I could add a blank with successfully with a new ftl file. thank you .and looking for how to fill the page with data using ajax call…


#12

I lost the header when I remove the following line from the newly added ftl file. https://gist.github.com/febintt/5875893

${ogScript.print(‘og_common.js’,false)}

If it is there, I could see that a repeated ajax call (
POST http://localhost:8080/updates/70) is produced. How can I fill the new tab with data by an ajax call?

What I really need is to fill the newly added tab with a data table from the OG server with out loosing the header flow.


#13

Hi Febin,

I’ve asked one of our engineers to take a look at your question and he should get back to you here shortly.


#14

Morning Febin,

I have gone though the process of creating a tab called ‘Fields’ using the view pattern that @afshin and @vineeth discussed above.

These are the steps I took:

  1. Create OG-Web/web-engine/WEB-INF/pages/prototype/fields.ftl

    https://gist.github.com/pondmouse/5926675

  2. Add the following to og.common.masthead.ftl

<li><a href="fields.ftl" class="og-fields">Fields</a></li>
  1. Add the following to common.layout in og.common.routes.js
'fields.ftl':common.layout.fields
  1. Add the following to the end of og.views.common.layout.js

    https://gist.github.com/pondmouse/5926693

  2. Create OG-Web/web-engine/prototype/scripts/og/views/og.views.fields.js

    https://gist.github.com/pondmouse/5926711

  3. Create OG-Web/web-engine/prototype/styles/fields/og.fields.OG-layout-fields.css

.OG-layout-fields-container {
  height: 100%;
  background: #fff;
}
  1. Update uiResourceConfig.xml to include the new files

    add a top level css bundle

<bundle id="fields.css">
  <fragment>/styles/fields/og.fields.OG-layout-fields.css</fragment>
</bundle>
then add 
<bundle idref="fields.css" /> to <bundle id="og_all.css">
add a top level js bundle
<bundle id="og_fields.js">
  <fragment>/scripts/og/views/og.views.fields.js</fragment>
</bundle>

Remember to restart your server after updating the config xml.

Finally I have added a quick example to get some data via an ajax call to populate a drop-down with region codes.

https://gist.github.com/pondmouse/5926741

The " UI Layout Initialization" error was probably down to the class names in og.views.common.layout.js not matching those in fields.flt

Let me know if this works for you.


#15

Thank you Ian for giving me some light to the ui side.

I successfully added a tab to the existing ui with header and I got a point to start. even though I did not get filled with the data as example.

hope that replacing that part with with an jquery ajax will work.

putting some javascript in the ftl file satisfied for now.

Thanks once again…


#16

Congrats to the OG team for the new release 2.1, looks like a lot of nice features.

Quick question: On the gadgets in the analytics tab, Where do you look for making custom changes, like adding/modifying etc. Also is it possible to have them outside of the analytics tab like in timeseries tab etc. What is the underlying framework for understanding and learning more about it.

Thanks again
Regards


#17

Hi joepaulp

If you are looking to make changes to the analytics view a good place to start would be to look at og.common.gadgets.gadgetscontainer.js which houses the gadgets. It is also responsible for handling the tabs for multiple gadgets, drag and drop, inplace gadgets and changing gadgets to other supporting types (for example swapping over from a yield curve to the underlying data)

The gadgets can exist outside the analytics view. If you try opening an inplace gadget and drag and drop it into the main grid you will see if open in a new page (localhost:8080/jax/bundles/fm/prototype/gadget.ftl). The various types of gadgets can be found here OG-Web/web-engine/prototype/scripts/og/common/gadgets/og.common.gadgets.*.js. You could also look at how the timeseries exist in the admin pages (localhost:8080/jax/bundles/fm/prototype/admin.ftl#/timeseries/)

Regarding frameworks, most of the functionality is custom written. For plotting graphs we use flot and three and jquery to handle ajax. I would suggest you have a look at the various rest objects in OG-Web/web-engine/prototype/scripts/og/api/ to see how we handle the requests to the server.


#18

Thanks Ian for the detailed reply. Appreciate your help mate.

Thanks