Skip to main content

Material UI Tiles Display Template - sharepoint 2013

Search Results Webpart modern Material UI styled Tiles. you can show the sharepoint list to modern Tiles.

 Adding Managed property Mapping

 Add the search columns to managed property.
<mso:ManagedPropertyMapping msdt:dt="string">&quot;quarter&quot;:&quot;RefinableString32&quot;,&quot;Employee Name&quot;:&quot;EmpNameOWSTEXT&quot;,&quot;Service Year&quot;:&quot;ServiceYearsOWSNMBR&quot;,&#39;Picture URL&#39;{Picture URL}:&#39;PublishingImage;PictureURL;PictureThumbnailURL&#39;,&#39;Link URL&#39;{Link URL}:&#39;Path&#39;,&quot;Title&quot;:&quot;Title&quot;,&quot;EventDate&quot;:&quot;EventDateOWSDATE&quot;,&quot;Category&quot;:&quot;CategoryOWSCHCS&quot;,&quot;Path&quot;:&quot;Path&quot;,'PictureHeight':'PictureHeight','PictureWidth':'PictureWidth','ImageDateCreated':'ImageDateCreated','PictureThumbnailURL':'PictureThumbnailURL','PictureURL':'PictureURL','RefinableString31':'RefinableString31'</mso:ManagedPropertyMapping>
Declaring Variables

 var line1 = $getItemValue(ctx, "Line 1");
            var quarter = $getItemValue(ctx, "RefinableString32");
            var linkURL = $getItemValue(ctx, "Link");
var inyear = $getItemValue(ctx, "RefinableString31");
var EmployeeName = $getItemValue(ctx, "EmpNameOWSTEXT");
var pictureUrl = $getItemValue(ctx, "Picture URL");

pictureUrl += "?RenditionID=9";

 Rendering the property values to the display

  <div class="tile-container" style="display: flex;padding-right: 15px;margin-bottom:15px;float:left;">
<div class="single-tile" style="width: 20%; solid  border-radius: 4px;width: 170px;height: 236px;box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);">
    <img style="width: 100%; object-fit: cover;width: 170px;height: 190px;  border-top-left-radius: 2px;    border-top-right-radius: 2px;" src="_#= pictureUrl =#_" />

    <div style="display:flex;height: 45px;margin-top:-3px">
        <div class="emp-name" style="float: left;width: 75%;background:#e9e9e9;padding: 6px; color:#4f4d4d"><span>_#= EmployeeName =#_</span></div>
        <div class="emp-exp" style="float: right;width: 25%;background:#fff;text-align: center;">
<img src="https://mysite/medals/bronze.png" style="width: 36px;object-fit:scale-down;position: absolute;float:  left;margin-left: -20px;  padding: 3px;">
      
</div>
    </div>
</div>
</div>
Item-Template-slide.html

 <html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> 
<head>
<title>Item-Template-slide</title>

 <!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>

 <mso:ManagedPropertyMapping msdt:dt="string">&quot;Employee Name&quot;:&quot;EmpNameOWSTEXT&quot;,&quot;Service Year&quot;:&quot;ServiceYearsOWSNMBR&quot;,&#39;Picture URL&#39;{Picture URL}:&#39;PublishingImage;PictureURL;PictureThumbnailURL&#39;,&#39;Link URL&#39;{Link URL}:&#39;Path&#39;,&quot;Title&quot;:&quot;Title&quot;,&quot;EventDate&quot;:&quot;EventDateOWSDATE&quot;,&quot;Category&quot;:&quot;CategoryOWSCHCS&quot;,&quot;Path&quot;:&quot;Path&quot;,'PictureHeight':'PictureHeight','PictureWidth':'PictureWidth','ImageDateCreated':'ImageDateCreated','PictureThumbnailURL':'PictureThumbnailURL','PictureURL':'PictureURL'</mso:ManagedPropertyMapping>

 <mso:MasterPageDescription msdt:dt="string">Displays a single Best Bet or Promoted result.</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#SearchResults;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">https://mysite.net/_catalogs/masterpage/Display Templates/Search/Item-Template-slide.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:CrawlerXSLFile msdt:dt="string"></mso:CrawlerXSLFile>
<mso:HtmlDesignPreviewUrl msdt:dt="string"></mso:HtmlDesignPreviewUrl>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>

 <body>

     <!--
            Warning: Do not try to add HTML to this section. Only the contents of the first <div>
            inside the <body> tag will be used while executing Display Template code. Any HTML that
            you add to this section will NOT become part of your Display Template.
    -->
    <script>
         
    </script>

     <!--
        Use the div below to author your Display Template. Here are some things to keep in mind:
        * Surround any JavaScript logic as shown below using a "pound underscore" (#_ ... _#) token
        inside a comment.

         * Use the values assigned to your variables using an "underscore pound equals"
        (_#= ... =#_) token.
    -->

<div>

 <!--#_
var pictureUrl = $getItemValue(ctx, "Picture URL");
pictureUrl += "?RenditionID=9";
var EventCategory = $getItemValue(ctx, "Category");
var EmployeeName = $getItemValue(ctx, "EmpNameOWSTEXT");
var Serviceyear = $getItemValue(ctx, "ServiceYearsOWSNMBR");

  _#-->

  <!--#_
 if(!EmployeeName.isEmpty)
{
_#-->
 <div class="tile-container" style="display: flex;padding-right: 15px;margin-bottom:15px;float:left;">
<div class="single-tile" style="width: 20%; solid  border-radius: 4px;width: 170px;height: 236px;box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);">
    <img style="width: 100%; object-fit: cover;width: 170px;height: 190px;  border-top-left-radius: 2px;    border-top-right-radius: 2px;" src="_#= pictureUrl =#_" />

    <div style="display:flex;height: 45px;margin-top:-3px">
        <div class="emp-name" style="float: left;width: 75%;background:#e9e9e9;padding: 6px; color:#4f4d4d"><span>_#= EmployeeName =#_</span></div>
        <div class="emp-exp" style="float: right;width: 25%;background:#fff;text-align: center;">
<!--#_
if(Serviceyear==5)
{
_#-->
<img src="https://mysite.net/medals/bronze.png" style="width: 36px;object-fit:scale-down;position: absolute;float:  left;margin-left: -20px;  padding: 3px;">
<!--#_
}
_#-->
<!--#_
if(Serviceyear==10)
{
_#-->
<img src="https://mysite.net/medals/silver.png" style="width: 36px;object-fit:scale-down;position: absolute;float:  left;margin-left: -20px;  padding: 3px;">
<!--#_
}
_#-->
<!--#_
if(Serviceyear==15)
{
_#-->
<img src="https://mysite.net/medals/gold.png" style="width: 36px;object-fit:scale-down;position: absolute;float:  left;margin-left: -20px;  padding: 3px;">
<!--#_
}
_#-->
<!--#_
if(Serviceyear==20)
{
_#-->
<img src="https://mysite.net/medals/platinum.png" style="width: 36px;object-fit:scale-down;position: absolute;float:  left;margin-left: -20px;  padding: 3px;">
<!--#_
}
_#-->
<!--#_
if(Serviceyear==25)
{
_#-->
<img src="https://mysite.net/medals/diamond.png" style="width: 36px;object-fit:scale-down;position: absolute;float:  left;margin-left: -20px;  padding: 3px;">
<!--#_
}
_#-->
<!--#_
if(Serviceyear==30)
{
_#-->
<img src="https://mysite.net/medals/titanium.png" style="width: 36px;object-fit:scale-down;position: absolute;float:  left;margin-left: -20px;  padding: 3px;">
<!--#_
}
_#-->
<!--#_
if(Serviceyear==35)
{
_#-->
<img src="https://mysite.net/medals/blue.png" style="width: 36px;object-fit:scale-down;position: absolute;float:  left;margin-left: -20px;  padding: 3px;">
<!--#_
}
_#-->

       
</div>
    </div>
</div>
</div>
<!--#_
}
_#-->

 </div>
</body>
</html>


Tiles Will be





Labels:

Comments

Post a Comment

Popular posts from this blog

Sharepoint 2013/2016 Theme Change/ SharePoint Branding

Change the look of your SharePoint site You can easily customize the look of your SharePoint site. If you are using SharePoint 2013/2016 here is the option to brand your site quickly. You can change the color, background, or fonts of your SharePoint site using themes Step1:  C lick  Settings, and click Site Settings Step2:  Under the  Look and Feel  heading, click  Change the look . Step3:   Choose another look from among the choices. Don’t worry if you don’t like the color or the image exactly, you can change that in the next step. Step4: You can change the background image, Colors, Site layout, Fonts in the left Side bar To add or change the background image , click  Change  and upload an image of your own To change the color scheme, click the arrow next to Colors and select another color scheme. To change the layout, click the arrow next to  Site layout  and select another layout, ...
Post a Comment
Read more

Creating Master Page for HTML Websites

In this blog, you will learn how to create master page for Html/Static Sites, We can create master page using PHP. Step1: Change the Name of your file extension. index.html(all files extension)  into index.php Step2: Create header.inc.php and footer.inc.php files. Step3: Add header elements and navigation bar into  header.inc.php and   Add footer files into  footer.inc.php (Whatever you want to show in all pages(masterfile)) Step4: Remove the header and navbar, footer elements inthe index file and put the  <?php include_once 'includes/header.inc.php' ; ? > - header section <?php include_once 'includes/footer.inc.php' ; ? > - footer section Step5: Now you load the index.php file, Finally Website master page created
Post a Comment
Read more