nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Item not clickable in smart view

Kevin Lin

I applologize for double posting. The same topic in general forum got no response.

What do I have to do to make a custom subtype clickbale in smart view? Is it something configurable in admin page / opentext.ini file, or oscript change in the module that creates the custom node?

Find more posts tagged with

Comments

Kevin Lin

OK, I have waited 6 months yet no answer.

Can someone please point me a direction on how to make a custom node clickable? How can such a simple thing this difficult?

Ferdinand Prantl

I'm sorry, your question appears to have sunk too much down in the lists of posts :-) Bumping your question after a week of silence would a good way how to prevent it. Consider it for the next time, please. Thank you!

Making a custom subtype clickable means, that the hyperlink with the node name in the table, list or other controls, which represent a node, will be clickable and perform the most usual action for the node type. Drill down to a folder (Folder, 0), open document content (Document, 144) or navigate to a URL (URL, 14). This concept is called default action in Smart UI. Because all actions in Smart UI are handled by command executions, you will need to assign some command as a default action to your subtype.

If your subtype is a container, the drill-down action will be supported automatically. If your subtype is non-container, you will need to choose an existing command or add a new command specific to your subtype.

Typically, there are three operations, which you consider:

1. Execute an existing command
2. Execute a new command specific to your subtype
3. Navigate to the perspective configured for your node
4. Navigate to Classic UI

The third option means, than the page will navigate to your node by opening /app/nodes/:id and your perspective will include widgets specific to your subtype.

Execute an existing command

If you find a compatible subtype, it is the simplest way. You register a module, which will check for your nodes (by subtype in your case) and assign them the desired command signature.

I'm afraid, that there is no example in the SDK with a default action registration. There is more information at the DefaultActionBehavior topic in the SDK documentation about it.

src/yourprefix-extensions.json:

{
    "csui/utils/defaultactionitems": {
      "extensions": {
        "yourprefix": [
          "yourprefix/commands/default.actions"
        ]
      }
    }
}

src/commands/default.actions.js:

define(function () {
    'use strict';
    return [
      {
        equals: {type: 12345},
        signature: 'Properties'
      }
    ];
});

Execute a new command specific to your subtype

You add your own command to the files from the previous example.

src/yourprefix-extensions.json:

{
    "csui/utils/commands": {
      "extensions": {
        "yourprefix": [
          "commands/open.yourobject/open.yourobject"
        ]
      }
    },
    "csui/utils/defaultactionitems": {
      "extensions": {
        "yourprefix": [
          "yourprefix/commands/default.actions"
        ]
      }
    }
}

src/commands/default.actions.js:

define(function () {
    'use strict';
    return [
      {
        equals: {type: 12345},
        signature: 'yourprefix-open-yourobject'
      }
    ];
});

src/commands/open.yourobject/open.yourobject.js:

define([
    'csui/lib/jquery', 'csui/models/command', 'csui/utils/commandhelper'
], function ($, CommandModel, CommandHelper) {
    'use strict';
    var OpenYourObject = CommandModel.extend({
      defaults: {
        signature: 'yourprefix-open-yourobject'
      },
      enabled: function (status) {
        var node = CommandHelper.getJustOneNode(status);
        return nodes && nodes.get('type') === 12345;
      },
      execute: function (status, options) {
        var deferred = $.Deferred();
        var node = CommandHelper.getJustOneNode(status);
        ...
        deferred.resolve();
        return deferred.promise();
      }
    });
    return OpenYourObject;
});

You can have a look at the greetings/commands/hello to learn, how to register a new command. There is more information at the Commands topic in the SDK documentation.

Navigate to the perspective configured for your node

It is the least work to enable opening a subtype-specific perspective, but the implementation effort goes to the custom widgets. (Writing widgets and registering a custom perspective is beyond the scope of this post.) You can cause the navigation to your node perspective programmatically by a command, but because this scenario is often wanted for new non-container subtypes, it is easier to implement declaratively.

src/yourprefix-extensions.json:

{
    "csui/utils/smart.nodes/smart.nodes": {
      "extensions": {
        "yourprefix": [
          "yourprefix/extensions/smart.nodes"
        ]
      }
    }
}

src/extensions/smart.nodes.js:

define(function () {
    'use strict';
    return [
      {
        equals: {type: 12345}
      }
    ];
});

I'm afraid, that there is no example in the SDK with a Smart UI perspective navigation. There is more information at the SmartNodeCollection topic in the SDK documentation about it.

Navigate to Classic UI

It is the least work to enable opening a subtype-specific Classic UI page. It may be used as a temporary solution to make a node "clickable", but a native Smart UI support should be provided eventually.

src/yourprefix-extensions.json:

{
    "csui/utils/classic.nodes/classic.nodes": {
      "extensions": {
        "yourprefix": [
          "yourprefix/extensions/smart.nodes"
        ]
      }
    }
}

src/extensions/classic.nodes.js:

