Dynamically load data in properties panel

[waqdev]

Hi,

We are using properties panels extension where we want to add custom property type drop-down. Would it be possible to populate data in drop down from database?

Thanking you in advance.
Waq

[batusai513]

Hey, i’m also facing a similar situation, was you able to do that?

thanks

[waqdev]

Hi , Unfortunately no but then had to find way with static data. Thanks

[dipalim]

hey,
I am also doing this similar thing, was you able to do that?

[dipalim]

hey,
I am also doing this similar thing, was you able to do that? is it require to put any ajax request for this?

[nikku]

This is not a stable API and may change any time in the future.

Hey guys, there is a way to dynamically load data with custom entries by providing EntryDescriptor#setControlValue. Inside setControlValue you have full access to an entries HTML, i.e. to lazy load data.

See PropertiesPanel for the place where the stuff is invoked.

[batusai513]

Hi nikku, i’ve been looking this setControlValue method, but i couldn’t find a way to make it work, can you add a small example on how to add async data using that method.

Thanks for your response and the effort.

[nikku]

We use the facility for Input/Output parameters. See source code.

What did you try to make it work?

[batusai513]

I tried to overwrite that method on the Called Element selectBox in the call activity detail, and trying to make the ajax call in there and populate that select box, but at the moment, i couldn’t make it work (populate the select options), if you can write a little example, pseudo code if you will, it would be awesome.

Another unrelated question, for the selectBox entry, is there any way to define a default selected option for a given selectbox entry?

Thanks

[R3vlyn]

I’ve done a small work-around on this,

I load optional data in an API-call before the modeler opens up. I filter this data based on the value of another property of the element. The only downside of this, is that the element needs to be reselected for it to refresh the selectbox-values. At the moment this is the only part i still hope to solve, but for now i’ll take the loss

Here’s an example, this code exists in FormProps.js, it shows the SelectBox-Values based on a Custom Object-attribute that i’ve added in a Start-Event. Instead of the api-call i hardcoded some options.

var datasources = [{
            name: "OL_KAND",
            object: "Inschrijving"
        },
        {
            name: "OL_FACTUUR",
            object: "Inschrijving"
        },
        {
            name: "OL_KOSTEN",
            object: "Cursus"
        }
    ];

    function filterDatasources(datasources, viperobject) {
        var filteredDatasources = [];
        datasources.forEach(function(a) {
            if (a.object === viperobject) {
                filteredDatasources.push(a);
            }
        });
        return filteredDatasources;
    };

    function getSelectOptions(datasources) {
        var selectoptions = [];
        datasources.forEach(function(a) {
            selectoptions.push({ name: a.name, value: a.name });
        });
        return selectoptions;
    };

    var datasourceOptions = []
    try {
        var viperobject = element.businessObject.Object;
        var filterdDatasources = filterDatasources(datasources, viperobject);
        datasourceOptions = getSelectOptions(filterdDatasources);
    } catch (e) {}

    if (!is(element, 'bpmn:UserTask')) {
        group.entries.push(entryFactory.comboBox({
            id: 'form-field-datasource',
            label: 'Datasource',
            selectOptions: datasourceOptions,
            modelProperty: 'Datasource',
            emptyParameter: true,

            get: function(element, node) {
                var selectedFormField = getSelectedFormField(element, node);

                if (selectedFormField) {
                    return { Datasource: selectedFormField.Datasource };
                } else {
                    return {};
                }
            },
            set: function(element, values, node) {
                var selectedFormField = getSelectedFormField(element, node),
                    formData = getExtensionElements(getBusinessObject(element), 'camunda:FormData')[0],
                    commands = [];
                commands.push(cmdHelper.updateBusinessObject(element, selectedFormField, values));

                return commands;
            },
            hidden: function(element, node) {
                return !getSelectedFormField(element, node);
            }
        }));
    }

I know this is an older topic, but i stumbled upon it as i tried to figure out how to refresh the values without needing to reselect the start-event. Thought this might help someone else, and hoping anyone knows how to refresh the element from the setter of another property.

cheers

[Pramod_Maringanti]

Hey @R3vlyn, How could we import getSelectedFormField field for using it in get function?

[barmac]

Please do not necrobump old topics. Instead link to this thread from new topic.