Smart UI commands - implementing the open classic view example

HFCDev

Hi,

Really hoping that someone in the know reads this and responds. I'm trying to implement a Smart UI command. For my needs, I am using the open.classic.command from the Smart UI SDK sample (Content Server 21.4, btw). I'm integrating with another smart UI extension that adds a Vue dialog to the interface which I don't want to interfere with, so generating a <mymodule>-all.js file is what I'm trying to avoid.

The existing extensions work and I have them deployed in OTHome\support\<mymodule>\smartui\bundles, and I have a <mymodule>-extensions.json file in OTHome\support\<mymodule>\smartui\. The sample code came from

CSUI SDK Home\samples\commands\open.classic

I tried two approaches to this:

1) Don't use existing <mymodule>-index.json and <mymodule>-all.js

2) use the existing and add the sample code to <mymodule>-all.js and add to the list in <mymodule>-index.js

Neither approach gave me a command, but in both approaches I can see my open.classic JS files being loaded (I put console.log() statements in them both).

For the first use case, I added to my <mymodule>-extensions.json file as per the readme in the sample code folder. I then added the contents of the open.classic folder under OTHome\support\<mymodule>\smartui\commands.

For the second use case, I added the two extensions from open.classic to the <mymodule>-index.json file in the bundles directory and added the code to both to the <mymodule>-all.js file in my bundle.

In both examples, I see any console.log() statements in the Javascript that I may add, so they are being loaded in both scenarios, but the command is never being added. I even added a default enabled method to the open.classic.command.js file to so I could make it conditional. It never gets called.

So the overarching question is this: what am I missing? Assuming I'm not missing anything, is there anything missing from the sample code? Should the sample code not have an enabled method? If not, why not?

Thanks in advance

-Hugh

HFCDev

PS I took another sample command, the Hello command and same thing as with the open.classic - I see it loading the JS for the command JS but I never see the command itself being invoked. I also never see the enabled: method on the Hello ever get called (the open.classic.command has no enabled method surprisingly).

-Hugh

Jan Velas

Hello Hugh,

From what I understood, you have an existing Smart UI extension (let's call it hugh 😉) and want to add a new command in there, but it's not working. The command never shows.

I'm not sure what's wrong, but for a command to actually show somewhere, you have to do a few steps:

• Create your command code (copy from SDK or make your own)
  • This means ****.command.js, which extends CommandModel
  • Plus a ****.nodestable.toolitems.js file, (which you pass to the nodestable widget using hugh.extensions.json later)

//open.classic.nodestable.toolitems.js
define(function () {
  'use strict';


  return {
    // "otherToolbar" here stands for one of the nodetables toolbars. 
    // There's also an "inlineActionbar", which shows when you mouse over a row
    otherToolbar: [ 
      {
        signature: 'OpenClassicCustom', // Must be same as the command signature
        name: 'Open Classic Page'
      }
    ]
  };


});

• Add the two .js files mentioned above into your src/bundles/hugh-all.js

// Placeholder for the build target file; the name must be the same,
// include public modules from this component


define([
  'hugh/commands/open.classic/open.classic.command',
  'hugh/commands/open.classic/open.classic.nodestable.toolitems'
], {});


require([
  'require',
  'css'
], function (require, css) {


  // Load the bundle-specific stylesheet
  css.styleLoad(require, 'hugh/bundles/hugh-all');
});

• Add the files into your src/hugh-extensions.json

{
  "csui/models/server.module/server.module.collection": {
    "modules": {
      "hugh": {
        "version": "1.0"
      }
    }
  },
  "csui/utils/commands": {
    "extensions": {
      "hugh": [
        "mps/commands/open.classic/open.classic.command"
      ]
    }
  },
  "csui/widgets/nodestable/toolbaritems": {
    "extensions": {
      "hugh": [
        "mps/commands/open.classic/open.classic.nodestable.toolitems"
      ]
    }
  }
}

• run grunt and copy the out-release contents into your OTCS/support/hugh folder on the CS location
• The command should now be showing inside the nodetable's top header (after you select an object using the checkbox in the leftmost column)

Can you check you got all these steps?

Other useful information:

• The open.classic.command has no enabled method, because it "inherits" it from CommandModel
• 'open.classic.command' extends 'csui/utils/commands/open.classic.page' which extends 'csui/models/command' which has the default enabled implementation hidden inside.
• It's actually possible to test and develop commands using the local server in the extension, but it takes some test/index.html setup

I've ran out of time, but I hope you have good luck with solving your problem.

I remember how happy I was when I finally managed to get the open.classic.command working for the first time 😅

HFCDev

Hi Jan,

I appreciate the posting. This is far more comprehensive than ANY documentation I've found on smart UI from OpenText (@OpenText, are you listening?). However, I'm still getting the same results as with the approaches I had already tried. That is, I can see that the JS code for the command does get executed (well, loaded as I have a log statement in the function body to indicate that at least it's running the file).

As with my previous attempts, I never ever see anything show up in the commands list. There appears to be something else. Can anyone tell me where I should be looking for a command to register itself and where I can review that registry? This appears to be in JS not Oscript.

-Hugh

HFCDev

I got a little further with this. I didn't get the open.classic example to work but I did get the rename example to work. To make it work, I had to in my source use define and require which then get replaced with csui.define, and csui.require in <module>-all.js

The really odd thing was that anything in the impl folder in the rename example had to be copied directly across to my OTHome\support\<module> directory under commands, and there I had to manually replace define and require. I now recall, and will try this next....I probably have to add all the files in the impl like rename.view.js to the template <module>-all.js.

Once I see that all working, the next step will be to figure out how to combine with an existing <module>-all.js that has vue code.

-Hugh

Ferdinand Prantl

If you want to introduce a new command, you have to add it to some Smart UI extension. You can use libraries like Vue and load their build output with or without RequireJS, but you will not be able to avoid exposing the features with -all.js and -index.json in a Smart UI project. If you want the feature written with View only on a particular page, you can try wrapping in in a WebReport widget.

The sample source files are not supposed to be deployed to support like OTHome\support\<mymodule>\smartui\commands. The RequireJS optimiser introduces the csui namespace and module names exzcept for bundling all sources to -all.js. While it is possible to prepare a build output meant to be consumed by the productive application, it does not make sense from performance reasons.

The sample code is supposed to be copied to a Smart UI project and the module names renamed accordingly. The Smart UI project can be built and deployed as usual. Every example should include a documentation file describing it.

If you compile the Vue output to AMD/ES5, you will be able to include it as other RequireJS modules. Otherwise you can insert the .js and .css assets to document.head by a custom code in a RequireJS module.

Clarke

Hello All,

I was able to get v21.4.0 SmartUI SDK generator working and make the OScript Module.

I then was able to get the Open Classic Page 'sample' working and I was able also able to remove a bunch of junk from the Smart UI from this post:

https://forums.opentext.com/forums/developer/discussion/310029/smart-view-action-bar-changes

-MC