define(function () {
    'use strict';
    return [
      {
        equals: {type: 12345},
        forced: true,
        urlQuery: function (node) {
          return {
            func: 'll',
            objAction: 'view',
            objId: node.get('id'),
            nexturl: location.href
          };
        }
      },
    ];
});

I'm afraid, that there is no example in the SDK with a Classic UI page navigation. There is more information at the ClassicNodeCollection topic in the SDK documentation about it.

Kevin Lin

Thanks.. my custom node is very much like WebReports, when clicked it runs this URL in classic UI:

http://localhost/otcs/cs.exe?func=ll&objId=82918&objAction=RunReport

I think I just need create my own icon and copy everything from WebReports. However I could not find anything in <CS_home>\module\webreports_16_2_0 folder. Where can I find its smart UI implementation?

Ian_Whitfield

Hi Kevin,

The runtime code for WebReports in the Smart UI is under /support/webreports/app. The full unminified source should be available in the Smart UI SDK download package.

For WebReports in the Smart UI we have different behaviours depending on the destination and configuration of the WebReport node. For instance, destinations like node and workflow that don't output custom code to the UI run fully in the Smart UI. Reports that have parameters will usually prompt using a Smart UI form. WebReports that have the output set to browser or desktop and don't have any parameters set will open in classic.

In the code we have a controller at 'webreports/controls/run.webreport.pre'. This launches commands in 'webreports/utils/commands'. The command that redirects to classic is 'webreports/utils/commands/open.classic.webreport'. This is a straightforward extension from 'csui/utils/commands/open.classic.page'.

Regards
Ian

Ferdinand Prantl

If you want to open the Classic UI URL like "?func=ll&objId=82918&objAction=RunReport", the option 4 from my previous reply is for you as the simplest possible one.

Custom icons are registered similarly to the default actions. I'm afraid, that there is no example in the SDK about adding a custom icon for a custom subtype. There is more information at the NodeSprites topic in the SDK documentation about it. You can do it like this in your Smart UI project:

src/yourprefix-extensions.json:

  {    "csui/utils/nodesprites": {      "extensions": {        "yourprefix": [          "yourprefix/icons/icons"        ]      }    }  }

src/icons/icons.js:

  define([    'css!yourprefix/icons/impl/icons'  ], function (nodeSprites) {    return [      {        equals: {type: 12345},        className: 'csui-icon yourprefix-icon-yoursubtype'      }    ];  });

src/icons/impl/icons.css:

  .binf-widgets .conws-mime_workspace {    background-image: url('yoursubtype.svg');  }

src/icons/impl/yoursubtype.svg:

  <svg...>...</svg>

Kevin Lin

I could not find the source for WebReprots in the SDK 16.2.5, where should I check?

Ian_Whitfield

The source is under csui-sdk-16.2.5\lib\src\webreports.

Regards
Ian

Kevin Lin

I made all changes, ran "grunt" and generated "kvntest1" in out-module folder. I copied the folder "kvntest1" to C:\Eclipse-workspace.admin\OTCS\srcmodules, built the project, but could not find the installable in staging folder.

What did I miss?

Kevin Lin

What am I supposed to do the next after making all the changes in these files? Is it right to run "grunt"?

Kevin Lin

Has anyone made a custom object type clicable? I finally made it clickable but could add a custom icon to it. I'm stuck at various grunt errors. Just wondering if anyone has done something like this before.

Ferdinand Prantl

Please, ignore the instructions regarding the "out-module" directory. They do not work. You need to create a new empty module at start:

Create a new empty CS module using Oclipse. Install the module, so that it is loaded by your development server.
Add the orphan of CSUI::Extension to it, as you found it in "out-modules".
Populate the "support/<your module name>" directory in the Oclipse project with the content of the "out-release" directory from the Smart UI project.

After restarting Oclipse and letting it build your module, it will work and you will find the installation package in "staging".

Ferdinand Prantl

Yes. After making changes in the Smart UI project, you usually confirm, that they work by a testing page and then you run grunt to build the release version and run unit tests, Then you copy the content of the :"out-release" directory to the "support/<module>" ditrectory of your Oclipse project.

Ferdinand Prantl

What errors do you get from running grunt?

Kevin Lin

I've made some progress. The item is now clickable, but missing the icon.

Here is my ptrve-extensions.json, but when I run grunt, the icons.js doesn't show up in out-release/icons folder, and icons.css doesn't show up in out-release/icons/impl folder either. These two files are in the folders under src. What could go wrong?

{
"csui/models/server.module/server.module.collection": {
"modules": {
"ptrve": {
"version": "1.0"
}
}
},
"csui/utils/nodesprites": {
"extensions": {
"ptrve": [
"ptrve/icons/icons"
]
}
},
"csui/utils/classic.nodes/classic.nodes": {
"extensions": {
"ptrve": [
"ptrve/extensions/classic.nodes"
]
}
}
}