Idea
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.
Functionality
- use as button
- change color (design time and runtime)
- simple selection of Icons (design time and runtime)
Coding
First we create the additional properties, this is for selecting icons in design time. You have 3 steps in the js file.
- get icons names from iconpool
- than create a SAPUI5 VerticalLayout
- and generate the Icons over the array you get from step 1
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;
}
};
});
How does it look in design time
- you can select a color (icon color, active, background, hover)
- you can select an icon from the list in the additional properties window
- you can use the icon as button --> set true to the clickable property
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.
- SAP Managed Tags:
1 Comment
