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;