Hello design studio enthousiasts,
I've been having a go at developing an extension for Design Studio. The goal is to create a type of simple gauge that looks like this:
I'm not experienced in Javascript or JQuery, but I've been able to create the visuals. Now I want to be able to customize it a bit more, first of all by being able to choose the left, middle and right color. I've created an the additional properties HTML and javascript where the colors can be put in. I've based this on the coloredbox example, but when I change the color in my additional properties sheet, nothing happens. It seems the propertieschanged is not fired.
I will share some code with you.
| additional_properties_sheet.html |
|---|
<html> <head> <title>Gauge properties</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="/aad/zen.rt.components.sdk/resources/js/sdk_propertysheets_handler.js"></script> <script src="additional_properties_sheet.js"></script> </head> <script> new com.intensum.sdktest.SDKtestPropertyPage(); </script> <body> <form id="form"> Left Colour <input id="aps_lcolor" type="text" name="lColor" size="40" maxlength="40"> Middle Colour <input id="aps_mcolor" type="text" name="mColor" size="40" maxlength="40"> Right Colour <input id="aps_rcolor" type="text" name="rColor" size="40" maxlength="40"> </form> </body> </html> |
| additional_properties_sheet.js |
|---|
sap.designstudio.sdk.PropertyPage.subclass("com.intensum.sdktest.SDKtestPropertyPage", function() {
var that = this;
this.init = function() { $("#form").submit(function() { alert("submitted"); that.firePropertiesChanged(["lColor","mColor","rColor"]); return false; }); };
this.lColor = function(value) {
if (value === undefined) { return $("#aps_lcolor").val(); } else { $("#aps_lcolor").val(value); return this; } }; this.mColor = function(value) { if (value === undefined) { return $("#aps_mcolor").val(); } else { $("#aps_mcolor").val(value); return this; } }; this.rColor = function(value) { if (value === undefined) { return $("#aps_rcolor").val(); } else { $("#aps_rcolor").val(value); return this; } }; }); |
| Setter/Getter of Component.js |
|---|
this.lColor = function(value) { if (value === undefined) { return lColor; } else { lColor = value; return this; } }; this.mColor = function(value) { if (value === undefined) { return mColor; } else { mColor = value; return this; } }; this.rColor = function(value) { if (value === undefined) { return rColor; } else { rColor = value; return this; } }; |
I feel like I'm replicating the coloredbox example, but it doesn't work. I'm changing the values in the additional properties sheet and pressing enter, but it doesn't change the color as it does in the coloredbox example.
Any ideas?