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.
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.
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 😉
Keep in mind that the actual source code may vary depending on your IAS configuration (required fields etc.).
Keep in mind that the actual source code may vary depending on your IAS configuration (required fields etc.).
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!
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:
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":
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".
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.
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.
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=...&targetUrl=&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="forgotPasswordLink" href="/ui/createForgottenPasswordMail?spId=...&targetUrl=">Forgot Password</a>"><input
id="temp_logOnLink" name="logOnLink" type="hidden"
value="<a id="logOnLink" href="https://...dispatcher.hana.ondemand.com/index.html">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.
- SAP Managed Tags:
16 Comments
