Dmn-js predefined list of options for input expression and input entries

Developers Modeler
1

Hi

Is there any api to feed list of options for input expression and entries for user to select. Instead of free form text input field, the user will select appropriate options from list, say dropdown. We don’t expect our users to know all input expressions. The dmn-js example or document doesn’t mention anything to achieve same.

Thanks

2

Hey,

you can use Modeling#editAllowedValues specifying the model element and the list of allowed values.

dmnModeler.importXML(dmnXML, function(err) {

  // make sure your active edtior is the decision table editor

  var activeEditor = dmnModeler.getActiveViewer();
          
  // access active editor components
  var elementRegistry = activeEditor.get('elementRegistry');
  var modeling = activeEditor.get('modeling');

  var input1 = elementRegistry.get('input1');

  modeling.editAllowedValues(input1.businessObject, [ 'foo', 'bar' ]);
});
3

Thanks!

When I try the way you suggested, I am getting below exception -

something went wrong: TypeError: modeling.editAllowedValues is not a function
    at eval (DmnJsWrapper.vue?7e43:31)
    at eval (dmn-modeler.development.js?45ae:5349)
    at complete (dmn-modeler.development.js?45ae:5654)
    at eval (dmn-modeler.development.js?45ae:5654)
    at importDRD (dmn-modeler.development.js?45ae:10199)
    at Modeler.Viewer.open (dmn-modeler.development.js?45ae:13083)
    at Modeler$$1._switchView (dmn-modeler.development.js?45ae:5654)
    at Modeler$$1.open (dmn-modeler.development.js?45ae:5540)
    at eval (dmn-modeler.development.js?45ae:5349)
    at eval (dmn-modeler.development.js?45ae:3804)
4

Can you check, what your active editor is? What diagram are you opening? Can you share it?

5

Sorry for late response.

I am still new to dmn-js. What do you meany by “what your active editor is”? I am trying to open sample dish-decision example

This is my code so far -

<template>
    <div id="canvas"></div>
</template>

<script>
import DmnJS from 'dmn-js/dist/dmn-modeler.development.js'
import dishDecision from '../assets/dish-decision.dmn'

export default {
  name: 'DMNDemo',
  data () {
    return {
      msg: 'Welcome to Your DmnJs App'
    }
  },
  mounted () {
    console.log('element created!')
    var viewer = new DmnJS({
      container: '#canvas'
    })
    console.log(viewer)
    viewer.importXML(dishDecision, function (err) {
      if (!err) {
        console.log('success!')

        var activeEditor = viewer.getActiveViewer()
        activeEditor.get('canvas').zoom('fit-viewport')
        var elementRegistry = activeEditor.get('elementRegistry')
        var modeling = activeEditor.get('modeling')
        var input1 = elementRegistry.get('Season')
        modeling.editAllowedValues(input1.businessObject, [ 'foo', 'bar' ])
      } else {
        console.log('something went wrong:', err)
      }
    })
  }
}
</script>

<style>
    html, body, #canvas {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
    }
</style>
6

dmn-js has multiple editors at the same time. The issue is that initially the active editor is the DRD editor, which is why you can get('canvas'). You have to open the decision table editor first in order to access the right modeling.

We have an example showcasing how to switch back and forth between editors. In general this is how you open the editor for an element:

var views = modeler.getViews();

// an example of how to get the element you want
var view = views.filter(function(view) {
  return view.element.id === 'foo';
});
        
modeler.open(view);

Also, make sure you’re using the modeler. You can’t use modeling in the viewer.