Skip to Content
0
Former Member
Apr 23, 2014 at 01:49 AM

Applying custom theme for UI5 button

268 Views

Hello All,


I am developing a small UI5 application as a PoC. What I want to achieve is, applying custom theme to UI5 elements and hosting this application on share-point.


In the script section, I have added controls which include buttons. I have declared buttons using code displayed below. I created a custom style and I have declared it just before </HEAD> and thus making it the last style that is being called. When I used code inspector, I noticed that there are several other standard classes that are assigned to the button and hence it fails to render the intended look i.e. rounded borders. It works well for everything else. Can someone help?


The complete HTML is as follows:-


<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<script src="resources/sap-ui-core.js"

id="sap-ui-bootstrap"

data-sap-ui-libs="sap.ui.commons">

</script>

<script>

//Add input fields for username and password entry

var txt_username = new sap.ui.commons.TextField("txt_uname");

txt_username.placeAt("uname");

var txt_password = new sap.ui.commons.TextField("txt_pwd");

txt_password.placeAt("pwd");

//Add buttons to submit and clear

var btn_sub = new sap.ui.commons.Button("btn_submit");

btn_sub.setText("Submit");

btn_sub.addStyleClass("btn");

btn_sub.placeAt("uname");

//Clear button

var btn_canc = new sap.ui.commons.Button("btn_cancel");

btn_canc.setText("Cancel");

btn_canc.addStyleClass("btn");

btn_canc.placeAt("pwd");

</script>

<link rel = "stylesheet" type="text/css" href="./resources/sap/ui/library.css" />

</head>

<body class="sapUiBody" role="application">

<div id="content">

<div id="left">Username:

<BR>Password:

</div>

<div id="right">

<div id="uname">

</div>

<div id="pwd">

</div>

</div>

</div>

</body>

Regards

Abhi