CSUI Development Environment

Abdelfattah Hussein

Hello ,

I want to know how to use the samples in csui-sdk-16.2.4 , i followed the sdk documentation and

iExtracted the SDK and opened its root in the IDE ,

but i don not know the next step ,

if any one can help me (telling me how to use ide with content server or the methodology that the sdk work through)

Find more posts tagged with

Comments

Ferdinand Prantl

You need to create a new project - a directory with the development environment.

The SDK package contains examples and documentation. There is another package with a csui extension generator available. There is a readme file inside that package. Once you install the generator, you will be able to generate a buildable project directory content, which you will be able to open in your IDE too. WebStorm and VS Code are IDEs, which I recommend.

Abdelfattah Hussein

Thank u Ferdinand Prantl

I do this , but i don't know how the project will appear in content server.

i mean (i read that the sdk will call REST API . i ask for the mecanism or steps to make the created or modified project to appear in content server ).

Ferdinand Prantl

Smart UI extensions are deployed as CS modules. Either you already have a CS module, which you want to add the Smart UI extension to, or you will create a new one. You can follow the CS SDK to create a new module in Oclipse.

Once you have the Oclipse development environment running with your CS module, you introduce the Smart UI extension to it. See the slide 7 in "CSUI SDK Intro.pptx" for more information. Later you will regularly build the Smart UI project and update the static assets produced by the Smart UI project in your Oclipse project, which means in your CS installation directory.

  copy "smart_ui_project/out-release/*" to "cs_root/support/your_module/"

You can update the Smart UI static assets on a running server without having Oclipse running. Just restart the server, once you do it. The module bundle and extension configuration files are cached, when the server starts.

Abdelfattah Hussein

Ferdinand Prantl

I will tell you the scenario i followed , i prepared the oscript development environment,

i have created a widget and deployed it and appeared in content server ,

i assigned this widget to user from prespective manager .

The widget shows Wlcome + User Name ..Now i want to show some folder in this widget How ???,

from your information declared above i have imported the Project that created
that contain outmodule

Here >> I don't know whiche files to change

and

how to applay these changes to content server again ??

Kevin Lin

I've got another question here: how do we make a custom node clickable in smart UI? Not all node types are clickable by default in smart UI, even some core CS nodes like form template are not clickable. I could not find any information to implement this.

Is smart UI extension node.js application? If yes, where is node.js running?

Abdelfattah Hussein

Ferdinand Prantl

You can have a look at NodeChildren2Collection (csui/models/node.children2/node.children2). It fetches children of a container:

  var connector = ...  var container = new NodeModel({ id: 2000 }, { connector: connector })  var children = new NodeChildren2Collection(undefined, { node: container })  children    .fetch()    .done(function () {      console.log(children.length, 'children fetched')    })

If you write a widget showing container children, which is supposed to be placed on container perspectives, you can use the contextual children to access the collection. It will be fetched by the perspective and you would only react on it:

  var children = context.getCollection(Children2CollectionFactory)  // Whenever the children change, re-render the widget  this.listenTo(children, 'reset', this.render)

If you want to deploy an updated version of your project on your CS, just copy the build output there and restart it, as I commented above.

Ferdinand Prantl

I replied about making a custom subtype clickable to the original thread.

No, Smart UI is not a Node.js application. Smart UI is an SPA with the entrance page running as a CS request handler (/app), with static assets served from the CS /support directory and communicating with CS by AJAX calls to CS REST API.

Node.js runs build tools and the development web server in a Smart UI project.