Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Simon_Kessler
Product and Topic Expert
Product and Topic Expert
In this article you will learn how to customize the SAP IAS UI and integrate it seamlessly into your corporate design. I will show you how to setup IAS with a custom theme, how to create the theme and what the layout looks like.

Getting Started


First of all you need to go to your IAS tenant administration page:

https://your-tenant.accounts.ondemand.com/admin/

Please replace "your-tenant" with the tenant identifier of your own tenant.

Then navigate to "Applications & Resources" - "Custom CSS":



Initially there will be no style sheets and therefore an empty list.

Creating a Custom Style


Start by downloading the default style.

We want to transform the default style:



into our custom style:



Please note that the provided stylesheet is just a prototype and needs to be further refined. I leave that as an exercise for you 😉

 

Source Code Login Page


Keep in mind that the actual source code may vary depending on your IAS configuration (required fields etc.).
<html lang="en" class=" ids-js ids-flexbox ids-no-touch ids-svg">

<head>
...
</head>

<body data-page="ids-login/logon" data-pagetype="Login" data-spid="..."
data-spname="oac.accounts.sap.com" style="">
<main class="ids-main">
<div class="ids-main__content">
<div aria-labelledby="ids-heading-1" class="ids-container" role="dialog">
<div class="ids-login-container">
<div class="ids-login-sp">
<div class="ids-login-sp__sp-name">
<h1 class="ids-heading-2" id="test-service-provider-name">Administration Console</h1>
</div>
<div class="ids-login-sp__cta"></div>
</div>
<div class="ids-login-login ids-login-login--border">
<div class="ids-login-widget">
<h1 class="ids-heading-1 ids-heading-1--login" id="ids-heading-1">Log On</h1>
<form id="logOnForm" autocomplete="off" role="form" class="ids-form ids-form--login"
action="/saml2/idp/sso" accept-charset="UTF-8" method="post"><input name="utf8"
type="hidden" value="✓"><input type="hidden" name="authenticity_token"
value="...">
<div class="js-global-flashes-area" id="globalMessages"></div>
<fieldset class="ids-fieldset ids-fieldset--login"><input type="hidden"
id="hidden-xsrfProtection-field" name="xsrfProtection"
value="..."><input
type="hidden" name="method" value="GET"><input type="hidden"
name="idpSSOEndpoint"
value="https://....accounts.ondemand.com/saml2/idp/sso"><input
type="hidden" name="sp" value="oac.accounts.sap.com"><input type="hidden"
name="RelayState"
value="https://....accounts.ondemand.com/admin/#/cssDocs/Custom_Style"><input
id="targetUrl" name="targetUrl" type="hidden" value=""><input id="sourceUrl"
name="sourceUrl" type="hidden" value=""><input id="org" name="org" type="hidden"
value=""><input id="spId" name="spId" type="hidden"
value="..."><input id="spName" name="spName" type="hidden"
value="oac.accounts.sap.com"><input id="mobileSSOToken" name="mobileSSOToken"
type="hidden" value=""><input id="tfaToken" name="tfaToken" type="hidden"
value=""><input id="css" name="css" type="hidden" value="Custom_Style">
<div class="ids-input-group ids-input-group--text ids-input-group--login ids-input-group--user"
id="j_username-group">
<div class="ids-label-container"> <span class="ids-label-wrap"> <label
class="ids-label" for="j_username" id="j_username-label"> E-Mail
</label> </span> </div>
<div class="ids-control-container"> <input autocomplete="off"
class="ids-input ids-input--text ids-input--clear js-has-input-clear js-login-toggle-active-input-user"
id="j_username" name="j_username" placeholder="E-Mail" type="text"
value="">
<p class="ids-error-block" id="j_username.errors"> </p> <a
class="ids-input-clear js-input-clear" href="#" tabindex="-1"></a>
</div>
</div>
<div class="ids-input-group ids-input-group--text ids-input-group--login ids-input-group--password"
id="j_password-group">
<div class="ids-label-container"> <span class="ids-label-wrap"> <label
class="ids-label" for="j_password" id="j_password-label"> Password
</label> </span> </div>
<div class="ids-control-container"> <input autocomplete="off"
class="ids-input ids-input--text ids-input--clear js-has-input-clear js-login-toggle-active-input-password"
id="j_password" maxlength="255" name="j_password" placeholder="Password"
type="password">
<p class="ids-error-block" id="j_password.errors"> </p> <a
class="ids-input-clear js-input-clear" href="#" tabindex="-1"></a>
</div>
</div>
<div class="ids-input-group ids-input-group--checkbox ids-utils-centered"
id="rememberme-group">
<div class="ids-control-container">
<ul class="ids-input-group__items" role="group">
<li class="ids-input-group__item"> <span
class="ids-checkbox-container--option"> <input id="rememberme"
name="rememberme" type="checkbox"> </span> <span
class="ids-label-container--option"> <span
class="ids-label-wrap"> <label class="ids-label"
for="rememberme" id="rememberme-label"> Remember me
</label> </span> </span> </li>
</ul>
<p class="ids-error-block" id="rememberme.errors"> </p>
</div>
</div>
</fieldset>
<div class="ids-button-group ids-button-group--centered ids-button-group--login"><button
class="ids-button ids-button--primary ids-button--login js-button-login"
id="logOnFormSubmit" role="button" type="submit">Log On</button></div>
</form>
</div>
<ul class="ids-login-section">
<li class="ids-login__forgotpassword"><a alt="Forgot password?"
href="https://blogs.sap.com/ui/createForgottenPasswordMail?spId=...&amp;targetUrl=&amp;sourceUrl="
id="forgotPasswordLink" title="Forgot password?">Forgot password?</a></li>
</ul>
</div>
</div>
</div>
</div>
</main>
<footer class="ids-footer">
<div class="ids-footer__inner">
<div class="ids-footer__logo-container">
<div class="ids-footer__logo"><img style="height:38px; width:auto"
src="...."
alt="Tenant logo"></div>
</div>
</div>
</footer>
</body>

