Arpit's Dynamics 365 Blog: Customize Home Page in CRM Portal

Have a look this Video :

Hello Everyone, If you are looking for customizing the CRM Portal Home Page UI, This article is for you.

For demonstration, Let's take a simple example:

Suppose my client requirement is to show different Home Page UI for Anonymous and Authenticated Users - So If an anonymous user visits my portal, he/she should be able to view company image slider and if the user is authenticated then OOB UI should be visible.

So Let's quickly understand what we need to do for the same:

Note - Please take a copy of OOB Home Web Template code before start making any changes.

Step 1: Open Home Web Template (Portals > Web Templates > Home)

Step 2: Write Code to check whether user is Anonymous or Authenticated

{% if user %}

User is Authenticated

{% else if %}

User is Anonymous

{% endif %}

Step 3: Paste the below code (or that you had copied as a backup) between the

{% if user %} and {% else if %} block.

{% if user %}

{% assign forums_sm = sitemarkers["Forums"] %}

<section class="page_section section-landing">
  <div class="container">
    <div class="row ">
      <div class="col-md-12">
        <h1 class="section-landing-heading">{% editable snippets 'Home/Title' 
default: 'Contoso' %}</h1>
        <h2 class="section-landing-sub-heading">{% editable snippets 'Home/Subtitle' 
default: 'Customer' %}</h2>
        {% include 'Search' %}
      </div>
    </div>
  </div>
  <div class="layer_down">&nbsp;</div>
