Custom Widget

Uldis

Hi,

I have a WebReport Widget in the landing perspective.

In that widget I'd like to place a link that would take user to Properties page of a specific object.

How is that possible?

Is there something like "/cs.exe/app/nodes/415721/properties"? or should I have something like

<a href="javascript:OpenProperties(12122)">Properties</a>

Thanks

Uldis

Find more posts tagged with

Comments

Praveen_Nagarajan

Hello Uldis,

It is possible. You can use the link [url prefix]/app/nodes/<nodeid>#.

[url prefix] webreport tag can be used

<nodeid> dataid of the specific folder.

# use this symbol at the end to navigate to the properties page.

Best Regards

Praveen Nagarajan

Uldis

Hi,

Thanks for your answer, but for me it doesn't work.

I'm using WebReport Widget where I place a link

<a href="/cs16/livelink.exe/app/nodes/336393#">Props</a>

When I click on it, nothng changes, I stay in the landing page

Uldis

Praveen_Nagarajan

Uldis,

Copy the link directly in the browser and check if it works.

Best Regards

Praveen Nagarajan

Ferdinand Prantl

I am afraid, that it is not possible. The only URL pointing to a node is ".../app/nodes/{node_id}". It opens the perspective fitting for the particular node. For example, the full-page browsing table for containers, Document Overview for documents (in the upcoming 16.2), or Properties for other nodes, which do not have a specific perspective registered.

We have been discussing a way, how to open some "non-modal dialogs" using URL paths, but we have not come up with a solution yet. Currently you do not have under control, what perspective will open, on the client side. The server side decides, what perspective will open.

Uldis

Thanks, Ferdinand

That is what I thought

Instead I'm trying something with sdk code. I'm puting the code in WebReports widget

See following, not sure though if I need all that code:

var context = new PageContext(),
currentNode = context.getModel(NodeModelFactory);

currentNode.set('id', 3117);

var contentRegion = new Marionette.Region({el: '#mdiv'}),

metaDataView = new MetaDataView({
    context: context,
    model: currentNode,
    showCloseIcon: true,
    showBackIcon: true,
    showRequiredFieldsSwitch: true
    });

contentRegion.show(metaDataView);

});
</script>

I loads fine in the Widget, but I need the Properties to load full page (in the main div) and also on request (when user clicks a link etc)

Ferdinand Prantl

If you want to show a Smart UI page with an arbitrary URL with widgets of your choose, you can:

Do something similar like Workflows or Search Results. What happens, when you navigate among pages, is Smart UI showing perspectives. When somebody needs to have a full control over their page, they work on their custom perspective:
- Prepare a perspective configuration with a widget sized for the full page - the Metadata widget in your case.
- Create an extension for the perspective router, so that the url like ".../app/nodes/{node_id}/properties", for example, is recognized and sets the application scope to indicate, that "someone should show properties of the node"
- Create an extension for the perspective context, so that the change of the application scope for the properties gets recognized and caught and triggers loading and rendering of your perspective.
Create you own CS request handler similar to "/app" and use you code there. You would want to use {showBackIcon: true} and rely on the back button in the web browser.

The first option will be available in the upcoming 16.2 first. 16.0 does not contain the code to connect custom pages (perspectives) with the URL navigation.

The second option is available in 16.0.3 already, but because you would have to use a URL like ".../myproperties/{node_id}", it might appear weird. Also, by copying our page you would get an extra maintenance for the future updates, like supporting custom themes and other improvements. The first option depends on a public interface, while the second does not.

Both these two options were used by two teams in OpenText. They are the most advanced scenarios for a Smart UI developer. They would be a part of the exam for obtaining the "CS UI WIdget Proficiency" certificate, if we had any :-) I am not sure, if you should want to implement this feature from other reason: it has been requested from OpenText and we would like to introduce it as a part of the out-of-the-box functionality. Once we introduce it, you URL would become obsolete, or might conflict with ours. Nevertheless, I should want to to try it to see, how it works. Or if I myself could win the certificate :-)

Ferdinand Prantl

If the hash (#) character appears in back of the URL, it would be:

Either a bug, that some hyperlink points to "#" but does not include a click-event handler with preventing the default event handling in the web browser. It would be a minor bug not causing any unwanted navigation. It is an often pattern for hyperlinks handled by JavaScript. (With the right preventing the default handling.)
Or a feature of some page, which supports navigating among in-page anchors. I don't know, if such page exists in Smart UI.

Uldis

Thanks again for your input.

But what about my suggested option? Put some code directly in the WebReport Widget?

Do you see any issue with my example?

This way I don't need anything added on the server. Needs less maintanance.

Ferdinand Prantl

It appears, that I misunderstood, what you needed. Did you want to just open the Properties dialog for a specific node from an existing JavaScript? No URL pointing to an opened Properties widget, which you could navigate to from a page or e-mail?

How about showing Properties in a modal dialog? Favourites tile on the landing page gets expanded to a modal dialog, for example.

You can use the Metadata widget and place it to a modal dialog, if you want t have more control over the widget parameters:

csui.onReady2(['csui/utils/contexts/page/page.context',
'csui/widgets/metadata/metadata.view',
'csui/controls/dialog/dialog.view'
], function (PageContext, MetaDataView, DialogView) {
var context = new PageContext(),
      metadata = new MetadataView({
        data: {id: 3117},
        context: context,
        showCloseIcon: false,
        showBackIcon: false
      }),
      dialog = new DialogView({
        className: 'cs-properties',
        largeSize: true,
        view: metadata
      });
dialog.show();
});

You can also execute the Properties command; currently it does almost the same as the code above:

csui.onReady2(['csui/lib/backbone',
'csui/utils/contexts/page/page.context',
'csui/utils/contexts/factories/connector',
'csui/models/node/node.model', 'csui/utils/commands'
], function (Backbone, PageContext, ConnectorModelFactory, NodeModel, commands) {
var context = new PageContext(),
      connector = context.getObject(ConnectorModelFactory);
      node = new NodeModel({id: 3117}, {connector: connector});
      properties = commands.get('Properties'),
      status = {
        nodes: new Backbone.Collection([node]),
        context: context
      };
if (properties && properties.enabled(status)) {
    properties.execute(status);
}
});

Uldis

I would just want to execute the Properties command.

In the WebReport widget I would have a link - <a href="javascript:execProp()">Properties</a>

What exactly should I have in the execProp()?

Tried your 2nd code but nothing happens..

Uldis

Also I'm calling this from the CWS landing page, if that changes anyway..

Ian_Whitfield

Hi Uldis,

To launch the dialog using a click event just do something like this:

For info, there was a case-sensitivity typo in the original code sample. MetaDataView was written as MetadataView which would have caused an error if copied and pasted.

Regards
Ian

Uldis

Thanks, Ian

I got it working in similar manner. However there is a problem when you close the modal and then try to reopen it again, nothing happens - some js error

Therefor I'd better prefer the 2nd option Ferdinand suggested - execute Properties command. If that is what I think it does.

But I can't get the 2nd option running

Ian_Whitfield

I guess the dialog close action must be destroying the views.

How about something like this?

<script>    csui.require(['csui/lib/jquery','csui/utils/contexts/page/page.context',        'csui/widgets/metadata/metadata.view',        'csui/controls/dialog/dialog.view'    ], function ($,PageContext, MetaDataView, DialogView) {        var context = new PageContext();        function showMetaDataPanel(id){            var metadata = new MetaDataView({                        data: {id: id},                        context: context,                        showCloseIcon: false,                        showBackIcon: false                }),                dialog = new DialogView({                    className: 'cs-properties',                    largeSize: true,                    view: metadata                });            dialog.show();        }        $("#mydiv").click(function(){            showMetaDataPanel(2000);        });    });</script><div id="mydiv" class="csui-icon icon-toolbar-metadata audit btn"></div>

Regards
Ian

Uldis

Thanks, Ian.

This works better - could be as and alternative solution

I would still like to get that 2nd option running (suggested by Ferdinand)

Ian_Whitfield

Hi Uldis,

For the second approach, does this work?

var nodeCollection = new Backbone.Collection([node]),
properties = commands.get('Properties'),
status = {
nodes: nodeCollection,
context: context
};
if (properties && properties.enabled(status)) {
properties.execute(status);
}
});

I think the actions need to be passed in when creating the NodeModel. Otherwise the command will not be seen as being valid for that node in the if enabled check.

Regards
Ian

Uldis

Thanks, Ian!

Seems to work (partly). However it still opens it as a modal. I thought it would replicate the action when I click on "Info" icon or when I click Properties icon.

Also it seems to lack some information in the modal - subtype icon and name are not visible, type is Uknown (this was the same with the 1st approach)

All this I need in my Connected Workspace landing page. We are creating our own Metadata widget (as WebReport widget), it would show all the attributes (reaonly). On the top I wanted to have a link "Properties" - when this is clicked user would be taken to Properties page of particualr CWS. Currently to open CWS properties you need to manully click parent folder in the navigation path and click "Info" from the folder view OR you can switch to Documents tab and then click "function menu" of CWS and choose Properties. I'd like to replicate the 2nd behavior

Ian_Whitfield

Hi Uldis,

I think the missing icon info is because the Node definition is incomplete. If you do a fetch against the node then it should populate the additional missing data by making a REST API call. e.g.

csui.onReady2(['csui/lib/backbone',
'csui/utils/contexts/page/page.context',
'csui/utils/contexts/factories/connector',
'csui/models/node/node.model', 'csui/utils/commands'
], function (Backbone, PageContext, ConnectorModelFactory, NodeModel, commands) {
debugger;
var context = new PageContext(),
connector = context.getObject(ConnectorModelFactory),
node = new NodeModel({
id: 2000,
actions: [
{signature: 'Properties'}
]
}, {connector: connector});

node.fetch();

The properties page is expected to open in a modal since the command you are executing launches a dialog in a similar way to Ferdinand's first example. You should see this if you check the code for 'csui/utils/commands/properties'.

Regards
Ian