Pega7 - Customizing Login-Screen - 0

Customizing Login-Screen in Pega - Quick SC Guide
Same principles apply as described here: https://pdn.pega.com/user-interface/how-to-

customize-the-login-screen-62-sp2
To do something like this:
Or this:
1) Create an Unauthenticated Ruleset
Mainly to include (create or copy) the following key assets:

Binary File: Wallpaper (most often found via Google image search, in the
Media or PR area of the customer website or as wallpaper of your
customers contact)
Binary File: Customer Logo
Binary File: Customer icon (*.ico, 16x16 px, most often as web standard
found as favicon.ico file in the customer website root like here:
http://www.syngenta.co/favicon.ico)
You could also include custom fonts as binary files (see web-login how to
include them)
Copy of Pega HTML: web-login
Copy of Pega HTML: web-session-return (optional, Pega7 logout jumps
directly back to web-login)
Copy of Pega HTML Fragment: pyPortalIcon. Adapt to point to your
customer icon ico file.
To easily edit in context of your application, add the ruleset to your normal application
ruleset list. This is optional and only for design time, as the access to the ruleset during
runtime is controlled via separate access group see next step.
2) Create an Unauthenticated Access Group that is
allowed to use the Unauthenticated Ruleset assets.
3) Adapt the Requestor Type rule pega BROWSER to

include your new unauthenticated access group.
Switch the radio button to your own access group.
Attention: be sure to first use another browser session to test the login, before you
fully log out. Keep logged-in in parallel to be able to roll back/change! In case you fully
log out and then something is wrong with your login html or access group, you are
somehow locked out of Pega.
4) Adapt the web-login with your HTML/CSS tweaks.
Attention: keep an active parallel login session in Pega7 Designer Studio while testing in
another session to prevent locking you full out of the system due to errors in the login-
screen.
Feel free to use all your webdesign and styling skills with HTML/CSS/JS see the little
changes I made in red for the Syngenta login screen:
<%
try {
ClipboardPage portal = tools.createPage("Data-Portal", "");
tools.putParamValue("BuildLabelString", portal.getString("pxBuildInfoLabel"));
tools.putParamValue("BuildName", portal.getString("pxBuildName"));
} catch(Exception e) {
tools.putParamValue("BuildLabelString", "");
tools.putParamValue("BuildName", "");
}
String captchaURL =
com.pega.pegarules.pub.util.StringUtils.urlCrossScriptingFilter(tools.findPage("pxThread").getString("pxReqURI") + "?pyActivity=Code-
Security.pyGenerateCaptcha");
tools.putParamValue("TenantName",tools.findPage("pxRequestor").getString("pzTenantName"));
%>
<!DOCTYPE html>
<html>
<head>
<pega:include name='pyPortalIcon' type='Rule-HTML-Fragment'/>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>
<pega:lookup property="pxRequestor.pyCaption" value="Welcome to PegaRULES" />
</title>
<style>
@font-face {
font-family: 'OpenSans';
src: url('webwb/pxfont-OpenSans-Regular.eot');
src: url('webwb/pxfont-OpenSans-Regular.eot#iefix') format('embedded-opentype'),
url('webwb/pxfont-OpenSans-Regular.woff') format('woff'),
url('webwb/pxfont-OpenSans-Regular.ttf') format('truetype'),
url('webwb/pxfont-OpenSans-Regular.svg#OpenSansRegular') format('svg');
font-weight: 400;
font-style: normal;
}
html,
body {
margin: 0;
padding:0;
}
body,
input {
font-family: 'OpenSans', arial, sans-serif;
font-weight: 400;
font-style: normal;
}
body {
font-size: 100%;
line-height: 1.5;
background: url('webwb/RiceFieldWallpaper.jpg') no-repeat left top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-top: 6%;
text-align: center;
}
h2#version {
color: #f2f2f2;
font-size: 12px;
text-shadow: none;
font-weight: 600;
margin: 0 0 10px 0;
}
#login {
width: 450px;
margin: 0 auto;
text-align: center;
position: relative;
}
.field {
margin: 0 auto;
width: 250px;
margin-bottom: .3em;
text-align: left;
}
.field.user {
margin-top: 15px;
}
#error {
color: #e42601;
width: 450px;
font-size: 14px;
font-weight: 600;
}
label {
color: #eee;
text-transform: uppercase;
font-size: .8em;
display: none;
}
#footer {
color: #fff;
font-weight: 400;
font-size: 11px;
padding-top: 50px;
}
input {
text-align: left;
font-size: 13px;
color: #444;
min-height: 2em;
padding: 3px 6px;
width: 100%;
border: none;
border-radius: 3px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
button {
font-size: 12px;
background: #26609b;
padding: 8px 20px;
color: #fff;
text-transform: uppercase;
border: 1px solid #191919;
border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
cursor: pointer;
}
#button-area {
margin: 1em 0;
}
.captchaImg {
background: url('<%=captchaURL %>') no-repeat 0 0;
width: 155px;
height: 50px;
margin: auto;
}
#do_not_submit_row {
display:none;
}
</style>

