+++++++++++++++++
Node-RED v4.0.5
Node.js v18.20.4
+++++++++++++++++
I want to change the node's icon, depending on the TYPE attribute.
<script type="text/javascript">
RED.nodes.registerType('ussd-menu', {
category: 'function',
color: '#a6bbcf', // Keep node color static on canvas
defaults: {
menuId: { value: "" },
name: { value: '' },
ussdText: { value: '' },
branchLogic: { value: '' },
preProcessing: { value: '' },
options: { value: '' },
menuType: { value: 'NOTICE' },
inputType: { value: 'ALL' },
minLength: { value: 1 },
maxLength: { value: 50 },
minDigit: { value: 0 },
maxDigit: { value: 9 }
},
inputs: 1,
outputs: 1,
label: function() {
return this.name || 'USSD Menu Item';
},
oneditprepare: function() {
const node = this;
// Show/hide fields based on MenuType and InputType selections
function toggleFields() {
const menuType = $("#node-input-menuType").val();
const inputType = $("#node-input-inputType").val();
if (menuType === "INPUT") {
$("#node-input-inputType-row, #node-input-minLength-row, #node-input-maxLength-row").show();
$("#node-input-minDigit-row, #node-input-maxDigit-row").toggle(inputType === "INTEGER");
} else {
$("#node-input-inputType-row, #node-input-minLength-row, #node-input-maxLength-row, #node-input-minDigit-row, #node-input-maxDigit-row").hide();
}
}
// Attach change event listeners to update field visibility
$("#node-input-menuType").on("change", toggleFields);
$("#node-input-inputType").on("change", toggleFields);
// Initialize visibility on load
toggleFields();
},
icon: function(){
switch (menuType) {
case "INPUT":
return 'node-red/switch.svg'
case "NOTICE":
return 'node-red/fa-comment-o.svg'
case "REDIRECT":
return 'node-red/fa-forward.svg'
default:
return 'node-red/fa-wrench.svg'
}
return 'node-red/switch.svg'
},
});
</script>
<script type="text/html" data-template-name="ussd-menu">
<div class="form-row">
<label for="node-input-menuId">Menu ID</label>
<input type="text" id="node-input-menuId" placeholder="Unique Menu ID" readonly>
</div>
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Node Name">
</div>
<!-- Larger textarea fields for USSD Text, Branch Logic, and Pre-Processing -->
<div class="form-row">
<label for="node-input-ussdText">USSD Text</label>
<textarea id="node-input-ussdText" placeholder="Display Text" maxlength="2000" rows="5"></textarea>
</div>
<div class="form-row">
<label for="node-input-branchLogic">Branch Logic</label>
<textarea id="node-input-branchLogic" placeholder="Branch Logic" maxlength="2000" rows="5"></textarea>
</div>
<div class="form-row">
<label for="node-input-preProcessing">Pre-Processing</label>
<textarea id="node-input-preProcessing" placeholder="Pre-Processing Commands" maxlength="2000" rows="5"></textarea>
</div>
<!-- Menu Type Selection -->
<div class="form-row">
<label for="node-input-menuType">Menu Type</label>
<select id="node-input-menuType">
<option value="INPUT">INPUT</option>
<option value="NOTICE">NOTICE</option>
<option value="REDIRECT">REDIRECT</option>
</select>
</div>
<!-- Additional fields shown conditionally -->
<div class="form-row" id="node-input-inputType-row">
<label for="node-input-inputType">Input Type</label>
<select id="node-input-inputType">
<option value="ALL">ALL</option>
<option value="INTEGER">INTEGER</option>
</select>
</div>
<div class="form-row" id="node-input-minLength-row">
<label for="node-input-minLength">Min Length</label>
<input type="number" id="node-input-minLength" placeholder="Minimum Length">
</div>
<div class="form-row" id="node-input-maxLength-row">
<label for="node-input-maxLength">Max Length</label>
<input type="number" id="node-input-maxLength" placeholder="Maximum Length">
</div>
<div class="form-row" id="node-input-minDigit-row">
<label for="node-input-minDigit">Min Digit</label>
<input type="number" id="node-input-minDigit" placeholder="Minimum Digit">
</div>
<div class="form-row" id="node-input-maxDigit-row">
<label for="node-input-maxDigit">Max Digit</label>
<input type="number" id="node-input-maxDigit" placeholder="Maximum Digit">
</div>
</script>
The above seems sound, but it doesn't change my node's icon.
Any advice?
