Adding Colors (functions) to UI5 Controls !

Hey all,

Note (16/12/2015) : I wrote this blog when i was a rookie in UI5, just trying to get hands dirty by doing fancy stuff.  My Coding standards have evolved since then and now i won’t be recommending anyone to have this implemented in their app.

I find many have started to tinker the UI5 controls by adding custom css to it 😛 But the bottleneck here is, some find difficult to find the appropriate classes or choosing the right selector to target the controls 😕 So, to make life easier what if we create a function, say kind off a Plugin that provides additional functionality to all the controls. Say something like

                      i) control . changeColor(“colorName”);

What if this would change the color of the control you wish to ? Sounds simple and neat for someone who wants to play around with the control’s css.

                   ii) control . addCustomStyle(“className”,”CSS”);

And for someone who wants a freedom to express their own css , they could directly assign a className along with the css to be applied.

So, As of now i’ve created those two functions which would apply the css directly to the controls. To get those functions, you’ll have to add this code below, custom-ui5-plugin.js

var style=document.createElement("style");
  document.head.appendChild(style);
  style.type = "text/css";
  style.innerHTML = "";
  var oDUmmy = new sap.ui.core.Control();
  sap.ui.core.Control.prototype.changeColor = function(oColor){
   style.innerHTML = style.innerHTML + '.' + oColor + '{background-color:' + oColor + ' !important;}';
   this.addStyleClass(oColor);
  }
  sap.ui.core.Control.prototype.addCustomStyle = function(oClassName,oStyle){
   style.innerHTML = style.innerHTML + '.' + oClassName + '{' + oStyle + ' !important;}';
   this.addStyleClass(oClassName);
  }

say you can copy this code into a file “myCustomPlugin.js” and add it into a script tag once you have the bootstrap script. <script src=”myCustomPlugin.js”></script>.

That’s it. All the controls you create will have additional functions  i)changeColor() ii)addCustomStyle()

Example, say you create a button & wanna change the color to red, you can do

var oButton = new sap.m.Button({text:"Sample"}); //create a button
    oButton.changeColor("red"); // change the color of the button

You can find the snippet here JS Bin – Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;icon&quot; href=&quot;http://static.jsbin.…

This will be result that you would get. For now, color values in hex codes not supported 🙁

What if someone wanna add a gradient or any css of their own,you can use the function addCustomStyle. Below i have applied a gradient background to the control Page. 

var oPage = new sap.m.Page({title:"UI5 Plugin",enableScrolling:true ,content:[]}); // create a Page
oPage.addCustomStyle('gradient',' background: -webkit-radial-gradient(
40% 20%, closest-corner, #153458, #232 947)'); // Adding gradienbackground to Page

You can find the snippet here JS Bin – Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;icon&quot; href=&quot;http://static.jsbin.…   

Check out this snippet where i’ve combined all in 1 JS Bin – Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;icon&quot; href=&quot;http://static.jsbin.…

I haven’t added much of functionality, just started with it 😎

Regards

Sakthivel