Topic
  • 10 replies
  • Latest Post - ‏2014-01-13T13:18:07Z by mdreza1472
mdreza1472
mdreza1472
50 Posts

Pinned topic Customizing Login Page with Background Image

‏2014-01-06T06:09:23Z |

Hello,

 

I have a business requirement where we have to provide a background image for login page.

 

Can anybody help with the approach for this?

 

Thanks,

 

Kind Regards,

Md Reza.

  • Aliatsoft
    Aliatsoft
    28 Posts

    Re: Customizing Login Page with Background Image

    ‏2014-01-06T17:24:26Z  
    Hi,
     
    I don't see background image being exposed in Desktop setting - as logo settings are available. 
     
    Going for customizations there are number of options I can think of:
     
    • Replace the current background image in the package (../navigator/ecm/widget/resources/images/paper.png)
    • Modify the CSS (.../WebContent/ecm/widget/resources/LoginPane.css) 
    • Create custom login page using Javascript API and new CSS/theme
     
    I would go with one of the first two options if same behaviour is accepted at global level (all apps and desktops). 
     
    Hope that helps.
    /Ali
  • mdreza1472
    mdreza1472
    50 Posts

    Re: Customizing Login Page with Background Image

    ‏2014-01-07T05:54:56Z  
    Hi,
     
    I don't see background image being exposed in Desktop setting - as logo settings are available. 
     
    Going for customizations there are number of options I can think of:
     
    • Replace the current background image in the package (../navigator/ecm/widget/resources/images/paper.png)
    • Modify the CSS (.../WebContent/ecm/widget/resources/LoginPane.css) 
    • Create custom login page using Javascript API and new CSS/theme
     
    I would go with one of the first two options if same behaviour is accepted at global level (all apps and desktops). 
     
    Hope that helps.
    /Ali

    Hello Ali,

     

    Thanks for the reply, i actually achieved this with the 1st approach i.e replacing the paper.png image.

    However can you elobrate more on the 3rd approach?Would like to know it.

     

    Regards,

    Md Reza.

  • Aliatsoft
    Aliatsoft
    28 Posts

    Re: Customizing Login Page with Background Image

    ‏2014-01-07T16:46:31Z  

    I was trying to give you examples of different level of customization that can be done in ICN...

    In the 3rd option, you can build your own web page to do the login and then direct user to one of ICN/customized pages (a desktop url for instance)

    You can find a sample in ICN installation directory (ECMClient\samples\samplePages\WebContent\model\login.html)

    Note: easiest approach is not always best approach, also extreme customization has its costs - I have not productionized a customized ICN system yet and can't comment on best practices- IBM's comment is appreciated.

    /Ali

     

    Updated on 2014-06-16T14:51:30Z at 2014-06-16T14:51:30Z by Aliatsoft
  • damorris
    damorris
    786 Posts

    Re: Customizing Login Page with Background Image

    ‏2014-01-07T18:50:58Z  

    I was trying to give you examples of different level of customization that can be done in ICN...

    In the 3rd option, you can build your own web page to do the login and then direct user to one of ICN/customized pages (a desktop url for instance)

    You can find a sample in ICN installation directory (ECMClient\samples\samplePages\WebContent\model\login.html)

    Note: easiest approach is not always best approach, also extreme customization has its costs - I have not productionized a customized ICN system yet and can't comment on best practices- IBM's comment is appreciated.

    /Ali

     

    Please note that replacing ANY file directly in the Content Navigator EAR file directories is completely UNSUPPORTED.  Every time you install a new fixpack or hotfix it will overwrite the entire EAR file and any changes to those files will be overwritten.  This was a huge issue for customers when they customized Workplace AE or any other legacy client that didn't have a proper framework for building and deploying extensions.  

    Any change you make to Content Navigator MUST be done in a plugin that is packaged as a JAR file and installed in to ICN via the Content Navigator administration Plug-ins panel.  Your plugin JAR file is loaded from a file path or URL path that is separate from the core ICN EAR file contents and so when you install ICN fixpacks / hotfixes your plugin remains unchanged and continues to work, provided you've built it properly using the publicly exposed methods in the ICN API.

    The 3rd option could be done in a plugin.

  • mdreza1472
    mdreza1472
    50 Posts

    Re: Customizing Login Page with Background Image

    ‏2014-01-08T07:37:58Z  
    • damorris
    • ‏2014-01-07T18:50:58Z

    Please note that replacing ANY file directly in the Content Navigator EAR file directories is completely UNSUPPORTED.  Every time you install a new fixpack or hotfix it will overwrite the entire EAR file and any changes to those files will be overwritten.  This was a huge issue for customers when they customized Workplace AE or any other legacy client that didn't have a proper framework for building and deploying extensions.  

    Any change you make to Content Navigator MUST be done in a plugin that is packaged as a JAR file and installed in to ICN via the Content Navigator administration Plug-ins panel.  Your plugin JAR file is loaded from a file path or URL path that is separate from the core ICN EAR file contents and so when you install ICN fixpacks / hotfixes your plugin remains unchanged and continues to work, provided you've built it properly using the publicly exposed methods in the ICN API.

    The 3rd option could be done in a plugin.

    Thanks for the reply damorris.

     

    Well i am in a process of creating the cusom plugin referring that red book now;  will soon update here if i get any issues.

     

    Thanks once again.

     

    Kind Regards,

    Md Reza.

  • mdreza1472
    mdreza1472
    50 Posts

    Re: Customizing Login Page with Background Image

    ‏2014-01-08T07:40:14Z  

    I was trying to give you examples of different level of customization that can be done in ICN...

    In the 3rd option, you can build your own web page to do the login and then direct user to one of ICN/customized pages (a desktop url for instance)

    You can find a sample in ICN installation directory (ECMClient\samples\samplePages\WebContent\model\login.html)

    Note: easiest approach is not always best approach, also extreme customization has its costs - I have not productionized a customized ICN system yet and can't comment on best practices- IBM's comment is appreciated.

    /Ali

     

    Thanks Ali for the reply.

    Login page sample example will be helpfull for me.

    Kind Regards,

    Md Reza.

  • arronla
    arronla
    92 Posts

    Re: Customizing Login Page with Background Image

    ‏2014-01-08T08:20:26Z  

    Thanks Ali for the reply.

    Login page sample example will be helpfull for me.

    Kind Regards,

    Md Reza.

    One other alternative you can do is to reuse the existing login pane but just alter the background image in a very simple plugin.

    Not tested but something along this line should work.

    var loginPane = Desktop.getLayout().loginPane;

    style.set(loginPane.domNode, "background", urlToYourImage);

     

  • mdreza1472
    mdreza1472
    50 Posts

    Re: Customizing Login Page with Background Image

    ‏2014-01-10T08:06:10Z  
    • arronla
    • ‏2014-01-08T08:20:26Z

    One other alternative you can do is to reuse the existing login pane but just alter the background image in a very simple plugin.

    Not tested but something along this line should work.

    var loginPane = Desktop.getLayout().loginPane;

    style.set(loginPane.domNode, "background", urlToYourImage);

     

    Thanks arronla for reply.

    Sorry for this question, but what i understood by you're post is we have to write the above changes in html template ?

    Reza.

  • arronla
    arronla
    92 Posts

    Re: Customizing Login Page with Background Image

    ‏2014-01-10T17:48:31Z  

    Thanks arronla for reply.

    Sorry for this question, but what i understood by you're post is we have to write the above changes in html template ?

    Reza.

    Nope, it will just be in the plugin's javascript file.  I just wrote the code below blindly.  There might be some minor errors but it should do what you are trying to do.

    require(["dojo/_base/declare", "dojo/aspect", "dojo/_base/lang", "dojo/dom-style","ecm/model/Desktop"],
            function(declare, aspect, lang, style, Desktop){
                    aspect.after(Desktop, "onDesktopLoaded", function(response){
                        var loginPane = Desktop.getLayout().loginPane;
                style.set(loginPane.domNode, "background", URLTOYOURIMAGE);
                        });
            }
    });
    

     

  • mdreza1472
    mdreza1472
    50 Posts

    Re: Customizing Login Page with Background Image

    ‏2014-01-13T13:18:07Z  
    • arronla
    • ‏2014-01-10T17:48:31Z

    Nope, it will just be in the plugin's javascript file.  I just wrote the code below blindly.  There might be some minor errors but it should do what you are trying to do.

    <pre class="javascript dw" data-editor-lang="js" data-pbcklang="javascript" dir="ltr">require(["dojo/_base/declare", "dojo/aspect", "dojo/_base/lang", "dojo/dom-style","ecm/model/Desktop"], function(declare, aspect, lang, style, Desktop){ aspect.after(Desktop, "onDesktopLoaded", function(response){ var loginPane = Desktop.getLayout().loginPane; style.set(loginPane.domNode, "background", URLTOYOURIMAGE); }); } }); </pre>

     

    Thanks arronla this finally worked out for me.

     

    Below code is final one:


    require(["dojo/_base/declare", "dojo/aspect", "dojo/_base/lang", "dojo/dom-style","ecm/model/Desktop"],
                function(declare, aspect, lang, style, Desktop)
                /**
                 * Use this function to add any global JavaScript methods your plug-in requires.
                 */
                {            
                aspect.after(Desktop, "onDesktopLoaded",
                        function(response){
                            var loginPane = Desktop.getLayout().loginPane;
                            style.set(loginPane.domNode, "background", "url('/navigator/plugin/CustomSearchPlugin/getResource/images/customizeDesktop.png')");
                });
            
                    aspect.after(Desktop, "onLogin",
                            function(response){
                                var mainPane = Desktop.getLayout().mainPane;
                                style.set(mainPane.domNode, "background", "url('/navigator/plugin/CustomSearchPlugin/getResource/images/customizeDesktop.png')");
                            });
                }
        );

     

    Updated on 2014-01-13T13:22:20Z at 2014-01-13T13:22:20Z by mdreza1472