Dynamics CRM, Microsoft Portals

Adding a Carousel Banner to Microsoft Portals

In my previous article I provided the steps to change the out of the box Portal Banner. But, what if you want to take this a step further and add a carousel banner to the Portal ? In this article I am going show you how to get this done in a few steps.

What is a Carousel Banner ? You can read about it in this URL 🙂

Pre-Requisites

  1. Images required for the Carousel banner (In this example I am using 3 images)
  2. User Account to the Portal with a user that has the portal “Administrator” role

Step 1: Login to the Portal with a user that has the portal “Administrator” role

Step 2: Upload the desired image files by seleing “Child File” menu option. In this example I am using 3 image files .

Step 3: Provide details for the image file . Make a note of the “Name” you provide for each image file . This is important as you will need  this name to update the Script.

Step 4: Copy the below script to a Notepad and update the  image source tag img src=”/la.jpg” and the alternate text for the image alt=”Los Angeles” as per the images and the files names you have chosen.

 "<div class="container">
  <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>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="/la.jpg" alt="Los Angeles" style="width:100%;">
      </div>

      <div class="item">
        <img src="/chi.jpg" alt="Chicago" style="width:100%;">
      </div>

      <div class="item">
        <img src="/ny.jpg" alt="New york" style="width:100%;">
      </div>
    </div>

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

Step 5: Navigate back to the Portal and click edit on the portal component where you want to place the banner. In this example I am placing the banner on the “Home/Subtitle” component.

Step 6:  Click on the “Source” button on the Edit Page

Step 7: Copy and Paste the updated code and click Ok on the Source page and the Edit page  to save changes.

Step 8: Navigate back the Portal and Refresh the page to view the changes .

Note: All the uploaded images can be found in the “Web Files” Menu as an attachment. If you require to change the images you can simply replace the attachment file

Tagged

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.