NavigationActionHandler: No valid navigation target found....?

[rsoika]

Hi,
I still have problems to understand the Action Handler concept of GLSP. I know this topic is well documented but I did not succeed with my own custom implementation :-(

What I try to archive:

• create a custom context menu in my diagram panel
• reacting on the command action in my custom UIExtension

To create the context menu commands I followed the Workflow Example with its Navigation-Commands. So far things are working. I can provide the commands in Theia as also in Visual Code.

I am also working on a tutorial about how to implement Context Menu Commands . So I am still optimistic to get my problem solved ;-)

The Problem

Now the problem is that I can react on the context menu commands on the server side by implementing a NavigationTargetProvider. But this is not what I need. I don't need to handle the command action on the server but in my client diagram itself - more precisely in my custom UIExtension.

Each time I click the context menue I see the following warning on my client:

root WARN 3:35:20 PM bpmn-diagram_0 NavigationActionHandler: No valid navigation target found

This is more or less expected, since I have not implemented a handler on the client side.

So I tried to implement a Action Handler in my client code:

export interface BPMNPropertyAction extends Action {
  kind: typeof BPMNPropertyAction.KIND;
}

export namespace BPMNPropertyAction {
  export const KIND = 'properties';

  export function is(object: any): object is BPMNPropertyAction {
      return Action.hasKind(object, KIND);
  }

  export function create(): BPMNPropertyAction {
      return { kind: KIND };
  }
}

@injectable()
export class BPMNPropertyActionHandler implements IActionHandler {
  handle(action: BPMNPropertyAction): void | Action {
    console.log('--------> custom action arrived');
    // implement your custom logic to handle the action
    // Optionally issue a response action
  }
}

And also register my handler in my DiagramModule (di.config.ts )

....
    // Action Handler
    configureActionHandler(context, BPMNPropertyAction.KIND, BPMNPropertyActionHandler);
...

But this has no effect. I still see the warning on the client side.

My questions are:

• How to implement and register a ActionHandler on the client?
• Is a context menu command always a NavigateAction or can it be any kind of Action

Thanks for any help or hints....

[tortmayr]

Hi @rsoika,

Is a context menu command always a NavigateAction or can it be any kind of Action

No, the context menu command is not always a NaviateAction
I think you derived a false conclusion from looking at the Workflow Example and its Navigation-Commands.
Rather than being a generic API for handling all context menu actions the Navigation API is tailored for specific use cases.
It is used to implement complex navigation like Go to next Node, Go to reference, Go to source etc. where the client does not have all the necessary information to navigate to the correct target. In this cases the client triggers a NavigateAction with a specific navigation target and the server is responsible for resolving the target and sends back the necessary information so that the client can actually navigate to this target. Unfortunately this entire API is not documented yet.

In general you can dispatch any action in a GLSPCommandHandler. Looking at your code you already have configured and implemented the action handler on the client correctly. All you have to do now is to configure a GLSPCommandHandler (and the corresponding menu entry) that dispatches a BPMNPropertyAction:

        commands.registerCommand(
            { id: "someId", label: 'BPMNPropertyAction' },
            new GLSPCommandHandler(this.shell, {
                actions: () => [BPMNPropertyAction.create()]
            })
        );

Looking at your tutorial you could also rework it to not use a NavigateAction which would essentially remove the entire server-side implementation.

[rsoika]

Hi @tortmayr ,
Thanks for the clarification. I think I understand my mistake. I will explore this more and I think I will also be able to improve my tutorial with your valued input!

[rsoika]

Things are working now. I updated my short tutorial: https://github.com/imixs/open-bpmn/blob/master/doc/CONTEXT_MENUS.md

[rsoika]

Hi @tortmayr
One more comment on this topic. For VSCode I figured out, that my custom Action can't be imported from my corresponding Open-BPMN module. It is necessary that I define the Action class directly in my VSCode extension module.

This is very strange. I saw that you did exactly the same with the NavigateAction in the file vscode-integration/client-actions.ts