How to trap the Error in a UI Widget

Appu Nair

I took the smart UI Documentation zip file and in there was a quick example of calling the folder browser widget. What I need help with is about two aspects.

1. One if the Authentication fails instead of the OT alert I have a console.log it will say "Error Fetching Initial configuration".I am running Fiddler and I can see an error occurred after the post of the REST API but somewhere inside the framework, something is translating that to the message I receive. Since that is a simpler one I think I can do my alerting mechanisms so there isn't much I am missing here.
2. The second aspect is where I need more clarity to suppose the page works as far as authentication happens and if I give a nonexistent dataid for it to start then that error block never registers anything but I get a modal window set by OT. The modal window wills ay something like "Error
   Sorry, the item you requested could not be accessed. Either it does not exist, or you do not have permission to access it. If you were sent a link to this item, please contact the sender for assistance."

Does anyone have any samples/examples to make the UI Widget more debugger/programmer-friendly as I am only learning JS debugging?

Ideally, I want to create a UI Widget embedded like these examples doing as little programming or changes in my side

This one has a page that takes you to https://knowledge.opentext.com/knowledge/piroot/eep/v200200/eep-cgi/en/html/_manual.htm HTML code for a 

I started there but again I am at a loss to understand how those closures/scoping and other things work really because the Jquery I have seen is much older has callbackobjects and things like that. Will that code understand a callback object and if anyone has an example?

The page I attach should work straight out if you have a working LL server and using Postman you can get an OTDSTicket:)

7.1.1 – Integrating the folder browse widget  

Appu Nair

The modal I am saying is something that looks like this I do not know why the function (error) never gets called in this condition

Ian_Whitfield

Hi Appu,

The integration pages are not really an area I'm that familiar with. However, I took a quick look at the example and I think the way this works is the onReady3 helper takes the error function as an argument and that only gets triggered when there is a problem loading the csui framework preventing if from being ready to load your widget. Perhaps authentication failure is one of these scenarios.

In this case the framework loads successfully but the modal error you see comes from the FolderBrowserWidget when it fetches the node after the framework has loaded. The error comes from csui/integration/folderbrowser/impl/folderbrowser.view.

      // Handle errors from the drill-down action, which re-fetches the context
      this.listenTo(context, 'error', this.handleFetchError);

    handleFetchError: function (request) {
      var error = new base.Error(request);
      this.tableView.cancelFetch();
      this.tableView.renderError();
      ModalAlert.showError(error.message);
    }

The ModalAlert.showError is what loads the error you're seeing with the node fetch error. The handleFetchError is triggered by the Backbone listenTo util which is listening for any error events encountered by the context object while fetching models and collections. I don't see an API option to suppress the error in this component or to pass in a custom handler. I'm guessing this is a util to make it simpler to load a Nodestable widget and has certain pre-baked behaviours. Since the component that is showing the modal is in an impl folder that means it's private which makes it harder to change the default behaviour because any assumptions you make about functions and listeners could change. Perhaps others have suggestions on how this might be done but it sounds like a feature request to allow custom error handling with that particular component might be needed.

Cheers
Ian

Appu Nair

Ian_Whitfield said:

Hi Appu,

The integration pages are not really an area I'm that familiar with. However, I took a quick look at the example and I think the way this works is the onReady3 helper takes the error function as an argument and that only gets triggered when there is a problem loading the csui framework preventing if from being ready to load your widget. Perhaps authentication failure is one of these scenarios.

Thanks very much Ian. I  am leaning towards the fact that the usage of UI Widgets is in use cases you know that will work.I was debugging and was chasing rabbit hole after rabbit hole. I abandoned the idea and went old fashioned some pseudo-code like here


Needs Jquery(if not in Livelink)
Call Auth if Succesful pass info of OTDS token to CallbackSuccess;
If not show error :
Next
Try to see if a call to retrieve Folder works
if Succesful pass info of DatID ID from response  to CallbackSuccess2;
Then Use UIWidget Code form OT to paint the Div.
if Succesful and DataId needs to get created
Handle Folder Creation Get Id which if successful would be on Response
Then Use UIWidget Code form OT to paint the Div.

Seems to work for me although everything is slow than what I need it to be...

My understanding and you can correct me if I am wrong is

1. Use Widgets and the maximum you can do is Styles and Framing and if you are lucky the widget code in its documentation will say it can take some parameters.
2. Cannot control Modal without getting into internal OT code meaning JQUERY DOM manipulation that we used to do in yesteryears are not really possible.

One of these days will get into SmartUI for real
Currently, it is a huge learning for me...

Ian_Whitfield

Hi Appu,

Ok. As you say that would be slower because you are getting the node twice in that scenario via Rest.

For the Smart View SDK it's really just a question of what the particular component you are using supports and what it was designed for. In this case the folderbrowser component is pretty well documented in the markdown file (csui/integration/folderbrowser/folderbrowser.widget.md) and has quite a few API options. However, this is designed as an integration API to make it as simple as possible to render a nodes table widget while handling all the common things like what happens if the context fetch fails for the node. If you want everything the folderbrowser provides but just want to change the one thing regarding how the errors are handled then it might be good to log a feature request to add an API option for this. If you want to handle that yourself and have a more custom approach in general you probably need a different SDK component. You can just create the Nodestable widget and fetch the context yourself. There is the BrowsingContext object to help with that which has a markdown file at csui/utils/contexts/browsing/browsing.context.md. Here is a simple code sample for how you'd do this and handle the success and failure of the fetch to do something custom:

	<body class="binf-widgets">
	
		<div id="content"></div>
		
		<script>
				
			csui.require.config({
				config: {
					'csui/utils/contexts/factories/node': {
					  attributes: {id: 2000}
					},
					'csui/utils/contexts/factories/connector': {
						connection: {
							url: 'http://server/cgi/cs.exe/api/v1',
							supportPath: '/supportdir',
							credentials: {
								username: 'Admin',
								password: 'livelink'
							}
						}
					}
				}
			});

			csui.onReady2([
				'csui/lib/marionette','csui/utils/contexts/browsing/browsing.context', 'csui/widgets/nodestable/nodestable.view'
			], function(Marionette, BrowsingContext, NodesTableView ) {
			
				var region = new Marionette.Region({el: '#content'}),
					context = new BrowsingContext(),
					nodesTable = new NodesTableView({
						context: context
					});

				region.show(nodesTable);

				function contextFetchSuccess(response){
					console.log("Context fetch succeeded");
				}
				
				function contextFetchFailure(response){
					console.log("Context fetch failed");
				}
				  
				context.fetch()
						.done(contextFetchSuccess)
						.fail(contextFetchFailure);
						 
			});

		</script>
			
	</body>

Cheers
Ian

Appu Nair

@Ian_Whitfield great piece of code I am trying to make this code work it worked for me as a simple HTML file once I threw the widgets script code and styles. It is quite possible you played with this in WR. The place where I want to embed this is a different web application (java based code).It looks wonderfully promising! Good Job!