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.…


                                                                          redButton.JPG


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.…   


                   

page.JPG

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.…



                             All.JPG

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

Regards

Sakthivel

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Raj Sagre

    Great work dude..

    But I have a doubt why we have to use this second method for adding classes to particular control as we already have addStyleClass() method to add class and I saw that your second method actually using this method internally. So what is the difference !!!!!

    (0) 
    1. Sakthivel Elango Post author

      Yeah, there is addStyleClass() provided by UI5! But to use this method, you have to create a css class in a style tag or in a new stylesheet. So to add those css completely through a function, addCustomStyle() can be used. It applies the style passed and generates the css class for it.

      (0) 
  2. Mike Reader

    Does this work if you run the app on a device (ie iPhone), we have applied some css using the addStyleClass() method and the css changes don’t seem to work when we run it on device (vs a browser).

    ** Note, we are also wrapping the HTML5 with Cordova

    (0) 
    1. Sakthivel Elango Post author

      addStyleClass() is an inbuilt method provided by UI5, so it should work! I’ve not tested this on any device, Let me do it and let you know.

      (0) 

Leave a Reply