Clarity

Expand all | Collapse all

v13 : Personalising the LOGON screen

  • 1.  v13 : Personalising the LOGON screen

    Posted May 02, 2012 10:08 AM
      |   view attached
    Anybody know how to personalise the V13 application login screen?

    (we've experimented with various files like login.js / clarity.min.css / login.css and can get some results - mostly breaking the login screen though - nothing that seems to let us put a chunk of text or "message of the day" on the login page)

    :wacko:

    So I want to do stuff like this (or anything like that really)...


  • 2.  RE: v13 : Personalising the LOGON screen

    Posted May 02, 2012 03:11 PM
    Hi,

    Try to change the login screen’s background image with the text and color you are looking for. You can find the login background image in default Theme folder at \\clarity\webroot\ui\themes\default\images. The image name is Login.gif
    You may need to restart the clarity services to effect.

    Don’t forget to make a copy of this before any change.

    Hope this helps.

    -Sunil Prasad


  • 3.  RE: v13 : Personalising the LOGON screen

    Posted May 02, 2012 04:06 PM
      |   view attached
    That should exist only on upgraded systems as a remnant of v12

    v13 is different see
    Edit Company Logo at Clarity Login screen in Calrity v13
    97504278

    Martti K.


    .


  • 4.  RE: v13 : Personalising the LOGON screen

    Posted May 02, 2012 04:58 PM

    prasad_sunil wrote:

    You can find the login background image in default Theme folder at \\clarity\webroot\ui\themes\default\images. The image name is Login.gif
    Yep as Martti says that is not how it works in V13, I am pretty well versed in amending the equivalent logon page in v7 and v8, had worked out how to do it in v12 as well, just a bit stumped in [color=#ff0000]v13[color].

    --

    another_martink wrote:

    see Edit Company Logo at Clarity Login screen in Calrity v13
    We can affect the "CA" logo up on the top left of that logon box using the ideas in that thread, but so far have not been able to get at the "page" itself.

    I really want to put some "disclaimer" text (a couple of paragraphs of text) on the page, along with any impending maintenance/downtime messages (which I don't think is an unreasonable functional requirement), but so far no luck. :sad


  • 5.  RE: v13 : Personalising the LOGON screen

    Posted Aug 23, 2012 04:35 PM
    Hi Dave,

    I have similar need to customize login page in V13. I tried /usr/cappm/clarity13/webroot/ui/uitk/js/login.js but my changes show no effect. Have you figured out where to make the changes?

    Please let me know.

    Thank you,
    Rajani.


  • 6.  RE: v13 : Personalising the LOGON screen

    Posted Aug 23, 2012 04:49 PM
    No, no luck at all - can't get anything satisfactory to happen. :sad


  • 7.  RE: v13 : Personalising the LOGON screen

    Posted Aug 24, 2012 12:19 AM
    That sounds like a topic for a Tuesday's Tip


    Martti K.


  • 8.  RE: v13 : Personalising the LOGON screen

    Posted Aug 24, 2012 03:31 AM

    another_martink wrote:

    That sound like a topic for a Tuesday's Tip
    "Tuesday Tip : How to Personalise the V13 Logon Screen" - yes please anyone!!!!!

    Such a "tip" would have to be directed at configuring the server files of course.... so I have just also raised a IDEA to suggest this as proper functionality.

    Oops ; its quite similar to the already existing IDEA - Maintenance Mode Option which was raised by ChrisS and mentioned above. :*)


  • 9.  RE: v13 : Personalising the LOGON screen

    Posted Nov 28, 2012 04:29 PM
    Hi Dave,

    We are On Demand customers and every time we upgrade to another version of Clarity, we ask the OD to deploy the logon graphic for us. We have a legal disclaimer on our logon image that needs to be highly visible for everyone who uses the system. CA should come up with a way for customers to personalize the logon image if they do not provide a way to change the graphic in v13.

    We have had this ERQ open since the beginning of time. :wacko:

    I look forward to reading the Tuesday Tip for r13 when you find the solution. -_-


  • 10.  RE: v13 : Personalising the LOGON screen

    Posted May 03, 2012 01:55 PM
    I am very interested in this subject. I posted it as an idea on CA's support site but I was hoping I could tweak 13 to see if I could get it to work.

    Since the login box is a simple html table, I wanted to add a row that had the same code similar to how the "Product Name" works in the UI Themes. I wanted to be able to control a message on the login screen from the UI themes so I could say "Clarity will be down tonight from 7pm-Midnight". Many times we do work and clear the sessions and turn off everyone's external authentication. If they can see a message it will save a great number of help desk tickets.

    I see the code in a number of different files and if I mess with it I am pretty sure I have to repackage and redeploy the ear file for the changed to take in websphere.

    So you were able to make changes to the login.js and see changes reflected?


  • 11.  Re: v13 : Personalising the LOGON screen

    Posted May 04, 2015 12:21 AM

    Hi there, just wondering how you turn everyone's ext authentication off?  Do you do one by one?!



  • 12.  RE: v13 : Personalising the LOGON screen

    Posted Nov 29, 2012 05:30 AM
    Dave,

    I think is a Clarity enhancement request that's probably so old it's starting to whiff a bit.
    There have been several rquests and discussions about wishes to enhance / extend the login screen. In our projects, we also come across this requirment a lot -- e.g. to put a dynamic information panel on the login screen for administrative notices (planned system downtime, etc.).

    So far, no luck.
    We've also had to go the route of manipulating the login GIF.

    I haven't tried extending the login screen in v13 yet. Sorry.

    Come on, CA. It's not an unreasonable request to be able to display dynamic information on the start screen of an enterprise-grade application.

    Daniel


  • 13.  RE: v13 : Personalising the LOGON screen

    Broadcom Employee
    Posted Nov 30, 2012 05:36 PM
    Hi Dave,

    We are currently have this in our backlog to address in allowing you to update the Login page. We are thinking of either adding the login page CSS in UI Theme (we'll comment the section of the CSS appropriately so you know what area of the CSS that needs to change) and you can tailor the CSS there OR we may create a specific UI Theme for the login page - having in the UI Theme our OnDemand and OnPremise customers will be able to update their login page. We are still investigating these approaches. Once I know more information around this, I'll post a respond to the community.

    I apologize for the frustration you are having here.

    Regards,
    Bill Yee

    Clarity Product Management


  • 14.  RE: v13 : Personalising the LOGON screen

    Posted Dec 04, 2012 04:18 AM
    Bill,

    thanks for the update on this.

    Might I make a suggestion? How about a Clarity configuration object, accessible in the Admin area, allowing us to maintain a list of service messages, with a "show from" and a "show until" date?
    All the plumbing to maintain this is there in Clarity anyway.
    And then make a CSS allowing site administrators to customize how they want the service messages displayed on the start screen. Default - a list of messages, rendered like a portlet, ordered by date.

    Coupled with a general customizability of the page, this would make a pretty powerful solution.

    Just a suggestion... :-)

    Daniel


  • 15.  RE: v13 : Personalising the LOGON screen

    Broadcom Employee
    Posted Dec 20, 2012 01:00 PM
    David,

    There are two points to this thread: 1) Personalizing the login screen, 2) Adding a notification message to the login page (or could possible be a message displayed before going into the login page). My initial response was primarily for #1 with the UI Themes change. That said, you couild update the UI Themes to get #2 as well. With updating the UI Themes and you have a multi-lingual site, this would be issue. I'll let product manager in charge of this area that on the need to have an improved way of handling notification messages either on the login page or when they are accessing the site.

    Thanks,
    Bill


  • 16.  RE: v13 : Personalising the LOGON screen

    Broadcom Employee
    Posted Dec 20, 2012 01:00 PM
    David,

    There are two points to this thread: 1) Personalizing the login screen, 2) Adding a notification message to the login page (or could possible be a message displayed before going into the login page). My initial response was primarily for #1 with the UI Themes change. That said, you couild update the UI Themes to get #2 as well. With updating the UI Themes and you have a multi-lingual site, this would be issue. I'll let product manager in charge of this area that on the need to have an improved way of handling notification messages either on the login page or when they are accessing the site.

    Thanks,
    Bill


  • 17.  RE: v13 : Personalising the LOGON screen

    Posted Dec 20, 2012 01:17 PM
    Hi Bill - yes I agree that what I was trying to describe was achieving #2 by imaginitive use of #1. This was what we could do in the earlier GUI versions (and was documented in a manual I seem to remember).

    As for multi-liingual issues, I was not really going that far I think ; cleary until one logs onto the system, the system does not know what language to use!!! :wacko:
    I guess a "fully-localised" solution would perhaps be to provide distinct login URLs per language and then global oprganisations could direct specific user-bases to those URLs for logon (and thereafter the application's existing NLS support takes over)?

    Good to know that someone might be thinking about this in the future though! :grin:


  • 18.  RE: v13 : Personalising the LOGON screen

    Posted Jan 16, 2013 08:23 AM
    This may not work for everyone but I have been trying to reformat the login screen to update some text and add a new logo, there were many false paths with js files which looked like they were doing 1 thing but appear to be doing nothing at all.

    Before making any changes I would recommend backing up any files before making changes.

    These steps are provided as is and there are no guarantees so please don't be blaming me - we have these implemented in a Sandbox server and are testing to ensure there are no knock-on effects further down the line but the cosmetic side of the changes have been successful, but I would certainly agree with earlier posts that if a login page specific UI theme was available to update then life would be much more straightforward

    The changes I had to make where as follows:

    1. In %niku_home%\webroot\ui\uitk\gwt\com.ca.clarity.container updated the following files

    D824E7680C7212C7C8E5DDD794AA7AE2.cache.html
    188FE84135BA6430F19FCF6AA78835B7.cache.html

    Specifically the following function in both files function Hm(b)

    function Hm(b){var c,d;c=new fC;cC(c,'product',new Skb('[color=#fd0404]CA Clarity &trade[color];'));cC(c,'copyright',new Skb((gy(),new Yx(jy((!fy&&(fy=new hy
    ($wnd.clarity.uitk.i18n.I18n.getInstance())),fy).a,'Copyright © 2012 CA. All rights reserved'))).a));d=new fC;cC(d,'login',new Skb((new Yx(jy((!fy&&
    (fy=new hy($wnd.clarity.uitk.i18n.I18n.getInstance())),fy).a,EMb))).a));cC(d,'username',new Skb((new Yx(jy((!fy&&(fy=new hy
    ($wnd.clarity.uitk.i18n.I18n.getInstance())),fy).a,'Username'))).a));cC(d,KMb,new Skb((new Yx(jy((!fy&&(fy=new hy($wnd.clarity.uitk.i18n.I18n.getInstance
    ())),fy).a,'Password'))).a));cC(c,'labels',d);cC(c,LMb,new Ojb(b.hidden));cC(c,'msgs',new Ojb(b.messages));return c.a}

    2. Update %niku_home%\webroot\ui\uif\js\clarity_main_min.js by adding a new DIV inside the form element - you could use this 'hack' to format the login form more and add additional rows or columns to add more information

    <div class="loginform"> and closing </div> just before </form>

    <form name="page" type="form" onsubmit="return false;" method="POST" action="'+b.uitk.SERVLET+'"><div class="loginform"> <table class="ppm_login_box" role="presentation"> <tr><td colspan="2"><h1 class="ppm_login_title">'+c.labels.login+"</h1></td></tr>"+(d?"":' <tr><td class="ppm_login_field_label"><label for="ppm_login_username">'+c.labels.username+
    '</label></td><td><input type="text" id="ppm_login_username" name="userName" size="40" maxlength="240"/></td></tr>')+' <tr><td class="ppm_login_field_label" style="padding-top: 22px"><label for="ppm_login_password">'+c.labels.password+'</label></td><td style="padding-top: 22px"><input type="password" id="ppm_login_password" name="passWord" size="40" maxlength="80"/></td></tr> <tr><td/><td class="ppm_login_msg"> <div id="ppm_login_msg_aria_live" role="alert" aria-live="rude" aria-atomic="true"> </div> ',
    e=c.hidden&&c.hidden.length?c.hidden.length:0,f=0;f<e;f++)c.hidden[f].v&&(d+='<input type="hidden" name="'+c.hidden[f].n+'" value="'+c.hidden[f].v+'"/>');d+=' </td></tr> <tr><td colspan="2" style="position: relative"><input type="button" id="ppm_login_button" value="'+c.labels.login+'"/></td></tr> </table></div> </form>

    3. Then in %niku_home%\webroot\ui\uitk\css\clarity.min.css - this expanded the background for the log in form from just the table with the form fields to sit behind the whole form

    Add a new class
    /* new div class */
    .loginform {
    background-color: #fff;
    background: -moz-linear-gradient(#ffffff, #e2e2e2);
    background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#e2e2e2));
    background: linear-gradient(#ffffff, #e2e2e2);
    -pie-background: linear-gradient(#ffffff, #e2e2e2);
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    behavior: url(ui/ext/pie.htc);
    -pie-poll: false;
    position: relative;
    margin: auto;
    }

    and update the following section

    /* this adds the new logo */
    #ppm_login_logo {
    background: url(base64 for new logo);
    margin: 6px 0px 0px 15px;
    width: 108px;
    height: 30px;
    }

    /* this comments out the original CSS for ppm_login_box */
    /* .ppm_login_box {
    background-color: #fff;
    background: -moz-linear-gradient(#ffffff, #e2e2e2);
    background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#e2e2e2));
    background: linear-gradient(#ffffff, #e2e2e2);
    -pie-background: linear-gradient(#ffffff, #e2e2e2);
    padding: 38px 38px;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    behavior: url(ui/ext/pie.htc);
    -pie-poll: false;
    position: relative;
    margin: auto;
    } */

    /* This new CSS for ppm_login_box, removing the background to make it transparent
    The background then comes from values set for .loginform div
    */
    .ppm_login_box {
    padding: 38px 38px;
    behavior: url(ui/ext/pie.htc);
    position: relative;
    margin: auto;
    }


  • 19.  RE: v13 : Personalising the LOGON screen

    Posted Jan 16, 2013 09:07 AM
    ^ OK sounds promising! :grin:

    Could you perhaps post a screen shot of what you have managed to get the login screen to look like with these sort of customisations? Thanks!


  • 20.  RE: v13 : Personalising the LOGON screen

    Posted Jan 17, 2013 05:02 AM
    Sorry Dave can't post a screenshot as it now has corporate branding but for your request re: an info section/pane - look for this section in clarity_main.min.js

    <div class="ppm_login_copyright">'+c.copyright+"</div> </td></tr></table>

    To add a section to the side as you had wondered about:

    <div class="ppm_login_copyright">'+c.copyright+"</div> </td><td>Support of or contact information for team supporting Clarity</td></tr></table>

    You may decide to use a DIV class and some CSS to provide a background, padding, formatting, etc if you keep the background color

    Alternatively you can add a section below by:

    <div class="ppm_login_copyright">'+c.copyright+"</div> </td></tr><tr><td>Information below the log in screen</td></tr></table>


  • 21.  RE: v13 : Personalising the LOGON screen

    Posted Mar 11, 2014 01:34 AM

    Did others able to achieve personalize the logon screen with above steps?

    Thanks,
    Shiva



  • 22.  RE: v13 : Personalising the LOGON screen
    Best Answer

    Posted Mar 11, 2014 10:17 AM

    The latest release (13.3) has incorporated this feature.  I responded to Shiva in another post.



  • 23.  RE: v13 : Personalising the LOGON screen

    Posted Mar 11, 2014 12:59 PM

    OK so I marked the "fixed in 13.3" as the "Answer", but its still a bit inflexible,

    All that the 13.3 "fix" gave us is the ability to drop in a couple of lines of text and change the logo (and it appears to now respect the ppm_header_product from the UI theme too).  this is all "progress" but not great ; what if I want to drop in a chunk of text (a system access disclaimer) or provide a help-link to a intranet site (all of which I could do in pre v13 systems and was documented in the manuals).

    sad



  • 24.  RE: v13 : Personalising the LOGON screen

    Posted Mar 11, 2014 03:58 PM

    Dave,

    I agree with you.  It is progress, but there are some limitation as you had mentioned.  I think the way it is done is catered towards On-Demand customers that don't have access to make these types of "customizations".  This is a way to differentiate the Test, Dev, and Prod servers and perhaps outline when down times will occur.

    As workarounds to some of the items you have outlined:

    (1) a system access disclaimer -- I saw your initial image in your first post.  This is better reserved AFTER logging in, no?  I would create a General Portlet that is HTML based and drop that information in there.  More control, direct dials, and etc...  What would be really nice is perhaps a phone number for the HelpDesk when a user can't log-in.  You can do that with 13.3's personalization.

    (2) a link to help on the intranet -- this again could work in that General portlet or via Site Links.  Otherwise, I would use a URL shortener service and stick that into the personalization of the log-in as text; it should be easy to copy and paste.

    Not perfect, I agree.  If you think other users can benefit from more flexibility, I would put in some of these specific use cases into the Ideas page.  Thanks!

     



  • 25.  RE: v13 : Personalising the LOGON screen

    Posted Mar 12, 2014 05:33 AM

    Re (1) ; I don't disagree that we can communicate messages to people in different ways; but Clarity allows users to reconfigure their home page and thus can bypass anything "in the application" no matter how clever it is....  And for a "system access disclaimer" (which is really my use-case here) then this sort of message also needs to be displayed before access is attempted (yes its a silly reason, since if someone should not access a system then they should not have a login, but this is how "the legal department" thinks wink).

    Re (2) ; not sure that on the day that the WWW is 25 years old, cutting and pasting links from a piece of static text displayed on screen (rather than a hyperlink) is much progress! cheeky

    --

    EDIT : but the clever tricks worked out by Gurjeet ( V13.2 Logon screen customization ) will help #1- we can use that technique to add lots of text to the login page yes



  • 26.  Re: v13 : Personalising the LOGON screen

    Posted May 04, 2015 02:32 AM

    What is CSS? Is that Clarity Sys Admin equivalent to the NSA??



  • 27.  Re: v13 : Personalising the LOGON screen

    Posted May 04, 2015 03:27 AM

    What is CSS?

    Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.


    Is that Clarity Sys Admin equivalent to the NSA??

    No, that is CSA


    NJ




  • 28.  Re: v13 : Personalising the LOGON screen

    Posted May 04, 2015 04:18 AM

    Thao

    Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications   (source Wiki)

     

    This is not an equivalent for NSA . Starting v13 , You can create custom UI themes using CSS.

    For more information refer the CA PPM Studio guide.

     

    Regards

    Nitin



  • 29.  Re: v13 : Personalising the LOGON screen

    Posted May 04, 2015 08:14 PM

    Thank you, Nitin.



  • 30.  Re: v13 : Personalising the LOGON screen

    Posted May 04, 2015 08:14 PM

    Dave,

     

    Did you work out how to insert a block of text like in your original message?



  • 31.  Re: v13 : Personalising the LOGON screen

    Posted May 04, 2015 11:15 PM


  • 32.  Re: RE: v13 : Personalising the LOGON screen

    Broadcom Employee
    Posted May 21, 2015 09:14 AM

    See also CA PPM UI Themes in CA DocOps Documentation Platform for the latest official product documentation. Hope this helps!



  • 33.  Re: RE: v13 : Personalising the LOGON screen

    Posted Jun 09, 2015 08:15 PM

    Thank you.