</html>

Source Code Registration Page


Keep in mind that the actual source code may vary depending on your IAS configuration (required fields etc.).
<html lang="en" class=" ids-js ids-flexbox ids-no-touch ids-svg">

<body data-page="ids-registration/new" data-pagetype="New User Registration" data-spid="..."
data-spname="https://..." style="">
<main class="ids-main">
<div class="ids-main__content">
<div aria-labelledby="ids-heading-1" class="ids-container" role="dialog">
<h1 class="ids-heading-1" id="ids-heading-1">Registration</h1>
<form id="sapStoreRegisterForm" class="ids-form ids-form--horizontal" role="form"
action="/ui/public/performRegistration" accept-charset="UTF-8" method="post"><input name="utf8"
type="hidden" value="✓"><input type="hidden" name="authenticity_token"
value="...">
<div class="js-global-flashes-area"></div>
<div class="ids-input-area"><input id="pdVersion" name="pdVersion" type="hidden" value="-1"><input
id="touVersion" name="touVersion" type="hidden" value="-1"><input id="spId" name="spId"
type="hidden" value="..."><input id="mailingAction"
name="mailingAction" type="hidden"><input id="targetUrl" name="targetUrl" type="hidden"
value=""><input id="enclosingPage" name="enclosingPage" type="hidden" value=""><input
id="spName" name="spName" type="hidden" value="https://..."><input
id="scenario" name="scenario" type="hidden" value="SP_USER"><input
id="use_dynamic_contact_preferences" name="use_dynamic_contact_preferences" type="hidden"
value="false"><input id="temp_forgotPasswordLink" name="forgotPasswordLink" type="hidden"
value="<a id=&quot;forgotPasswordLink&quot; href=&quot;/ui/createForgottenPasswordMail?spId=...&amp;targetUrl=&quot;>Forgot Password</a>"><input
id="temp_logOnLink" name="logOnLink" type="hidden"
value="<a id=&quot;logOnLink&quot; href=&quot;https://...dispatcher.hana.ondemand.com/index.html&quot;>Log On</a>"><input
id="xsrfProtection" name="xsrfProtection" type="hidden"
value="...">
<fieldset class="ids-fieldset">
<h2 class="ids-heading-fieldset">Tell Us About Yourself</h2>
<div class="ids-input-group ids-input-group--text" id="firstName-group">
<div class="ids-label-container"> <span class="ids-label-wrap"> <label class="ids-label"
for="firstName" id="firstName-label"> First Name </label> <abbr
aria-hidden="true" class="ids-required-marker" role="presentation">*</abbr>
</span> </div>
<div class="ids-control-container"> <input aria-describedby="" aria-required="true"
class="ids-input ids-input--text ids-input--clear js-has-input-clear js-remove-error-on-keyup"
id="firstName" maxlength="64" name="firstName" type="text">
<p class="ids-error-block" id="firstName.errors"> </p> <a
class="ids-input-clear js-input-clear" href="#" tabindex="-1"></a>
</div>
</div>
<div class="ids-input-group ids-input-group--text" id="lastName-group">
<div class="ids-label-container"> <span class="ids-label-wrap"> <label class="ids-label"
for="lastName" id="lastName-label"> Last Name </label> <abbr
aria-hidden="true" class="ids-required-marker" role="presentation">*</abbr>
</span> </div>
<div class="ids-control-container"> <input aria-describedby="" aria-required="true"
class="ids-input ids-input--text ids-input--clear js-has-input-clear js-remove-error-on-keyup"
id="lastName" maxlength="64" name="lastName" type="text">
<p class="ids-error-block" id="lastName.errors"> </p> <a
class="ids-input-clear js-input-clear" href="#" tabindex="-1"></a>
</div>
</div>
<div class="js-registration-user-name"></div>
<div class="js-registration-mail">
<div class="ids-input-group ids-input-group--text" id="mail-group">
<div class="ids-label-container"> <span class="ids-label-wrap"> <label
class="ids-label" for="mail" id="mail-label"> E-Mail </label> <abbr
aria-hidden="true" class="ids-required-marker"
role="presentation">*</abbr> </span> </div>
<div class="ids-control-container"> <input aria-describedby="" aria-required="true"
class="ids-input ids-input--text ids-input--clear js-has-input-clear js-remove-error-on-keyup js-remove-error-on-keyup"
id="mail" maxlength="256" name="mail" type="email">
<p class="ids-error-block" id="mail.errors"> </p> <a
class="ids-input-clear js-input-clear" href="#" tabindex="-1"></a>
</div>
</div>
</div>
<div class="ids-input-group ids-input-group--select" id="country-group">
<div class="ids-label-container"> <span class="ids-label-wrap"> <label
class="ids-label ids-required" for="country" id="country-label"> Country
</label> <abbr aria-hidden="true" class="ids-required-marker"
role="presentation">*</abbr> </span> </div>
<div class="ids-control-container"> <select aria-required="true"
class="js-remove-error-on-change" id="country" name="country">
<option value="">Select...</option>
...
</select>
<p class="ids-error-block" id="country.errors"> </p>
</div>
</div>
<div class="js-registration-region"></div>
</fieldset>
<fieldset class="ids-fieldset">
<h2 class="ids-heading-fieldset">Set Password</h2>
<div class="ids-input-group ids-input-group--text js-input-group"
id="newPasswordInput-group">
<div class="ids-label-container"> <span class="ids-label-wrap"> <label class="ids-label"
for="newPasswordInput" id="newPasswordInput-label"> Password </label> <abbr
aria-hidden="true" class="ids-required-marker" role="presentation">*</abbr>
</span> </div>
<div class="ids-control-container"> <input aria-describedby="password-hint"
aria-required="true"
class="ids-input ids-input--text ids-input--clear js-has-input-clear js-input-has-hint js-remove-error-on-keyup tst_bb_hpv tst_bb_ihp"
data-password-min-length="8" data-passwordminage="0" id="newPasswordInput"
maxlength="255" name="password" type="password" value="">
<div class="ids-input-hint js-input-hint" id="password-hint" role="tooltip"> <a
class="ids-input-hint__close js-input-hint-close" href="" tabindex="-1"></a>
<div class="ids-input_hint__inner">
<ul id="input-hint-password-reqs">
<li class="ids-input-hint-check" id="check-length"> Your password must
be at least 8 characters long </li>
<li> and include three of the following: </li>
<li class="ids-input-hint-check" id="check-upper"> Uppercase letters
</li>
<li class="ids-input-hint-check" id="check-lower"> Lowercase letters
</li>
<li class="ids-input-hint-check" id="check-number"> Numbers </li>
<li class="ids-input-hint-check" id="check-symbol"> Symbols </li>
</ul>
</div>
</div>
<p class="ids-error-block" id="password.errors"> </p> <a
class="ids-input-clear js-input-clear" href="#" tabindex="-1"></a>
</div>
</div>
<div class="ids-input-group ids-input-group--text" id="retypeNewPasswordInput-group">
<div class="ids-label-container"> <span class="ids-label-wrap"> <label class="ids-label"
for="retypeNewPasswordInput" id="retypeNewPasswordInput-label"> Re-Enter
Password </label> <abbr aria-hidden="true" class="ids-required-marker"
role="presentation">*</abbr> </span> </div>
<div class="ids-control-container"> <input aria-describedby="" aria-required="true"
class="ids-input ids-input--text ids-input--clear js-has-input-clear js-remove-error-on-keyup"
id="retypeNewPasswordInput" maxlength="255" name="passwordConfirm"
type="password" value="">
<p class="ids-error-block" id="passwordConfirm.errors"> </p> <a
class="ids-input-clear js-input-clear" href="#" tabindex="-1"></a>
</div>
</div>
</fieldset>
</div>
<div class="ids-button-group"><button class="ids-button ids-button--primary"
id="sapStoreRegisterFormSubmit" role="button" title="Register"
type="submit">Register</button></div>
</form>
</div>
</div>
</main>
<footer class="ids-footer">
<div class="ids-footer__inner">
<div class="ids-footer__logo-container">
<div class="ids-footer__logo"><img style="height:38px; width:auto"
src="..."
alt="Tenant logo"></div>
</div>
</div>
</footer>
</body>

