<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Excel File Upload with Checkboxes</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; } #header { width: 100%; height: 150px; background-color: #f4f4f4; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } #drop-area { width: 80%; height: 100px; border: 2px dashed #aaa; border-radius: 5px; display: flex; justify-content: center; align-items: center; text-align: center; margin-bottom: 20px; color: #aaa; cursor: pointer; } #file-input { display: none; } #upload-button { padding: 10px 20px; font-size: 16px; cursor: pointer; } #file-info { display: flex; align-items: center; margin-top: 10px; font-weight: bold; } #selected-file-name { margin-right: 20px; } #confirm-button { padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #4CAF50; color: white; border: none; } #main-content { display: flex; flex: 1; height: calc(100vh - 150px); } #sidebar { width: 200px; background-color: #f9f9f9; padding: 20px; box-sizing: border-box; border-right: 1px solid #ddd; overflow-y: auto; } .checkbox-container { display: flex; flex-direction: column; justify-content: flex-start; margin-bottom: 10px; } .checkbox-container input[type="checkbox"] { margin: 5px 0; } .checkbox-container label { margin-left: 5px; } .checkbox-container input[type="text"] { margin-left: 5px; padding: 5px; width: 120px; } #body { flex: 1; padding: 20px; overflow: auto; } #table-container { display: none; overflow-x: auto; max-width: 100%; } table { width: auto; border-collapse: collapse; margin-top: 20px; } th, td { padding: 8px 12px; border: 1px solid #ddd; text-align: center; } th { background-color: #f2f2f2; } td { background-color: #fafafa; } </style> </head> <body> <div id="header"> <h1>Upload Excel File</h1> <div id="drop-area"> Drag and Drop Excel File Here or <button id="upload-button">Choose File</button> </div> <input type="file" id="file-input" accept=".xlsx, .xls" /> <div id="file-info"> <div id="selected-file-name"></div> <button id="confirm-button" style="display: none;">Confirm</button> </div> </div> <div id="main-content"> <div id="sidebar"> <div class="checkbox-container" id="checkbox-container"></div> </div> <div id="body"> <div id="table-container"> <table id="excel-table"></table> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.1/xlsx.full.min.js"></script> <script> const dropArea = document.getElementById('drop-area'); const fileInput = document.getElementById('file-input'); const uploadButton = document.getElementById('upload-button'); const confirmButton = document.getElementById('confirm-button'); const selectedFileName = document.getElementById('selected-file-name'); const tableContainer = document.getElementById('table-container'); const excelTable = document.getElementById('excel-table'); const checkboxContainer = document.getElementById('checkbox-container'); let selectedFile = null; let excelData = []; let excelHeaders = []; let highlightedColumns = {}; // Store the filled columns uploadButton.addEventListener('click', () => { fileInput.click(); }); fileInput.addEventListener('change', handleFileSelect); dropArea.addEventListener('dragover', (event) => { event.preventDefault(); dropArea.style.borderColor = 'green'; }); dropArea.addEventListener('dragleave', () => { dropArea.style.borderColor = '#aaa'; }); dropArea.addEventListener('drop', (event) => { event.preventDefault(); dropArea.style.borderColor = '#aaa'; const file = event.dataTransfer.files[0]; if (file) { handleFile(file); } }); function handleFileSelect(event) { const file = event.target.files[0]; if (file) { handleFile(file); } } function handleFile(file) { if (file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) { selectedFile = file; selectedFileName.textContent = `Selected file: ${file.name}`; confirmButton.style.display = 'inline-block'; } else { alert('Please upload a valid Excel file (.xlsx or .xls)'); } } confirmButton.addEventListener('click', () => { if (selectedFile) { const reader = new FileReader(); reader.onload = function(e) { const data = e.target.result; const workbook = XLSX.read(data, { type: 'binary' }); const sheetName = workbook.SheetNames[0]; const sheet = workbook.Sheets[sheetName]; excelData = XLSX.utils.sheet_to_json(sheet, { header: 1 }); excelHeaders = excelData[0]; // Save the first row as headers // Display the table with Excel data and checkboxes displayTableWithCheckbox(excelData); }; reader.readAsBinaryString(selectedFile); } }); function displayTableWithCheckbox(data) { checkboxContainer.innerHTML = ''; // Clear previous checkboxes const checkboxLabels = ['Date', 'Personnel', 'Itinerary', 'Type', 'Hours', 'Manpower', 'Product', 'Description']; const checkboxes = []; checkboxLabels.forEach((label, index) => { const checkboxLabel = document.createElement('label'); const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.value = label; checkbox.id = `checkbox-${index}`; const inputElem = document.createElement('input'); inputElem.type = 'text'; inputElem.disabled = true; checkbox.addEventListener('change', () => { inputElem.disabled = !checkbox.checked; toggleColumnHighlight(label, inputElem.value, checkbox.checked); }); checkboxLabel.appendChild(checkbox); checkboxLabel.appendChild(document.createTextNode(label)); checkboxLabel.appendChild(inputElem); checkboxContainer.appendChild(checkboxLabel); checkboxes.push({ label, inputElem }); }); function matchHeadersAndCheckboxes(headers, checkboxNames, checkboxes) { for (let i = 0; i < headers.length; i++) { const header = headers[i]; checkboxNames.forEach((checkboxLabel, index) => { if (header === checkboxLabel) { checkboxes[index].inputElem.value = String.fromCharCode(65 + i); // Display columns } }); } } matchHeadersAndCheckboxes(excelHeaders, checkboxLabels, checkboxes); let tableHTML = '<thead><tr>'; for (let i = 0; i < data[0].length; i++) { tableHTML += `<th>${String.fromCharCode(65 + i)}</th>`; } tableHTML += '</tr></thead>'; tableHTML += '<tbody>'; data.forEach((row, rowIndex) => { tableHTML += '<tr>'; for (let colIndex = 0; colIndex < excelHeaders.length; colIndex++) { const cellValue = (row[colIndex] === undefined || row[colIndex] === null || row[colIndex] === '') ? '' : row[colIndex]; tableHTML += `<td>${cellValue}</td>`; } tableHTML += '</tr>'; }); tableHTML += '</tbody>'; excelTable.innerHTML = tableHTML; tableContainer.style.display = 'block'; } // Update to toggle functionality: change the column's color when checked/unchecked function toggleColumnHighlight(label, columnLetter, isChecked) { if (!columnLetter) return; // Do nothing if the text box is empty const columnIndex = columnLetter.charCodeAt(0) - 65; // Convert column letter to index (e.g., A -> 0) const rows = excelTable.querySelectorAll('tbody tr'); rows.forEach((row) => { const cells = row.querySelectorAll('td'); if (cells[columnIndex]) { if (isChecked) { cells[columnIndex].style.backgroundColor = 'yellow'; // Apply yellow coloring highlightedColumns[columnLetter] = true; // Mark as colored } else { cells[columnIndex].style.backgroundColor = ''; // Clear the coloring delete highlightedColumns[columnLetter]; // Remove the marking } } }); } </script> </body> </html> I have an HTML code snippet that includes JavaScript, and I want to fully embed the code into Mendix using the HTMLSnippet widget. Currently, I can only manage to create the confirmButton, but clicking the confirmButton doesn't trigger any response. How can I resolve this issue?
asked
Jeff Yu
3 answers
0
Hi Jeff,
You can design the button using an HTML snippet and trigger the microflow by adding a JavaScript snippet with jQuery. The JavaScript snippet targets the specific class added to the button and executes the microflow on click. Below is a sample code that demonstrates how to trigger the microflow:
$('.button-class').click(function () {
mx.data.action({
params: {
applyto: "none",
actionname: "ModuleName.MicroflowName"
},
origin: this.mxform,
error: function (error) {
alert("Error: " + error.message);
}
});
});
Please feel free to add a comment if you have any further questions.
Thanks
answered
Amit Gupta
1
Hi Jeff,
Please refer the below video which will help you to explore HTML Snippet in Mendix.