Items Dialog Generator for Google Sheets
📋 Generated Code
Click "Generate Code" to see your HTML file...
Click "Generate Code" to see your JavaScript file...
📚 How to Use:
- Copy the ItemsDialog.html code.
- In Google Sheets → Extensions → Apps Script.
- Create a new HTML file named "ItemsDialog.html".
- Paste the HTML code.
- Copy the Code.gs and paste it in your main script file.
- Ensure a "Stock" and "Invoice" sheet exist in your spreadsheet.
- Run the
showItemsDialog function!
`;
// Generate JavaScript
let functionsCode = functions.map(func => `
function ${func.functionName}() {
// Add your ${func.displayName.toLowerCase()} logic here
SpreadsheetApp.getUi().alert('${func.displayName} function executed!');
}
`).join('');
const jsCode = `function showItemsDialog() {
const html = HtmlService.createHtmlOutputFromFile('ItemsDialog')
.setWidth(${width})
.setHeight(${height});
SpreadsheetApp.getUi().showModelessDialog(html, '${title}');
}
function getItems() {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const stockSheet = ss.getSheetByName('Stock');
if (!stockSheet) throw new Error('Stock sheet not found.');
const lastRow = stockSheet.getLastRow();
if (lastRow < 2) return [];
const itemRange = stockSheet.getRange('A2:J' + lastRow).getValues();
return itemRange.filter(row => row[1] !== '' || row[2] !== '');
}
function searchItems(searchTerm) {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const stockSheet = ss.getSheetByName('Stock');
if (!stockSheet) throw new Error('Stock sheet not found.');
const lastRow = stockSheet.getLastRow();
const itemRange = stockSheet.getRange('A2:J' + lastRow).getValues();
return itemRange.filter(row =>
row[1].toString().toLowerCase().includes(searchTerm.toLowerCase()) ||
row[2].toString().toLowerCase().includes(searchTerm.toLowerCase()) ||
row[3].toString().toLowerCase().includes(searchTerm.toLowerCase())
);
}
function addItemToInvoice(${columns.slice(0, 7).map((_, i) => `arg${i}`).join(', ')}) {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const invoiceSheet = ss.getSheetByName('Invoice');
if (!invoiceSheet) throw new Error('Invoice sheet not found.');
const lastRow = invoiceSheet.getLastRow() + 1;
invoiceSheet.getRange(lastRow, 2).setValue(arg0); // Item Code
invoiceSheet.getRange(lastRow, 3).setValue(arg1); // Description
invoiceSheet.getRange(lastRow, 4).setValue(arg2); // HSN
invoiceSheet.getRange(lastRow, 6).setValue(arg6); // UOM
invoiceSheet.getRange(lastRow, 7).setValue(arg3); // Unit Price
invoiceSheet.getRange(lastRow, 11).setValue(arg5); // CGST
invoiceSheet.getRange(lastRow, 13).setValue(arg4); // SGST
}
${functionsCode}
// Note: Replace the alert statements above with your actual function logic`;
// Display the code
document.getElementById('html-output').textContent = htmlCode;
document.getElementById('js-output').textContent = jsCode;
}
function showTab(tabName) {
document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
document.getElementById(tabName + '-tab').classList.add('active');
event.target.classList.add('active');
}
function copyCode(type) {
const elementId = type === 'html' ? 'html-output' : 'js-output';
copyToClipboard(elementId);
}
function copyToClipboard(elementId) {
const element = document.getElementById(elementId);
const text = element.textContent;
if (text && !text.includes('Click "Generate Code"')) {
navigator.clipboard.writeText(text).then(() => {
const btn = element.parentNode.querySelector('.copy-btn');
const originalText = btn.innerHTML;
btn.innerHTML = '✅ Copied!';
btn.style.background = '#28a745';
setTimeout(() => {
btn.innerHTML = originalText;
btn.style.background = '#4285f4';
}, 2000);
showNotification(`${elementId === 'html-output' ? 'HTML' : 'JavaScript'} code copied to clipboard!`);
}).catch(() => {
showNotification('Copy failed. Please use Ctrl+C.', 'error');
});
} else {
showNotification('Please generate code first!', 'warning');
}
}
function showNotification(message, type = 'success') {
const existingNotification = document.querySelector('.notification');
if (existingNotification) existingNotification.remove();
const notification = document.createElement('div');
notification.className = 'notification';
notification.textContent = message;
const colors = { success: '#28a745', error: '#dc3545', warning: '#ffc107' };
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: ${colors[type] || colors.success};
color: white;
padding: 15px 25px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
z-index: 1000;
font-weight: 600;
animation: slideIn 0.3s ease;
`;
const style = document.createElement('style');
style.textContent = `
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
`;
document.head.appendChild(style);
document.body.appendChild(notification);
setTimeout(() => {
notification.style.animation = 'slideIn 0.3s ease reverse';
setTimeout(() => notification.remove(), 300);
}, 3000);
}
// Event listeners for real-time updates
document.getElementById('dialogTitle').addEventListener('input', updatePreview);
document.addEventListener('input', function(e) {
if (e.target.classList.contains('column-display') || e.target.classList.contains('column-index') ||
e.target.classList.contains('display-name') || e.target.classList.contains('function-name')) {
updatePreview();
}
});
// Initialize preview
updatePreview();