I have implement dmn-js on the html web and it run well. I have a question that how to disable View DRD button. Thanks
Seems like this feature is not yet implemented 
But I guess it should be possible to do it via CSS or JS.
Im my script src I read css and js of dmn from camunda url. I try to copy library to my local css but it have an error when I import dmn file. So I can’t modify CSS or JS
Can you provide/show a bit more details on how you set up the dmn-js?
Could you add your custom JS script after the dmn-js initialization?
Thanks for response. I found the solution that I comment the code render view drd button and it works.
I have another question. How to prevent user input data to expression field?
I would approach it the same way you handled the DRD button—by programmatically making the field read-only.
When code run I inspect html file and I see that div will be generated that is text box hold expression class=“literal-expression ref-text dms-input”. I try putting read-only to one of three class but it is not work. I can still modify the input.
Can you share a part of the HTML with the field and how do you disable it or make it read-only?
Have you tried to hide it instead of disabling it?
BPMN Interactive Website
<style>
#canvas {
height: 600px;
border: 1px solid #ccc;
margin-top: 20px;
}
#file-input {
display: none;
}
#import-button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
}
.hidden {
display: none;
}
.on-display {
display: block;
}
#loading {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
.spinner {
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
BPMN / DMN Viewer
<input type="file" id="file-input" accept=".bpmn, .xml, .dmn">
<button id="import-button">Import BPMN File</button>
<div id="canvas">
<div id="loading">
<div class="spinner"></div>
</div>
</div>
<div id="canvasDMN" class="test-container">
<div class="editor-parent">
<div class="editor-container"></div>
<div class="editor-tabs"></div>
</div>
</div>
<!-- BPMN Component -->
<link rel="stylesheet" href="../library/bpmn/css/bpmn-js.css">
<link rel="stylesheet" href="../library/bpmn/css/diagram-js.css">
<link rel="stylesheet" href="../library/bpmn/css/bpmn.css">
<script src="../library/bpmn/js/bpmn-modeler.development.js"></script>
<!-- BPMN Component -->
<!-- DMN Component -->
<link rel="stylesheet" href="../library/dmn/css/diagram-js.css">
<link rel="stylesheet" href="../library/dmn/css/dmn-js-shared.css">
<link rel="stylesheet" href="../library/dmn/css/dmn-js-drd.css">
<link rel="stylesheet" href="../library/dmn/css/dmn-js-decision-table.css">
<link rel="stylesheet" href="../library/dmn/css/dmn-js-decision-table-controls.css">
<link rel="stylesheet" href="../library/dmn/css/dmn-js-literal-expression.css">
<link rel="stylesheet" href="../library/dmn/css/dmn.css">
<script src="../library/dmn/js/dmn-modeler.development.js"></script>
<script src="../library/dmn/js/jquery.js"></script>
<!-- DMN Component -->
<script>
window.onload = function () {
hideAllDivs();
const loadingIndicator = document.getElementById('loading');
}
function hideAllDivs() {
document.getElementById('canvas').classList.add('hidden');
document.getElementById('canvasDMN').classList.add('hidden');
}
function showDiv(option) {
hideAllDivs();
if (option === 1) document.getElementById('canvas').classList.remove('hidden');
if (option === 2) document.getElementById('canvasDMN').classList.remove('hidden');
}
</script>
<script>
const viewerBPMN = new BpmnJS({
container: '#canvas',
keyboard: {
bindTo: window
}
});
function showLoading() {
loadingIndicator.style.display = 'block';
}
function hideLoading() {
loadingIndicator.style.display = 'none';
}
const $container = '#canvasDMN';
const viewerDMN = new DmnJS({
container: $container,
height: 500,
width: '100%',
});
async function handleFileSelect(event) {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
const fileName = file.name.toLowerCase();
reader.onload = async function (e) {
const xml = e.target.result;
if (fileName.endsWith('.bpmn')) {
showDiv(1)
const loadingIndicator = document.getElementById('loading');
loadingIndicator.style.display = 'block';
await displayDiagramBPMN(xml);
} else if (fileName.endsWith('.dmn')) {
showDiv(2)
const loadingIndicator = document.getElementById('loading');
loadingIndicator.style.display = 'block';
await displayDiagramDMN(xml);
} else {
alert('Please select a file with .bpmn or .dmn extension.');
return;
}
};
reader.readAsText(file);
}
async function displayDiagramDMN(dmnXML) {
try {
await viewerDMN.importXML(dmnXML);
const views = viewerDMN.getViews();
const decisionTableViews = views.filter(
({ type }) => type === "decisionTable"
);
if (decisionTableViews.length === 1) {
viewerDMN.open(decisionTableViews[0]);
}else{
console.log('No decision table found in the model');
}
} catch (err) {
console.error('could not import DMN 1.3 diagram', err);
} finally {
const loadingIndicator = document.getElementById('loading');
loadingIndicator.style.display = 'none';
}
}
async function displayDiagramBPMN(bpmnXML) {
try {
await viewerBPMN.importXML(bpmnXML);
var canvas = viewerBPMN.get('canvas');
viewerBPMN.get('canvas').zoom('fit-viewport');
} catch (err) {
console.error('Error rendering BPMN diagram', err);
alert('Error rendering BPMN diagram. Please check the console for details.');
}
finally {
const loadingIndicator = document.getElementById('loading');
loadingIndicator.style.display = 'none';
}
}
document.getElementById('file-input').addEventListener('change', handleFileSelect);
document.getElementById('import-button').addEventListener('click', function () {
document.getElementById('file-input').click();
});
</script>
here is my html code please take a look. Thanks
I fixed my problem. Just comment out render method for context menu click. When user click to title of dmn column it will not rendering context menu
Can you point me to where exactly you hide/disable the field in your code?
Sorry I changed the code of dmn-modeler.development.js. HTML just only read and show dmn file. As I said above message. It work and fit my purpose
If you’re already modifying the code in dmn-modeler.development.js, I’m curious why programmatically hiding the field isn’t working for you.
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.