You can use the adaptive cards to achieve this.Adaptive Cards
Please use this code in the Bot view template > Custom JS.
setTimeout(function(){ // Select the node that will be observed for mutations const targetNode = $('.chat-container'); // Options for the observer (which mutations to observe) const config = { attributes: true, childList: true, subtree: true }; // Callback function to execute when mutations are observed const callback = function(mutationsList, observer) { if( $('[placeholder=Password]').attr('type') === 'text') { $('[placeholder=Password]').attr('type', 'password'); } }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); // Start observing the target node for configured mutations observer.observe(targetNode[0], config); }, 3000);
Then use an adaptive card. Please ensure that the placeholder is set as “Password“.
Use this sample code in the function node.
if(!msg.payload.orbita) { msg.payload.orbita = {}; } if(!msg.payload.orbita.directive) { msg.payload.orbita.directive = []; } msg.payload.orbita.directive.push( { "type": "adaptivecard", "template": { "type": "AdaptiveCard", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.3", "body": [ { "type": "TextBlock", "text": "Type your Password here", "id": "password_text", "wrap": true }, { "type": "Input.Text", "placeholder": "Password", "id": "password" }, { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "title": "Submit", "id": "submit", "data": { "message": "Your password is saved", "eventName": "A-passwordsubmit" }, "style": "positive" } ] } ] }, "templateData": { }, "hostAppName": { "name": "default" } }) return msg;