The idea was to create a component to show/use very simple SAPUI5 Icons in Design Studio Dashboards. I create this component to learn using the Design Studio SDK.
First we create the additional properties, this is for selecting icons in design time. You have 3 steps in the js file.
additional_properties_sheet.js
sap.designstudio.sdk.PropertyPage.subclass("com.mycompany.icon.IconPropertyPage", function() {
var that = this;
var name;
this.init = function() {
jQuery.sap.require("sap.ui.core.IconPool");
// Get Icon Names
var aNames = sap.ui.core.IconPool.getIconNames();
// Create Vertical Layout
var content = new sap.ui.commons.layout.VerticalLayout({
width : "100%"
});
// Generate List with Icons
for (var idx in aNames){
var uri = sap.ui.core.IconPool.getIconURI(aNames[idx]);
icon = new sap.ui.core.Icon(aNames[idx], {
src : uri,
size : '32px',
color : '#000000',
width : '32px',
press: function() { name = this.sId;that.firePropertiesChanged(["iconname"]);}
} );
content.addContent(icon);
}
content.placeAt("content");
};
// setter and getter
this.iconname = function(value) {
if (value === undefined) {
return name;
}
else {
name = value;
return this;
}
};
});
additional_properties_sheet.html
doctype html>
html>
<head>
<title>Icon Property Sheet</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="/aad/resources/sap-ui-core.js" type="text/javascript" id="sap-ui-bootstrap" data-sap-ui-theme="sap_goldreflection" data-sap-ui-libs="sap.ui.commons"></script>
<script src="additional_properties_sheet.js"></script>
</head>
<script>
new com.mycompany.icon.IconPropertyPage();
</script>
<body class="sapUiBody">
<div id="content"></div>
</body>
html>
After creating the additional properties we create the component.js
I use the same SAPUI5 component as in the additional_properties_sheet.js. I set the properties, some setter and getter and that is.
sap.designstudio.sdk.Component.subclass("com.mycompany.icon.Icon", function() {
var that = this;
var height = '32px';
var width = '32px';
var color = '#333333';
var activeColor = '#333333';
var activeBackgroundColor = '#FFFFFF';
var hoverColor = '#eeeeee';
var isClickable = true;
var uri;
var name;
this.afterUpdate = function() {
height = this.$().height() + 'px';
width = this.$().width() + 'px';
uri = sap.ui.core.IconPool.getIconURI(name);
if (this.isClickable()){
var icon = new sap.ui.core.Icon('', {
src : uri,
size : height,
color : this.color(),
activeColor : this.activeColor(),
activeBackgroundColor : this.activeBackgroundColor(),
hoverColor : this.hoverColor(),
hoverBackgroundColor : this.activeBackgroundColor(),
width : width,
press: function() { that.fireEvent(["onClick"]);}
} );
} else {
var icon = new sap.ui.core.Icon('', {
src : uri,
size : height,
color : this.color(),
activeColor : this.activeColor(),
activeBackgroundColor : this.activeBackgroundColor(),
hoverColor : this.hoverColor(),
hoverBackgroundColor : this.activeBackgroundColor(),
width : width
});
}
icon.placeAt(this.$());
};
// property setter/getter functions
this.color = function(value) {
if (value === undefined) {
return color;
} else {
color = value;
return this;
}
};
this.activeColor = function(value) {
if (value === undefined) {
return activeColor;
} else {
activeColor = value;
return this;
}
};
this.hoverColor = function(value) {
if (value === undefined) {
return hoverColor;
} else {
hoverColor = value;
return this;
}
};
this.activeBackgroundColor = function(value) {
if (value === undefined) {
return activeBackgroundColor;
} else {
activeBackgroundColor = value;
return this;
}
};
this.isClickable = function(value) {
if (value === undefined) {
return isClickable;
} else {
isClickable = value;
return this;
}
};
this.iconname = function(value) {
if (value === undefined) {
return name;
}
else {
name = value;
return this;
}
};
});
I'm coding some methods to set the icon color and change the icon, so you can make very easy an exception icon by using arrows and changing the iconname and color in the runtime.
contribution.ztl
/* Returns the current icon name. */
String getIcon() {*
return this.iconname;
*}
/* Sets the current icon name. */
void setIcon(/* New Icon Name */ String newIconName) {*
this.iconname = newIconName;
*}
/* Returns the current color of the box. */
String getColor() {*
return this.color;
*}
/* Sets the current color of the box. */
void setColor(/* New color */ String newColor) {*
this.color = newColor;
*}
}
Now that is it, please give me a feedback. The source is attached, please remove the txt from file and unzip the file.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
7 | |
5 | |
5 | |
5 | |
5 | |
4 | |
4 | |
4 | |
3 | |
3 |