Dynamics Portals : Add a local login control on the home page

Dynamics portals are a great solution to create portals and expose Dynamics 365 data to people not using our beloved XRM application.
 
One of our customers asked us to have a login control directly on the home page instead of having to click on “Sign In” link, then show the login page, then log… I think you got it.
 
The problem is the login page is a hidden page that cannot be customized.
So, I found a (dirty) way to handle this request.
 

First, create your own login control

In my home page template, I added two input controls and two buttons (Sign In and Lost password), like below, nothing fancy.

image

The code is the following
 
<h3>Identifiez vous</h3>
<div style="display:none;" id="loginMessage" class="alert alert-danger"></div>
<div>
<div class="form-group">
    <label for="txtLogin">Nom d'utilisateur</label>
    <input type="text" class="form-control" id="txtLogin" placeholder="tapez ici votre identifiant"/>
</div>
<div class="form-group">
    <label for="txtPassword">Mot de passe</label>
    <input type="password" class="form-control" id="txtPassword" placeholder="tapez ici votre mot de passe"/>
</div>
 <div class="form-group">
    <div >
      <button class="btn btn-primary" id="btnLogin">Se connecter</button> <button class="btn btn-default" id="btnLostPassword">Mot de passe oublié ?</button>
    </div>
</div>
</div>

THEN, ADD AN HIDDEN IFRAME WITH LOGIN PAGE

This is quite easy too. Add an iframe in the home page template with login page in it, and style it to hide it

<iframe id="loginFrame" src="/SignIn?returnUrl=%2F%3F" style="display:none;visibility:hidden;"></iframe>

THEN, DO THE MAGIC WITH A SCRIPT

What does the script? when clicking on the login button, copy login and password from your custom login control, then paste them in the login iframe, then click on the login button in the iframe.
Set a timer to check periodically if the login succeeded. How to detect that? if the Username textbox is not in the iframe anymore, then the login succeeded. So, refresh your homepage: Voila! you are connected.
If the Username textbox is still there and there is a validation summary on the page, login failed. Read the error message and display it on your home page.
 
image

Here is the script

$("#btnLogin").on("click",function(){
        var login = $("#txtLogin").val();
        var password = $("#txtPassword").val();

        $("#loginFrame").contents().find("#Username").val(login);
        $("#loginFrame").contents().find("#Password").val(password);
        $("#loginFrame").contents().find("#submit-signin-local").click();
       
        checkInterval = setInterval(function(){

            var isLogged = $("#loginFrame").contents().find("#Username").length === 0;
            var summary = $("#loginFrame").contents().find("#loginValidationSummary");

            if(isLogged){
                location.reload();
            }
            else if(summary.length === 1){
                $("#loginMessage").append(summary.text());
                $("#loginMessage").show();
                clearInterval(checkInterval);
            }            
        },1000);      
    });

Comments

Post a Comment

Popular posts from this blog

New XrmToolBox plugin : Import/Export NN relationships

Image
Two plugins in one day! wow! This one was, in fact, developed a couple of months ago. One of my colleague was using a solution from my fellow MVP Andrii Butenko which allows to import/export NN relationships in a silverlight web resource. This was nice but my colleague was using other attributes than primary key to do the mapping and Andrii’s solution does not support this. So he asked me to develop a XrmToolBox’s plugin that could do this. And, here it is! You can select entities and relationships and moreover, choose mapping attributes on both enitities. I only let text and number attributes selectable as other does not really make sense for mapping purposes. Then you can import or export NN relationships! Here is a preview As usual, this plugin, among other, is available with XrmToolBox on CodePlex
Read more

Searchable Propery Attribute Updater

Image
Hi, The previous post was not the last one... :) You can find in this post the first tool that will make your life easier: Just remember when you customer asked you to remove all these unused attributes form the attribute list of the advanced find form... You navigated through all attrbutes form to modify the Searchable property of each attributes for hours... (maybe am I exaggerating a bit...) The program I give you allows you to update all attributes in a single winform application! Yes it can be! Do not hesitate to give me your comments about this program if you think improvements can be done... Download:
Read more

Full featured CRM grid in HTML/JS

Image
In last December, I was asked to write a web resource to display a grid with CRM records. I was quite frustrated because I didn’t succeed to manage some grid features easily like fixed header with horizontal scrolling among others. I delivered a fixed table which was not so bad but absolutely not something that look like the application grid views. So I decided to work harder to find a way to do this CRM style grid view. After some works (almost two full days), I have succeeded to create a full featured CRM grid view by using only JavaScript. Here is a screenshot: And this is how I can create a grid view from only a div in a HTML page < html > < head > < title > Page de test </ title > < script src ="json2.js"></ script > < script src ="jquery.js"></ script > < script src ="XrmServiceToolKit.js"></ script > < script src ="sdk.metadata.js"></ script > ...
Read more