</section>
<section class="page_section section-knowledge">
  <div class="layer_up">&nbsp;</div>
  <div class="container">
    <div class="content-home">
      <h2 class="blue_border">{% editable snippets "Home/MostPopularHeading" 
default: resx["Most_Popular"] %}</h2>
      {% include 'Knowledge Management - Most Popular Articles' showdescription: true %}
    </div>
    <div class="row sidebar-home no-lr-margins">
      <div class="col-md-4">{% include 'Knowledge Management - 
Most Popular Articles' showdescription: false %}</div>
      <div class="col-md-4">{% include 'Knowledge Management - 
Most Recent Articles' %}</div>
      <div class="col-md-4">{% include 'Knowledge Management - 
Top Rated Articles' %}</div>
    </div>
  </div>
</section>
<section class="page_section section-sub-landing color-inverse">
  <div class="container">
    <div class="row">
      <div class="col-md-4 text_center-mobile">
        <h1>{{ forums_sm.adx_name | escape }}</h1>
        {% editable snippets "Forum/HomeDescription" %}
        <a href="{{ forums_sm.url | h }}" class="btn btn-info-home btn-lg-home" 
title="{{ snippets['Home/ViewMoreButton'] | default: resx['View_More'] | h }}">
{{ snippets['Home/ViewMoreButton'] | default: resx['View_More'] | h }}</a>
      </div>
    </div>
  </div>
</section>
  {% else if %}

Step 4: Paste the below code between {% else if %} and {% endif %} block.

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   
   
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   
   <style>
   .carousel-inner > .item > img,
   .carousel-inner > .item > a > img {
    width: 100%;
    margin: auto;
   }
   #gethelp{
   
   display:none;
   
   }
   footer .footer-bottom
   {
    display:none;
   }
   .navbar-static-top.navbar-inverse{
   
   background-color: #0303bf;
  color: white;
   
   }
   footer .footer-top{
   
  background-color: #0303bf;
  color: white;
  margin-top: 23px;
   
   }
   body{
   
   background-color: darkgray;
    
   
   }
   </style>
 </head>
 <body>

 <div class="container">
   <br>
   <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <div class="item active">
   <img src="sliderimg1" alt="Chania" width="460" height="320">
   <div class="carousel-caption">
    
   </div>
    </div>

    <div class="item">
   <img src="sliderimg2" alt="Chania" width="460" height="320">
   <div class="carousel-caption">
    
   </div>
    </div>
  
    <div class="item">
   <img src="sliderimg3" alt="Flower" width="460" height="320">
   <div class="carousel-caption">
     
   </div>
    </div>

    <div class="item">
   <img src="sliderimg4" alt="Flower" width="460" height="320">
   <div class="carousel-caption">
    
   </div>
    </div>
   
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
   </div>
 </div>

 </body>
 </html>

{% endif %}

Here "sliderimg1", "sliderimg2", "sliderimg3", "sliderimg4" are the images I have uploaded in Web Files.

Step 4: So the final code for Home Web Template is:

{% if user %}

{% assign forums_sm = sitemarkers["Forums"] %}

<section class="page_section section-landing">
  <div class="container">
    <div class="row ">
      <div class="col-md-12">
        <h1 class="section-landing-heading">{% editable snippets 'Home/Title'

default: 'Contoso' %}</h1>
        <h2 class="section-landing-sub-heading">{% editable snippets 'Home/Subtitle'

default: 'Customer' %}</h2>
        {% include 'Search' %}
      </div>
    </div>
  </div>
  <div class="layer_down">&nbsp;</div>
</section>
<section class="page_section section-knowledge">
  <div class="layer_up">&nbsp;</div>
  <div class="container">
    <div class="content-home">
      <h2 class="blue_border">{% editable snippets "Home/MostPopularHeading"

default: resx["Most_Popular"] %}</h2>
      {% include 'Knowledge Management - Most Popular Articles' showdescription: true %}
    </div>
    <div class="row sidebar-home no-lr-margins">
      <div class="col-md-4">{% include 'Knowledge Management -

Most Popular Articles' showdescription: false %}</div>
      <div class="col-md-4">{% include 'Knowledge Management -

Most Recent Articles' %}</div>
      <div class="col-md-4">{% include 'Knowledge Management -

Top Rated Articles' %}</div>
    </div>
  </div>
</section>
<section class="page_section section-sub-landing color-inverse">
  <div class="container">
    <div class="row">
      <div class="col-md-4 text_center-mobile">
        <h1>{{ forums_sm.adx_name | escape }}</h1>
        {% editable snippets "Forum/HomeDescription" %}
        <a href="{{ forums_sm.url | h }}" class="btn btn-info-home btn-lg-home"

title="{{ snippets['Home/ViewMoreButton'] | default: resx['View_More'] | h }}">

{{ snippets['Home/ViewMoreButton'] | default: resx['View_More'] | h }}</a>
      </div>
    </div>
  </div>
</section>
 
{% else if %}
   
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 100%;
      margin: auto;
  }
  #gethelp{
  
  display:none;
  
  }
  footer .footer-bottom
  {
   display:none;
  }
  .navbar-static-top.navbar-inverse{
  
  background-color: #0303bf;
    color: white;
  
  }
  footer .footer-top{
  
    background-color: #0303bf;
    color: white;
    margin-top: 23px;
  
  }
  body{
  
  background-color: darkgray;
   
  
  }
  </style>
</head>
<body>

<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="/sliderimg1" alt="Chania" width="460" height="320">
        <div class="carousel-caption">
         
        </div>
      </div>

      <div class="item">
        <img src="sliderimg2" alt="Chania" width="460" height="320">
        <div class="carousel-caption">
         
        </div>
      </div>
    
      <div class="item">
        <img src="sliderimg3" alt="Flower" width="460" height="320">
        <div class="carousel-caption">
          
        </div>
      </div>

      <div class="item">
        <img src="sliderimg4" alt="Flower" width="460" height="320">
        <div class="carousel-caption">
         
        </div>
      </div>
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>

{% endif %}

Cheers 😎

7 comments:

Wordpress customer portal2 July 2019 at 04:27
Hi,

Thanks for the sharing this useful information.
Like your way of presenting the complex data in easy manner.

Thanks Again.
Aishwarya6 August 2019 at 06:14
Great articles, first of all Thanks for writing such lovely Post! Earlier I thought that posts are the only most important thing on any blog.
CRM Software In India
CRM Software In Chennai
CRM Software
CRMJetty6 May 2020 at 02:00
This is one of the nice article i had read it usefull article,thanks for giving such a great article.keep it go.

dynamics 365 customer portal
cooking copy21 May 2020 at 14:57
you won't have to pay top dollar to get the best. For my personal choice.mural wallpaper custom
Ville Rantala2 June 2020 at 02:33
Hi Arpit, nice article, i have a question, we should be able to display data from CRM as Carousel slider or something like that, im having the request to do it with appoinments, display them in the web in a slider... im pretty sure that it is possible, but not sur e if maybe you have a guide about... i think this one is a clue... thanks in advance.
Marilynge27 June 2020 at 06:51
Thanks for a very interesting blog. What else may I get that kind of info written in such a perfect approach? I’ve a undertaking that I am simply now operating on, and I have been at the look out for such info. wallpaper for a wall
Tanika Co Valda14 August 2020 at 05:28
Great Article
Cyber Security Projects

projects for cse

JavaScript Training in Chennai
JavaScript Training in Chennai

Arpit's Dynamics 365 Blog

Monday, 8 January 2018

Customize Home Page in CRM Portal