SmartUI SDK - Integration Code Sample does not seem to be working

Find more posts tagged with

Comments

I was able to move a little further ahead and get the canvas of the NodesTable to display using the following code. I was able to figure out the missing variable declarations.

However, I seem to have an issue with the authentication portion of the code. I believe that I need to pass the OTCS ticket of some sorts into the declaration for the authentication to be picked up, but have no idea on how to do that when it comes to the integration portion.

Would it be via theconnector factory utils?

csui.onReady2(['csui/widgets/nodestable/nodestable.view', 'csui/utils/contexts/page/page.context', 'csui/lib/marionette', 'csui/controls/globalmessage/globalmessage'],function (NodesTableView, BrowsingContext, Marionette, GlobalMessage){

var context = new BrowsingContext(),

nodesTableView= new NodesTableView({

context: context,

data:{

start:{id: 2000}

}

}),

nodesTableRegion= new Marionette.Region({el: '#browser'});

GlobalMessage.setMessageRegionView(nodesTableView);

nodesTableRegion.show(nodesTableView);

context.fetch();

});

Added the connector information and I no longer get any console errors with regards to authentication. However, I now get an authentication error with the username/password being invalid. I’m certain that the supplied credentials are valid. We are authenticated via an external OTDS.

Attached is the updated code so far. I would really appreciate if someone from the SmartUI SDK development team could take a look at this.

I was finally able to bring the code to completion by being able to pass in the LLCookie information into the Connector context instead of a plain username/password. Now, I’m able to get the NodesTableView to display the suggested node information.

Another snag that I’ve hit is as to not being able to click on the folder items and navigate into its children and sub-children. The view is simply set to the node that was passed in. nothing more than that. Is that the expected behavior?

FYI – Attaching the final piece of code for dexterity and for others to refer to in future.

Leonhard

Hello Pramod Mohandas,

looking at your code it seems to be correct.

Generally, the code in the Intro ppt is not expected to be taken as a copy-paste basis for a running example, it is rather exemplifying the resp. extension or operation.

Working examples are given following the links form the sample-index.html file in the SDK. Here you also find a sample for the nodestable widget. Inspecting the code behind you will find that it is very close to yours.

Regarding the 'static' view of your nodestable: If you want to be able to browse, you have to use the BrowsingContext instead of the page context. See

csui-sdk-16.0.3/lib/src/csui/utils/contexts/browsing for src and documentation.

Regards,

Leohard

Hi Leonhard,

Thank you for your inputs.

Apparently, I did try to reference theBrowsingContext via the widgets.js. it doesn’t seem to be available at the location -csui/utils/contexts/browsing/browsing.context.

Where exactly can I pick this up from? Or should I manually import the relevant JS into my code?

Ferdinand Prantl

Notes to the original WRCode.txt:

Do you place it to the TileReport WR widget? You should remove this:

  [LL_WEBREPORT_EXCLUDEHTML /]  <script src="[LL_REPTAG_URLPREFIX /]/widgets"></script>  <link rel="stylesheet" href="[LL_REPTAG_SUPPORTDIR /]csui/themes/carbonfiber/theme.css">

You load CS UI Widgets framework again. It has been loaded on a Smart UI page earlier. Unless you put the WR code in an iframe, you do not need it. The TileReport widget does not use iframes, if you do not insert there one yourself.

Generally, it might not cause problems, except for making the page loading slower, but because of the real implementation of CS modules it could break styling of some components.

Bugs

As Leo wrote, the code from the Powerpoint slide illustrated the idea, but was shortened to fit to the projector beam on the wall :-) It was not compiled and tested. The correct code would look like this:

  csui.onReady2(['csui/lib/marionette',    'csui/utils/contexts/browsing/browsing.context',    'csui/widgets/nodestable/nodestable.view'  ], function (Marionette, BrowsingContext, NodesTableView) {    var context = new BrowsingContext(),        nodesTableView = new NodesTableView({          context: context,          data: {            start: {id: 2000}          }        }),        nodesTableRegion = new Marionette.Region({el: '#content'});    nodesTableRegion.show(nodesTableView);    context.fetch();  });

However, some necessary code changes were not included in the released CS 16.0.3 and they are waiting for a hotfix, or for the 2017/03 CS Update (16.0.4). For example, BrowsingContext and PortalContext, which are used in CS UI SDK, are missing on CS. The code below uses workarounds for the following problems of the vanilla CS 16.0.3:

