WebApp/App Designer HTML Component stopped triggering the DataChanged(app, event) function.
显示 更早的评论
I'm using this simple HTML code that creates a password text box. In App Designer, I have an HTML component that I dragged and dropped from the side panel and set the Souce to be the HTML file.
When running the app from App Designer, the HTML component works as intended triggering the PasswordHTMLDataChanged(app, event) function when the password field has changed and storing the password for authentication.
When the App is compiled and run on WebApp, the HTML code does generate the text box but doesn't trigger the PasswordHTMLDataChanged(app, event) leaving my password variable empty.
This Web Application was working fine when running version 2022a but stopped working after the upgrade to 2023b.
Here's the HTML file:
<head>
<style>
div {
display: flex;
flex-direction: row;
}
input {
font-family: Helvetica;
font-size: 12px;
flex-grow: 2;
width: 10px;
height: 100%;
padding-left: 4px;
padding-right: 4px;
}
button {
width: 28px;
font-size: 12px;
margin-right: 1px;
/* background: url(icons/ritm-icon-compress-alt-solid.svg);
background-size: 20px 20px; */
}
</style>
<script type="text/javascript">
function setup(htmlComponent) {
var password = document.getElementById("password");
var toggle = document.getElementById("toggle");
function dataChanged(event) {
password.value = htmlComponent.Data;
}
function valueChanged(event) {
htmlComponent.Data = password.value;
}
function toggleType(event) {
if (password.type === "text")
password.type = "password";
else
password.type = "text";
}
htmlComponent.addEventListener("DataChanged", dataChanged);
password.addEventListener("change", valueChanged);
toggle.addEventListener("click", toggleType);
dataChanged();
valueChanged();
}
</script>
</head>
<body>
<div>
<input id="password" type="password">
<button id="toggle">👁</button>
</div>
</body>
and here's the AppDesigner callback function.
function PasswordHTMLDataChanged(app, event)
password = app.PasswordHTML.Data;
app.pass = password;
% disp(password);
% disp("Change function did run");
end
As part of my troubleshooting I added the disp(password) (uncommented of course) to see if the function was actually triggered and no messages are shown in the logs.
回答（2 个）
prabhat kumar sharma
2023-12-14
0 个投票
I understand that your web app is not triggering the "PasswordHTMLDataChanged" function on R2023b.
I have successfully created a web app with HTML and a text area to update the value when "PasswordHTMLDataChanged" is triggered. The UI for the app looks as shown below:
It appears to be working for me, as the value of the text area updates when I change the textbox generated using the provided HTML code.
Here are the steps I followed:
- Created the application using app designer.
- Created the web app and generated the ctf file.
- Deployed the ctf file on MATLAB Web App Server.
I recommend testing your function using an additional textarea. Ensure that you have added the source file correctly and are not encountering any errors while creating the web app. Additionally, you can check the log files for any error messages.
I hope this information is helpful.
3 个评论
Martin Tragsdorf
2023-12-14
编辑：Martin Tragsdorf
2023-12-22
Hi @prabhat kumar sharma, I have the same issue as @Mathieu Vinette after upgrading the Web App Server from R2021a to R2023b. I used an app component with a similiar HTML code for a password field.
I also tried the HTML Password app component from Pavel Roslovets (App Designer Password Field) which should be similar to yours. But none of the HTML event triggers seem to work, not even the "eye" button to unhide the password.
I am only using the development version of the Web App Server from the compiler license. Have you tested your app on the full version of the Web App Server?
In the meantime I've created a quick and dirty solution using the UIFigureWindowKeyPress callback, storing the inputs in a private property "UserInput" and displaying the obscurred password it in a label field.
% Window key press function: UIFigure
function UIFigureWindowKeyPress(app, event)
key_pressed = event.Key;
char_pressed = event.Character;
pass_correct = 'test123';
if strcmpi(key_pressed,"return" )
%check for correct password
if strcmpi(app.UserInput,pass_correct)
% remove panel and WindowsKeyPressFcn
app.UserInput = '';
app.UIFigure.WindowKeyPressFcn='';
delete(app.Label)
%%% DO WHAT YOU HAVE TO DO
else % remove Password and try again
app.UserInput = '';
app.Label.Text = '';
end
elseif strcmpi(key_pressed,"backspace")
app.UserInput = app.UserInput(1:end-1); %remove last key from typed password
app.Label.Text = repmat('*',1,length(app.UserInput));
elseif strcmpi(key_pressed,"escape")
app.UserInput = '';
app.Label.Text = ''; % cancel and get out
else
if ~isempty(char_pressed) && isstrprop(char_pressed(1),'graphic')
app.UserInput = [app.UserInput,char_pressed(1)];
app.Label.Text = repmat('*',1,length(app.UserInput));
else
end
end
end
Mathieu Vinette
2023-12-18
编辑：Mathieu Vinette
2023-12-18
Martin Tragsdorf
2023-12-22
编辑：Martin Tragsdorf
2023-12-22
I only use the password field to restrict the access at the start of the application. At that time there is nothing visible besides the password field. After entering the correct password, I delete the password field and remove the WindowKeyPressFcn.
If you want to activate the callback only after the label field has been clicked you can use the WindowButtonDownFcn to check for a mouse click on the label field and activate/deactivate the WindowKeyPressFcn callback. I build a small example application that activates a panel object after you enter the correct password "test123".
I also fixed a bug in the code I posted above, that was causing the last character of the password to not be deleted when you hit the backspace key.
marco.bilucaglia
2025-3-19
I experienced similar problems: the component pefectly worked in the APP Designer (R2024b) but not in the deplyed Webapp (R2024b WebApp Server). The component I wanted to use was the App Designer Password Edit Field by Pavel Roslovets.
As I don't know anything at all about HTML and Javascript, I tried to go into the problem with the help of C*a*GPT (I mask it with asterisks, as I do not want o advertise it and I am not sure wether I can directly refer to solutions provided by LLMs).
It suggested me to use the browser console (F12 in Google Chrome) and I noticed some issues, including the following:
"Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-bhbESBIHyLZ6tfumGr8ASnUr9y75rn9auhOUL9b+/GY='), or a nonce ('nonce-...') is required to enable inline execution"
The LLM explained me that "it is related to Content Security Policy (CSP) restrictions, which are preventing the execution of inline JavaScript in your HTML". From my understanding, the HTML aimed to execute an embedded JavaScript. As "modifying the CSP is not possible in MATLAB Web App Server", the HTML should refer to an external JavaScript file (<script src="script.js"></script>) containing the component's behaviour.
Doing so, I was able to fix the problem.
Here is the modified HTML code (named htmlcode.html, the component's HTMLSource).
%HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
display: flex;
flex-direction: row;
}
input {
font-family: Helvetica;
font-size: 12px;
flex-grow: 2;
width: 10px;
height: 100%;
padding-left: 4px;
padding-right: 4px;
}
button {
width: 28px;
font-size: 12px;
margin-right: 1px;
}
</style>
<!-- Link to the external JavaScript file -->
<script src="script.js"></script> <!-- External JavaScript file -->
</head>
<body>
<div>
<input id="password" type="password">
<button id="toggle">👁</button>
</div>
</body>
</html>
Here is the JavaScript code (named script.js):
function setup(htmlComponent) {
var password = document.getElementById("password");
var toggle = document.getElementById("toggle");
function dataChanged(event) {
password.value = htmlComponent.Data;
}
function valueChanged(event) {
htmlComponent.Data = password.value;
}
function toggleType(event) {
if (password.type === "text")
password.type = "password";
else
password.type = "text";
}
htmlComponent.addEventListener("DataChanged", dataChanged);
password.addEventListener("change", valueChanged);
toggle.addEventListener("click", toggleType);
dataChanged();
valueChanged();
}
window.onload = function() {
setup(window.htmlComponent);
};
I hope it will be helpful for someone!
类别
在 帮助中心 和 File Exchange 中查找有关 App Building 的更多信息
2023-12-6
2025-3-19
Community Treasure Hunt
Find the treasures in MATLAB Central and discover how the community can help you!
Start Hunting!
Translated by 
