Link entryFactory example?

Developers
1

I’m trying to embed a link in the Properties Panel that, when clicked, will generate an event that I can listen on to load another page in my application. I have looked at the proposal on GitHub for clickable shapes, which I would also like to see, but this is not a click at the shape level, it needs to be a property of a shape. I may have multiple clickable links per shape. The linkEntryFactory seems to fit my needs, but I think I am not understanding how it works.

I have successfully embedded the link in the properties panel via the link entryFactory. The element shows as a colored link and behaves like a clickable link on mouse rollover. I just can’t see how to listen on a click event. I see the linkSelected function in linkEntryFactory that appears to handle a click, but it seems to fire when the panel loads and not on a click of the link.

Are there any examples that use the link that might help me?

Thanks,
S.

2

Hi @snewport,

thanks for your detailed description. To help you best, I need some code snippets to understand what are you doing exactly right now.

3

This is the only code I added to get the link to render. In addition, in my Moddle JSON, I added the model property: ‘schemaCodeGen’. It’s possible that I have this code all wrong as I have borrowed the snippet from textField, but I was just trying to get something running to see how the click event is captured.

      group.entries.push(entryFactory.link({  // TODO: I have no idea how to get the click event
        id : 'schema-code-gen',
        label : translate('Schema Code Generation and Deployment'),
        modelProperty: 'schemaCodeGen',
        description: 'Click this link to view generated code, with the option to deploy a new version of the schema',
        get: function(element, node) {  
          var bo = getBusinessObject(element);
    
          return {
            schemaCodeGen: bo.get('korio:schemaCodeGen')
          };
        },
        set: function(element, values, node) {
          var bo = getBusinessObject(element),
          schemaCodeGen = values.schemaCodeGen || undefined;
    
          return cmdHelper.updateBusinessObject(element, bo, { 'korio:schemaCodeGen': schemaCodeGen });
        }
      }));
4

Given the current design of the linkEntryFactory this is not possible.

You could easily replace the factory though to create the entry by yourself.

The next release of the properties panel will support this via

var linkEntry = link({
  id: 'foo',
  description: 'Some Description',
  handleClick: function(element, node, event) { ... },
  showLink: function(element, node) { ... }
});

Hope this helps.

1 Like
5

Thanks Nikku! I’ll wait for that release.

6

Released as v0.22.0.

Checkout the relevant changes and usage instructions here.