<pega:when java='<%= tools.findPage("LoginError") != null %>'>
<pega:when test='(AlwaysCaptcha.pxShowCaptcha=="true" || LoginError.pxShowCaptcha=="true")'>
<pega:when java='<%= tools.findPage("Declare_AuthPolicies") != null %>'>
<pega:choose>
<pega:when test='(Declare_AuthPolicies.pyCaptchaType=="custom")'>
<pega:include name="pyCustomCaptchaHead" type="Rule-HTML-Fragment"/>
</pega:when>
</pega:choose>
</pega:when>
</pega:when>
</pega:when>
</head>
<body onload="processOnLoad()" oncontextmenu="return false;">
<div style="text-align: left"><img src="webwb/Syngenta_logo.png" alt="Syngenta" style="text-align: left; position:
fixed; margin-top: -6%;" /></div>
<pega:choose>
<pega:when test="DisableAutoComplete" >
<form name="main" method="post" action="<pega:reference name="pxThread.pxReqURI" mode="normal" />" target="_top"
autocomplete="off" >
</pega:when>
<pega:otherwise>
<form name="main" method="post" action="<pega:reference name="pxThread.pxReqURI" mode="normal" />" target="_top" >
</pega:otherwise>
</pega:choose>
<input type="hidden" name="pzAuth" value="guest" />
<div id="login">
<div id="logoSpan">
<img src="webwb/pz-pega-7-large.png" alt="Pega 7" />
<pega:choose>
<pega:when java='<%= tools.findPage("LoginError") != null %>'>
<pega:when test='!(LoginError.pxErrorMessage=="")'>
<div id="error" class="errorMessage" mode="normal"><pega:reference name="LoginError.pxErrorMessage" /></div>
</pega:when>
</pega:when>
<pega:otherwise></pega:otherwise>
</pega:choose>
<div class="field user">
<label><pega:lookup property="pxRequestor.pyCaption" value="User Name" /></label>
<input id="txtUserID" class="inputBox" type="text" placeholder="User Name" name="UserIdentifier" value="" size="20"
maxlength="128" tabIndex=1 />
</div>
<div class="field">
<label><pega:lookup property="pxRequestor.pyCaption" value="Password" /></label>
<input id="txtPassword" class="inputBox" type="password" placeholder="Password" name="Password" value="" size="20"
tabIndex=2 />
</div>
<pega:when test='(AlwaysCaptcha.pxShowCaptcha=="true" || LoginError.pxShowCaptcha=="true")'>
<pega:when java='<%= tools.findPage("Declare_AuthPolicies") != null %>'>
<pega:choose>
<pega:when test='(Declare_AuthPolicies.pyCaptchaType=="default")'>
<div class="captcha">
<div class="description">
<pega:lookup property="pxRequestor.pyActionPrompt" value="Type the characters you see in the picture below" />
</div>
<div class="captchaImg" id="captchaDiv"></div>
<img src="webwb/desktopimages/pzRefreshCaptcha.png" id="refreshCaptcha" onclick="changeCaptcha();"
title='<pega:lookup property="pxRequestor.pyActionPrompt" value="Try different image" />' tabIndex=3 />
<input type="text" class="captchaInputBox" size="20" name="captchaResponse" value="" tabIndex=4 />
</pega:when>
<pega:when test='(Declare_AuthPolicies.pyCaptchaType=="custom")'>
<div>
<pega:include name="pyCustomCaptchaBody" type="Rule-HTML-Fragment"/>
</div>
</pega:when>
</pega:choose>
</pega:when>
</pega:when>
<div id="button-area">
<div id="submit_row">
<button id='sub' class="loginButton" name="pyActivity=Code-Security.Login" type="submit" onClick="removeErrorMessage();"
title="<pega:lookup property="pxRequestor.pyActionPrompt" value="Log in to PegaRULES." />" >
<span class="loginButtonText" ><pega:lookup property="pxRequestor.pyButtonLabel" value="Log In" /></span>
</button>
</div>
<div id="do_not_submit_row">
<button id='sub_do_not_show' class="loginButton" name="pyActivity=Code-Security.Login" type="button" disabled
title="<pega:lookup property="pxRequestor.pyActionPrompt" value="Log in to PegaRULES." />" >
<span class="loginButtonText" ><pega:lookup property="pxRequestor.pyButtonLabel" value="Log In" /></span>
</button>
</div>
</div> 
</div> 

