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"> </div> </section> <section class="page_section section-knowledge"> <div class="layer_up"> </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"> </div>
</section>
<section class="page_section section-knowledge">
<div class="layer_up"> </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 %}
