Creating Browser UIs

As described in Requiring Objects, the content-studio object's createPanel() method returns a PanelControl object representing a Content Studio side panel, and the PanelControl.show('browser') method can then be used to create a BrowserModel object. A BrowserModel object represents a browser component. It has two properties:

content: This property is a string to which you can supply HTML that you want to display in the panel.
uri: This property can be used to specify the URI of an HTML file that you want to display in the panel.

So in order to display your own own user interface component in a side panel using the BrowserModel's uri property, all you need to do is:

Create an HTML file containing the user interface component you want to display.
Store the HTML file in a location that will be accessible from Content Studio.
Write the Javascript code needed to create the panel and display your component in it.

To create a "hello world" panel, for example, you would need to make an HTML file something like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <script type="text/javascript">
    function sayHello() {
      var script = 'require("notifier").notify("Hello world!");';
      scriptExecutor.executeScript(script);
    }
    </script>
  </head>
  <body>
    <input type="button" value="Say it" onclick="sayHello()" />
  </body>
</html>

If you save the file on your local machine as hello.html (and you have a web server running) then you might display it in Content Studio by entering the following code into your Javascript console:

var cs = require('content-studio');
var mypanel = 'http://example.com/studio/sidepanel/hello';
var browserui;

cs.on('panel-init', function(panelcontrol) {
  if (panelcontrol.uri == mypanel) {
    browserui = panelcontrol.show('browser');
    browserui.uri = "http://localhost:8080/hello.html";
  }
});

cs.createPanel(mypanel, '&Hello', 'shift F9');

The result in Content Studio looks something like this:

and clicking on the button displays a "Hello world" notification.