Integrating SmartUI into Angular

Hi,

I'm working on an Angular 2 project using Webpack and want to incorporate the TargetPicker widget of the SmartUI SDK. Given that the SmartUI SDK uses RequireJS can anyone offer advice on how to use the SmartUI SDK in an Angular with Webpack environment?

Thanks,

Greg

Find more posts tagged with

Comments

Ferdinand Prantl

You wouldn't want to compile Smart UI to your project output. You would use the TargetPicker widget like Google Maps or other widgets, whcih are supposed to be loaded on your page from their origins during the runtime.

  <link rel="stylesheet" href="http://server/support/csui/themes/carbonfiber/theme.css">  <script src="http://server/cgi/cs/widgets?crossOrigin=true"></script>  <script>    csui.onReady2([      'csui/integration/target.picker/target.picker'    ], function (TargetPicker ) {      var targetPicker = new TargetPicker({        connection: {          url: 'http://server/cgi/cs/api/v1',          supportPath: '/support',          credentials: {            username: 'user',            password: 'password'          }        },        start: {id: 2000},        selectable: {type: [144]},        ui: {TargetPickerDialogTitle: 'Pick a Document'},        done: function (args) {          if (args.node) {            alert('Selected: ' + args.node.name);          }        }      });      targetPicker.show();    });  </script>

Naidu_Greg

Thanks for the information Ferdinand.

Here's a bit more detail for people new to Angular wanting to incorporate the SmartUI for CS16 into their Angular project:

1. Include the CSUI 16 JS library and CSUI 16 CSS as described in Ferdinand's post.

2. In your component TS file:

declare var csui: any; //(for non-typescript libraries) create a library global object which gives you access to the CSUI API library

private initPicker() {
var serverOrigin: string = '<CS Server URL>';
var cgiUrl: string = serverOrigin + '/<CS Server Virtual Path>/llisapi.dll';
var supportUrl: string = serverOrigin + '/img';
var startNodeId: number = 2000;
var startNode = { id: startNodeId };

csui.onReady2(['csui/integration/target.picker/target.picker'
], (TargetPicker) => {

var targetPicker = new TargetPicker({
connection: {
url: cgiUrl + '/api/v1',
supportPath: supportUrl,

//this section can be replaced with Authentication Headers
credentials: {
username: 'username',
password: 'password'
}
},
start: startNode,
selectRows: "multiple",
selectable: {
type: [144]
},
done: (args) => {
if (args.nodes.length) {
var nodes = args.nodes.map(function (node) {
return node;
});
<Process Node Function>(nodes);
}
}
});

targetPicker.show();

});
}