</div> 
<div id="footer">
<pega:choose>
<pega:when java='<%= tools.findPage("pxProcess.pxAdminSystem").getString("pyIsMT") == "true" &&
tools.findPage("pxRequestor").getString("pzTenantName")!="shared" && tools.findPage("pxRequestor").getString("pzTenantName").trim()!
=""%>'>
<div>
Tenant Name: <p:r n="param.TenantName" />
</div>
</pega:when>
</pega:choose>
<div><p:r n="param.BuildLabelString" /></div>
<pega:when test="pzInternalBuild"><div><pega:lookup property="pxRequestor.pyCaption"
value="not_for_customer_distribution" /></div></pega:when>
<div>
<pega:lookup className="Data-Admin-Nodes" property="pyLabel">
<pega:key name="pySysNodeID" ref="pxProcess.pxSystemNodeID" />
</pega:lookup> | <p:r n="param.BuildName" />
</div>
<pega:include name="CopyrightNotice"/>
</div> 
</form>

<script type="text/javascript">
javascript:window.history.forward(1);
</script>
<script>
function removeErrorMessage() {
document.getElementById('submit_row').style.display = 'none';
document.getElementById('do_not_submit_row').style.display = '';
var errorId = document.getElementById("errorId");
if(errorId) {
errorId.style.display = "none";
}
}
function processOnLoad() {
document.getElementById('submit_row').style.display = '';
document.getElementById('do_not_submit_row').style.display = 'none';
<pega:when test="PromoteEmbeddedPortals" >
/* make sure we're not embedded in some way */
if (self != top) {
top.location.replace(location.href);
return;
}
</pega:when>
try {
document.getElementById("txtUserID").focus();
}
catch(err){}
}
function changeCaptcha() {
var captchaSrc = "<%=captchaURL%>"+"&"+(new Date()).getTime();
document.getElementById("captchaDiv").style.backgroundImage = "url('"+captchaSrc+"')";
}
</script>
</body>
</html>

Pega7 - Customizing Login-Screen - 0

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pega7 - Customizing Login-Screen - 0

Diunggah oleh

Hak Cipta:

Format Tersedia

Customizing Login-Screen in Pega - Quick SC Guide

Same principles apply as described here: https://pdn.pega.com/user-interface/how-to-

To do something like this:

Mainly to include (create or copy) the following key assets:

3) Adapt the Requestor Type rule pega BROWSER to

Switch the radio button to your own access group.

</div>

Anda mungkin juga menyukai