BrowsingContext is missing
NodesTableView does not support starting node selection

  csui.onReady2(['csui/lib/marionette',    'csui/utils/contexts/page/page.context',    'csui/widgets/nodestable/nodestable.view',    'csui/dialogs/modal.alert/modal.alert',    'csui/utils/contexts/factories/node',    'csui/utils/contexts/factories/next.node'  ], function (Marionette, PageContext, NodesTableView, ModalAlert,      NodeModelFactory, NextNodeModelFactory) {        // Manages models and collections (data), which control        // views and routers    var context = new PageContext(),        // Shows children of a container in a table        nodesTableView = new NodesTableView({          context: context        }),        // Places a view to a specific HTML element        nodesTableRegion = new Marionette.Region({el: '#browser'}),        currentNode = context.getModel(NodeModelFactory),        nextNode = context.getModel(NextNodeModelFactory);    // Place the table to the HTML element    nodesTableRegion.show(nodesTableView);    // Start browsing of a specific node container    currentNode.set('id', 2000);    // When a chaange of the current container to other one was    // requested, update ID of the current container and re-fetch    // content of models and collections from the server    nextNode.on('change:id', function () {      if (nextNode.get('container') !== false) {        currentNode.clear({silent: true});        currentNode.set('id', nextNode.get('id'), {silent: true});        context            .fetch()            .fail(function (error) {              // Show the error message              ModalAlert.showError(error.toString());            });      }    });    // Fetch content of models and collections from the server    context.fetch();  });

Thank you for your valuable inputs as always Ferdinand.

Yes. I’m trying to display the NodesTableView widget via an iFrame using WebReports and after fixing my code with your suggestions, I was able to finally get the drill-down portion of the widget to work as expected. Great !

I would like to point out a possible bug with the display of the CSS. In particular -

1. The table header row is having unnecessary amount of width which doesn’t go away with resizing.

2. Misplaced Icons

Attached is a screenshot for you reference. You could try to replicate this issue at your end by running the WebReport code at your end. I have attached that as well.

WagFormatterClass.JPG.jpg

StorageClass.JPG.jpg

CommonAnnotationStorage.jpg

NodesTableView_Widget_Issue.png

@Ferdinand - Were you able to replicate the CSS issues that were outlined by me in my previous post? I believe that some of the CSS is overriding and not wrapping the header properly.

Leonhard

Hello Pramod Mohandas,

your code is ok, while it is more complex than needed, but may help you understand what's going on behind the scenes. You could have reached this more easyly however, e.g. by using the BrowsingContext instead of the PageContext. See e.g. the documentation of BrowsingContext (in csui-sdk-16.0.3/lib/src/csui/utils/contexts/browsing/browsing.context.md), where almost literally your case is shown.

Regarding the usage of NodesTableView in WebReports tile and the layout issues you observer, we still have to reproduce it. We will write as soon as possible.

Regards,

Leonhard.

Hi Pramod,

Can you clarify the entire setup for this please?

How does the iframe fit into this setup?
Is there a wrapper WebReport that has the iframe, which is being loaded in the classic UI or an external environment? Or is the iframe in an external page somewhere else?
Is the WRcode you posted being used as an HTMLWebReport widget within a perspective?
Have you customized any of the CSS in this instance?

If you can outline the steps required to reproduce the odd CSS we can take a closer look or provide some pointers.

Thanks,
Jordan

RE SmartUI SDK - Integration Code Sample does not seem to be working

Hi Jordan,

Thank you for your response. PFB my comments inline to your previous post.

I’m attaching two renderings of the same WR for your investigation.

IE – The table header and row is bloated and design is totally disrupted. However, resizing the IE window to a smaller dimension fixes the row part.
Chrome – apparently everything works just fine except for the misaligned icons on the top.

I hope that the mentioned details should help you with replicating the issues. Kindly let me know if you require any additional information with regards to the setup.

Posted by Gladstone, Jordan On 01/25/2017 02:03 PM

Hi Pramod,

Can you clarify the entire setup for this please?

How does the iframe fit into this setup?

[PM] The iFrame is merely to display the widget inside it. What I intend to do is to plug this widget containing WR onto an HTML page.

Is there a wrapper WebReport that has the iframe, which is being loaded in the classic UI or an external environment? Or is the iframe in an external page somewhere else?

[PM] Yes. There ultimately will be one. The intended page is a customized WR with an iFrame inside which the widget-containing WR will run. They’re all currently residing inside CS.

Is the WRcode you posted being used as an HTMLWebReport widget within a perspective?

[PM] No. This WR is simply used as a click-to-run WR. The result that you see is how the NodesTableView looks like when the WR is simply executed.

Have you customized any of the CSS in this instance?

[PM] No. This WR is currently running in its de-facto settings. No CSS is touched.

If you can outline the steps required to reproduce the odd CSS we can take a closer look or provide some pointers.

[PM] Sure. The steps are as follows -

Create a new WR using the blank HTML template.
Copy/paste the code that I’ve attached in this post.
Run.

Thanks,
Jordan

Hi Pramod,

Thanks for the additional details. It wasn't clear if you were running the WR from the classic view, or if you were feeding it back into the smartUI via an HTMLWebReport widget for some reason in the original posts.

Since you're using the [LL_WEBREPORT_EXCLUDEHTML /] tag in the WebReport, you lose all of the normal Content Server weblingo structure, including the doctype. Without that doctype, strange things can happen. You can add it back in directly in the WebReport itself.

I would also suggest setting up a proper head and body elements as well, to reduce any issues when the browser attempts to add them in for you.

I've attached an updated version of your original code in the WebReport. The main changes are the doctype, and a proper html doc structure (html/head/body tags), which should solve the issues you're seeing in IE. Also, if you want the whole page to look more like the smartUI, you could look at including some of the parent elements that use the same classes as the smartUI.

Thanks,
Jordan

WRCode_updated.html

Fantastic !

Thank you so much for the updated code and as per your guidelines, it now works as expected. I shall keep them in mind for future references too. J

Hi Ferdinand/Jordan,

I would like to know the capabilities of the NodeTablesView. Is it possible to Add/Delete documents or folders while in this view or just normal view/browsing? The reason being that while I’m running this WR, I’m getting console errors for some uninitialized components from the JS file which I believe isn’t right.

Attached is a screenscap of the console error.

SmartUI_Console_Error.png

Hi Pramod,

All of the normal functionality of the NodesTableView should be supported when running it using this way. This includes adding/renaming/deleting/filtering/etc nodes. Can you provide some more details on what action you were doing when you hit the JS error in the console?

Thanks,
Jordan

Hi Jordan,

I was performing the node delete functionality when I hit the error on the console. I suppose that if the example was run via a WR, you too might hit the same error. Onscreen, the view does not respond to the said action.

Hi Pramod,

I have a copy of your code running in a WebReport, and I can delete a node in the NodesView widget successfully. Have you altered the WebReport code since the last post?

It will be helfpul to isolate whether it's related to the fact that it's running in a WebReport, or if the same thing happens if you run it off the webserver directly. A good test would be to copy the WebReport content into an .html file on your webserver's root, and replace the WebReport tags with their hardcoded value.

Thanks,
Jordan

Hi Jordan,

No. I haven’t made any changes to this. All I did, and did try just now, was to simply copy/paste your code into a WR and open it. Unfortunately, I still get the same error with the MessageHelper.js not being able to find el property. Do you think if this has something to do with the versions of the csui-js file itself?

More specifically, Create works. Delete/Add doesn’t.

That’s why I assumed that the additional functions might not be working.

I did as you suggested. Tried running it via the npm server and hardcoded values and it threw a lot more errors. Couldn’t get the page to load properly.

Hi Pramod,

Just an update that I haven't been able to recreate this on a 16.0.3 instance using the release code in the SDK. I added the attached as a version to a WebReport and performed the following steps:

- Click the + button and added a new .pdf document to the EWS,
- The new pdf was uploaded,
- Select/tick the checkbox next to the newly added pdf,
- Click the "Delete" option from the same bar that has the + to add a new node
- Node is deleted successfully.

For reference, the code was just the example Ferda posted earlier with the doctype added in and some additional WR tags to make the support dir dynamic (see attached). Let me know if you're taking different steps to get the behaviour you're seeing.

Thanks,
Jordan

WRCode_updated_JG.html

Hi Jordan,

Thank you for getting back to me on this.

Unfortunately, I still seem to be facing this issue with the error inside the console spitting out –

Cannot read property 'el' of undefined

at the../../src/utils/messagehelper.js file. To confirm, I did try the same code on another instance of 16.0.3 and ended up with the same result.

Ferdinand Prantl

About the "'el' of undefined" error in ../../src/utils/messagehelper.js:

Some components of CS UI Widgets show success or error status. This is often done not by a modal dialog, but by a floating message panel, called a global message. It is similar to toast messages, but it is placed at a fixed location, usually at the top of the page.

These messages needed an explicit initialization in CS 16.0.3, otherwise their showing would fail, as you found out. CS 16.0.4 made the initialization optional. If you do not override it, they will be placed at the top of the page body. If you want to change it, or if you work with CS 16.0.3, you need to specify the position explicitly, for example:

  csui.onReady2([...,    'csui/widgets/nodestable/nodestable.view',    'csui/controls/globalmessage/globalmessage'  ], function (..., NodesTableView, GlobalMessage) {    var ...,        nodesTableView = new NodesTableView(...),        nodesTableRegion = ...;    GlobalMessage.setMessageRegionView(nodesTableView);    nodesTableRegion.show(nodesTableView);  });

You can also dedicate the place by a placeholder element on your page:

  GlobalMessage.setMessageRegionView(nodesTableView, {    classes: 'myintegration-global-message'  });