</html>

Checking the source code on your own


Just use Chrome or any other modern browser and open the "developer tools (F12)". Then you can inspect the page source code and also play around with immediate changes to the design:



 

In case you are allowing users to register themselves, don't forget to style that page as well!

Creating a style sheet


Create a new file locally on your PC and name it "corporate_style_v1.css". Open it in your favourite editor and paste the following CSS:
.ids-main {
<PASTE IMAGE>
background-size: cover;
}

.ids-login-sp,
.ids-login-login {
float: none;
width: 100%;
border: 0;
padding: 0;
}

.ids-login-container {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 4px;
}

.ids-footer {
display: none;
}

.ids-login-sp {
font-size: 2rem;
padding-top: 1.5rem;
}

.ids-heading-2 {
font-size: 2rem;
}

.ids-heading-1--login {
display: none;
}

.ids-login-widget {
margin-top: 3rem;
}

.ids-login-login {
text-align: center;
}

.ids-label {
display: none;
}

.ids-input-group--login input[type="text"],
.ids-input-group--login input[type="password"],
.ids-input-group--login input[type="email"] {
padding: 10px;
}

.ids-button-group .ids-button:first-child {
background-color: #000;
border-width: 2px;
}

Replace "<PASTE IMAGE>" with an image of your choice. Use e.g. https://websemantics.uk/tools/image-to-data-uri-converter/ to convert an image into a css data url image. Paste only the single line including "background-image:" into your css file.

Go to IAS and create a new style:



Now you can upload your custom css file "corporate_style_v1.css":

Using the Custom Style


Go to the IAS tenant admin page and then select "Applications & Resources" and choose your application from the list. Go to "Branding and Layout", then "Branding Style" and choose "Custom Advanced". Select the previously created stylesheet in the list and hit "Save".




Testing


You can just open your application (which you assigned the style to in IAS) in a new private window (Chrome: incognito) to trigger a new login process. Also IAS makes it now really easy and is offering a test link on the style sheet page:



Just right click the provided link and open in a private window.

Please also take care of testing your style on mobile devices. You can simulate these devices with most browser developer tools.

Conclusion and Links


You have learned how to configure IAS to use a custom stylesheet. Also you are now able to change the default style and apply any required corporate styling.
16 Comments