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\' %}
<h2 class=\"section-landing-sub-heading\">{% editable snippets \'Home/Subtitle\'
default: \'Customer\' %}
{% include \'Search\' %}



<div class=\"layer_down\"> 


<section class=\"page_section section-knowledge\">
<div class=\"layer_up\"> 

<div class=\"container\">
<div class=\"content-home\">
<h2 class=\"blue_border\">{% editable snippets \"Home/MostPopularHeading\"
default: resx[\"Most_Popular\"] %}
{% include \'Knowledge Management - Most Popular Articles\' showdescription: true %}

<div class=\"row sidebar-home no-lr-margins\">
<div class=\"col-md-4\">{% include \'Knowledge Management -
Most Popular Articles\' showdescription: false %}
<div class=\"col-md-4\">{% include \'Knowledge Management -
Most Recent Articles\' %}
<div class=\"col-md-4\">{% include \'Knowledge Management -
Top Rated Articles\' %}



<section class=\"page_section section-sub-landing color-inverse\">
<div class=\"container\">
<div class=\"row\">
<div class=\"col-md-4 text_center-mobile\">

{{ forums_sm.adx_name | escape }}


{% 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 }}



  {% else if %}

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


<html lang=\"en\">

Bootstrap Example
<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\">


.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;


}




<div class=\"container\">


<div id=\"myCarousel\" class=\"carousel slide\" data-ride=\"carousel\">

<ol class=\"carousel-indicators\">
<li data-target=\"#myCarousel\" data-slide-to=\"0\" class=\"active\">
<li data-target=\"#myCarousel\" data-slide-to=\"1\">
<li data-target=\"#myCarousel\" data-slide-to=\"2\">
<li data-target=\"#myCarousel\" data-slide-to=\"3\">



<div class=\"carousel-inner\" role=\"listbox\">

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




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




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




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







<a class=\"left carousel-control\" href=\"#myCarousel\" role=\"button\" data-slide=\"prev\">
<span class=\"glyphicon glyphicon-chevron-left\" aria-hidden=\"true\">
<span class=\"sr-only\">Previous

<a class=\"right carousel-control\" href=\"#myCarousel\" role=\"button\" data-slide=\"next\">
<span class=\"glyphicon glyphicon-chevron-right\" aria-hidden=\"true\">
<span class=\"sr-only\">Next







{% 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\' %}
<h2 class=\"section-landing-sub-heading\">{% editable snippets \'Home/Subtitle\'
default: \'Customer\' %}
{% include \'Search\' %}



<div class=\"layer_down\"> 

<section class=\"page_section section-knowledge\">
<div class=\"layer_up\"> 
<div class=\"container\">
<div class=\"content-home\">
<h2 class=\"blue_border\">{% editable snippets \"Home/MostPopularHeading\"
default: resx[\"Most_Popular\"] %}
{% include \'Knowledge Management - Most Popular Articles\' showdescription: true %}

<div class=\"row sidebar-home no-lr-margins\">
<div class=\"col-md-4\">{% include \'Knowledge Management -
Most Popular Articles\' showdescription: false %}
<div class=\"col-md-4\">{% include \'Knowledge Management -
Most Recent Articles\' %}
<div class=\"col-md-4\">{% include \'Knowledge Management -
Top Rated Articles\' %}



<section class=\"page_section section-sub-landing color-inverse\">
<div class=\"container\">
<div class=\"row\">
<div class=\"col-md-4 text_center-mobile\">

{{ forums_sm.adx_name | escape }}


{% 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 }}





{% else if %}


<html lang=\"en\">

Bootstrap Example
<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\">


.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;


}




<div class=\"container\">


<div id=\"myCarousel\" class=\"carousel slide\" data-ride=\"carousel\">

<ol class=\"carousel-indicators\">
<li data-target=\"#myCarousel\" data-slide-to=\"0\" class=\"active\">
<li data-target=\"#myCarousel\" data-slide-to=\"1\">
<li data-target=\"#myCarousel\" data-slide-to=\"2\">
<li data-target=\"#myCarousel\" data-slide-to=\"3\">



<div class=\"carousel-inner\" role=\"listbox\">

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




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




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




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







<a class=\"left carousel-control\" href=\"#myCarousel\" role=\"button\" data-slide=\"prev\">
<span class=\"glyphicon glyphicon-chevron-left\" aria-hidden=\"true\">

<span class=\"sr-only\">Previous

<a class=\"right carousel-control\" href=\"#myCarousel\" role=\"button\" data-slide=\"next\">
<span class=\"glyphicon glyphicon-chevron-right\" aria-hidden=\"true\">
<span class=\"sr-only\">Next







{% endif %}

Cheers 😎

Share this:

Like this:

Published by arpitpowerguide

My name is Arpit Shrivastava, who is a Microsoft MVP in the Business Applications category. I am a Microsoft Dynamics 365 and Power Platform enthusiast person who is having a passion for researching and learning new things and acquiring immense knowledge. I am providing consistent help, support, and sharing my knowledge through various Social Media Channels along with my Personal Blog, Microsoft Community, conducting online training and attending various 365 Saturday Events worldwide and sharing the best Solutions to the readers helping them achieve their goals and objectives in Customer Relationship Space.

10 thoughts on “Customize Home Page in CRM Portal

  1. 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.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: