I am using the properties panel with some custom properties. I extended the properties of DataStoreReferences by some text inputs and select droplists. Everything works fine as expected, even the moddle works when I look look into the .bpmn file, all properties are saved in it.
Additionally to the custom properties of the DataStoreReference elements I also want the DataInputAssociation arrows of them to have certain custom properties. I also managed to add them.
But the problem is, that I want the arrow to have different custom properties depending on the properties of its DataStoreReference. Therefore my question is on how to access the values of the text inputs and select droplists in the PropertiesProvider which subclasses PropertiesActivator to create properties of the arrow depending on this information.
What properties are you referring to in particular? Can you share a screenshot? Note that the properties panel is built in a way it always reflects the underlying XML.
If you tell us which properties you mean, we can guide you to how the properties panel gets and sets those.
As stated in your citation i am using text inputs and select droplists as properties. I might add different type of properties in the future.
If I understand you correctly, do you want to access the exact values of these input fields? That should be easily possible with simple Javascript, when you know the ID of the input. E.g. for the element ID.
console.log(document.getElementById('camunda-id').value);
If you want to access the underlying XML properties, you should already know how to access them, since you have to provide them in your custom properties. Is that correct?
I want to design the properties of the arrows of each datastore depending on what cloud provider and and cloud service has been chosen by the user. Therefor I want to access that values in JavaScript and create the properties of the arrow accordingly.
Example:
If the datastore properties are aws as cloud provider and s3 as a service, then the arrow should have the property „bucket“. If it is azure and azure blob storage, then the arrow should have the property „container“.
Given the screenshot you posted
how do you get & set these properties? Can your share your properties panel extension?
My PropertiesProvider:
import inherits from 'inherits';
import PropertiesActivator from 'bpmn-js-properties-panel/lib/PropertiesActivator';
// Require all properties you need from existing providers.
// In this case all available bpmn relevant properties without camunda extensions.
import processProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/ProcessProps';
import documentationProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/DocumentationProps';
import idProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/IdProps';
import nameProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/NameProps';
// Require custom property entries.
import myProps from './parts/MyProps';
// The general tab contains all bpmn relevant properties.
// The properties are organized in groups.
function createGeneralTabGroups(element, bpmnFactory, canvas, elementRegistry, translate) {
var generalGroup = {
id: 'general',
label: 'General',
entries: []
};
idProps(generalGroup, element, translate);
nameProps(generalGroup, element, bpmnFactory, canvas, translate);
processProps(generalGroup, element, translate);
var documentationGroup = {
id: 'documentation',
label: 'Documentation',
entries: []
};
documentationProps(documentationGroup, element, bpmnFactory, translate);
return [
generalGroup,
documentationGroup
];
}
// Create the custom service tab
function createServiceTabGroups(element) {
// Create a group called "Service Properties".
var serviceGroup = {
id: 'service-tab',
label: 'Service Properties',
entries: []
};
// Add the service props to the serviceGroup group.
myProps(serviceGroup, element);
return [
serviceGroup
];
}
export default function MyPropertiesProvider(eventBus, bpmnFactory, canvas, elementRegistry, translate) {
PropertiesActivator.call(this, eventBus);
this.getTabs = function (element) {
var generalTab = {
id: 'general',
label: 'General',
groups: createGeneralTabGroups(element, bpmnFactory, canvas, elementRegistry, translate)
};
// The "service" tab
var serviceTab = {
id: 'service',
label: 'Properties',
groups: createServiceTabGroups(element)
};
// Show general + "service" tab
return [
generalTab,
serviceTab
];
};
}
inherits(MyPropertiesProvider, PropertiesActivator);
My properties:
import entryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';
import {is} from 'bpmn-js/lib/util/ModelUtil';
export default function(group, element) {
if (is(element, 'bpmn:DataStoreReference')) {
group.entries.push(entryFactory.selectBox({
id : 'cloudProvider',
description : 'Specify the Cloud Provider of the Service',
label : 'Cloud Provider',
selectOptions : [{value: 'aws', name: 'Amazon Web Services'}, {value: 'azure', name: 'Microsoft Azure'}],
modelProperty : 'cloudProvider'
}));
group.entries.push(entryFactory.selectBox({
id : 'service',
description : 'Specify the Service',
label : 'Cloud Service',
selectOptions: [
{ name: 'Simple Storage Service (S3)', value: 'awsS3' },
{ name: 'DynamoDB', value: 'awsDynamoDB' },
{ name: 'Elastic File System (EFS)', value: 'awsEFS' },
{ name: 'Blob Storage', value: 'azureBlobStorage' }
],
modelProperty : 'service'
}));
group.entries.push(entryFactory.textField({
id : 'awsAccountRegion',
description : 'Specify the AWS Account Region',
label : 'AWS Account Region',
modelProperty : 'awsAccountRegion'
}));
}
if (is(element, 'bpmn:DataInputAssociation')) {
// This is where I wanna create text inputs and select boxes
// for the arrow depending on the input of the user in the
// data store of this DataInputAssociation arrow
}
}
The properties panel and all its entries (selects, text inputs) are built in a way that they actively set properties in the XML. So in your case the service, awsAccountRegion & cloudProvider for the selected element. Therefore it should be possible to get these properties also from the element in another place, just as the properties panel is doing it.
So something like that (assuming your custom meta model works in the way you’re using it with your custom properties panel entries).
const cloudProvider = element.businessObject.cloudProvider
We have an example that nicely showcases this dependency between XML meta-model and properties provider.
Thank you @Niklas_Kiefer a lot for your help. I didn’t know that the businessObject also provides the properties to be accessed via JavaScript. Since a BPMN diagram can have multiple instances of DataStores and multiple arrows to/from them this solution worked for me (element is the arrow):
if (is(element, 'bpmn:DataInputAssociation')) {
var dataStore = null;
if (is(element.source, 'bpmn:DataStoreReference')) {
dataStore = element.source;
} else if (is(element.target, 'bpmn:DataStoreReference')) {
dataStore = element.target;
}
const cloudProvider = dataStore.businessObject.cloudProvider;
if (cloudProvider === 'aws') {
group.entries.push(entryFactory.textField({
id : 'bucketName',
description : 'Specify the Bucket Name',
label : 'Bucket Name',
modelProperty : 'bucketName'
}));
} else if (cloudProvider === 'azure') {
group.entries.push(entryFactory.textField({
id : 'containerName',
description : 'Specify the Container Name',
label : 'Container Name',
modelProperty : 'containerName'
}));
}
}
I also use this VDS server hosting. In my opinion, it’s the best one, though I have a pretty rich experience. The platform provides a wide choice of services, you can check it out on the site.