designersdairy: SharePoint

Showing posts with label SharePoint. Show all posts

Friday, September 6, 2019

creating a multi item carousel using bootstrap and sharepoint.

Step1:

Welcome to sharepoint discussion forum, so, Today we are going to discuss how to create a multi item carousel in step by step using bootstrap and sharepoint.

Step 2 :

First of all, We need a carousel which runs in the bootstrap framework, instead of using third-party plugins to avoid conflict. Below is the design which we have to implement in sharepoint

Step 3 :

We have to create a separate page to implement this carousel in sharepoint. goto - All Files->_catalogs> masterpage > assets > html > rockstarsforthemonth.html.

Paste the below code with html markup and Sharepoint Rest api call

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Rockstars for the month</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

<style type="text/css">
.MultiCarousel { float: left; overflow: hidden; padding: 0px; width:97.5%; position:relative;
background-color: #ededed;}
.MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; }
.MultiCarousel .MultiCarousel-inner .item { float: left;}
.MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding:30px; margin:6px 5px 5px 6px; background:#ffffff; color:#666;}
.MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); }
.MultiCarousel .leftLst { left:14px; }
.MultiCarousel .rightLst { right:15px; }
.MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#8a8686; border-color: #8a8686 }
.btn-primary {
color: #fff;
background-color: #bd5355;
border-color: #bd5355;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
color: #fff;
background-color: #bd5355;
border-color: #bd5355;
}
.MultiCarousel h4
{
margin-top: 17px;
color:#aa2225 !important;
font-size: 24px;
margin-top: 30px;
margin-bottom: 0px;
}
.MultiCarousel p
{
color:#2e2929;
font-weight: bold;
font-size:17px;
}

.MultiCarousel .btn:focus, .MultiCarousel .btn:active:focus, .MultiCarousel .btn.active:focus, .MultiCarousel .btn.focus, .MultiCarousel .btn:active.focus, .MultiCarousel .btn.active.focus {
outline: none;
}
.MultiCarousel .img-circle
{
width:150px;
height: 150px;
}
.MultiCarousel .btn {
padding: 10px 12px 0px 10px;
}
.MultiCarousel .fa-chevron-right
{
padding-left:2px;

}
</style>

</head>
<body>
<div class="container" style="margin-top:50px;">
<div class="row">
<div class="MultiCarousel" data-items="1,3,5,6" data-slide="1" id="MultiCarousel" data-interval="1000">
<div class="MultiCarousel-inner">

</div>
<div class="btn btn-primary leftLst"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
<div class="btn btn-primary rightLst"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
</div>
</div>

</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>

<script type="text/javascript">

$(document).ready(function () {

function retriveListItem()
{

$.ajax
({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Rockstars')/items?$select=FileRef/FileRef,EmployeeName,EmployeeDepartment,IsActive&$filter=IsActive eq 1",
type: "GET",
headers:
{
"Accept": "application/json;odata=verbose",

},

success: function(data)
{

$(".MultiCarousel-inner").empty();
for (var i = 0; i < data.d.results.length; i++)
{
var item = data.d.results[i];
if(item.EmployeeName !=null && item.EmployeeDepartment !=null)
{
var rockhtml ='<div class="item"><div class="image-flip" ontouchstart="this.classList.toggle("hover");">' +
'<div class="mainflip"> <div class="frontside"><div class="card"><div class="card-body text-center">' +
'<img class="img-circle" src="' + _spPageContextInfo.webAbsoluteUrl + item.FileRef + '">' +
'<h4 class="card-title">' + item.EmployeeName + '</h4> <p class="card-text">' + item.EmployeeDepartment + '</p></div></div></div></div></div></div>'

$(".MultiCarousel-inner").append(rockhtml);

}
ResCarouselSize();
}
},
error: function(data)
{

$(".MultiCarousel-inner").empty().text(data.responseJSON.error);
}
});
}

var itemsMainDiv = ('.MultiCarousel');
var itemsDiv = ('.MultiCarousel-inner');
var itemWidth = "";

$('.leftLst, .rightLst').click(function () {
var condition = $(this).hasClass("leftLst");
if (condition)
click(0, this);
else
click(1, this)
});

ResCarouselSize();
retriveListItem()

$(window).resize(function () {

ResCarouselSize();
});

//this function define the size of the items
function ResCarouselSize() {
var incno = 0;
var dataItems = ("data-items");
var itemClass = ('.item');
var id = 0;
var btnParentSb = '';
var itemsSplit = '';
var sampwidth = $(itemsMainDiv).width();
var bodyWidth = $('body').width();
$(itemsDiv).each(function () {
id = id + 1;
var itemNumbers = $(this).find(itemClass).length;
btnParentSb = $(this).parent().attr(dataItems);
itemsSplit = btnParentSb.split(',');
$(this).parent().attr("id", "MultiCarousel" + id);

if (bodyWidth >= 1200) {
incno = itemsSplit[3];
itemWidth = 284.9;
}
else if (bodyWidth >= 992) {
incno = itemsSplit[2];
itemWidth = 300;
}
else if (bodyWidth >= 768) {
incno = itemsSplit[1];
itemWidth = sampwidth / incno;
}
else {
incno = itemsSplit[0];
itemWidth = sampwidth / incno;
}
$(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
$(this).find(itemClass).each(function () {
$(this).outerWidth(itemWidth);
});

$(".leftLst").addClass("over");
$(".rightLst").removeClass("over");

});

}

//this function used to move the items
function ResCarousel(e, el, s) {
var leftBtn = ('.leftLst');
var rightBtn = ('.rightLst');
var translateXval = '';
var divStyle = $(el + ' ' + itemsDiv).css('transform');
var values = divStyle.match(/-?[\d\.]+/g);
var xds = Math.abs(values[4]);
if (e == 0) {
translateXval = parseInt(xds) - parseInt(itemWidth * s);
$(el + ' ' + rightBtn).removeClass("over");

if (translateXval <= itemWidth / 2) {
translateXval = 0;
$(el + ' ' + leftBtn).addClass("over");
}
}
else if (e == 1) {
var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
translateXval = parseInt(xds) + parseInt(itemWidth * s);
$(el + ' ' + leftBtn).removeClass("over");

if (translateXval >= itemsCondition - itemWidth / 2) {
translateXval = itemsCondition;
$(el + ' ' + rightBtn).addClass("over");
}
}
$(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
}

//It is used to get some elements from btn
function click(ell, ee) {
var Parent = "#" + $(ee).parent().attr("id");
var slide = $(Parent).attr("data-slide");
ResCarousel(ell, Parent, slide);
}

});
</script>

Step 5 :

Enjoy Folks

Wednesday, June 19, 2019

How to remove special characters and codes (using jQuery) from SharePoint rendered html?

Welcome to designers dairy, Here we are going to discuss,How to remove special characters and codes (using jQuery) from SharePoint rendered html

Step1:

It is a big headache, when you render the html in share-point, There are lot of special characters especially char code "#8203".

Step2:

To remove this special code include in html while rendering the page, we have to write a jquery script

Script:

$(document).ready(function()

{

jQuery('.OnboardingOnlinePortal-wrapper').each(function(index,element) {

var exp = new RegExp(String.fromCharCode(8203),"g");

var editor= jQuery(element);

var txt = editor.html()

txt = txt.replace(exp,'');

txt = txt.replace(/ /g,' ')

txt = txt.replace(/ {2,}/g,' ');

editor.html(txt);

});

return true;

});

Step3:

In my scenario, I have included this script in the Page layout, based on your requirements, you can add in Pages or master pages.

To add the script in Page layout below is the placeholder

<script>//<![CDATA[

$(document).ready(function()

{

jQuery('.OnboardingOnlinePortal-wrapper').each(function(index,element) {

var exp = new RegExp(String.fromCharCode(8203),"g");

var editor= jQuery(element);

var txt = editor.html()

txt = txt.replace(exp,'');

txt = txt.replace(/ /g,' ')

txt = txt.replace(/ {2,}/g,' ');

editor.html(txt);

});

return true;

});

//]]>

</script>

Step3:

Thanks for reading the article.Stay Tuned on www.webdesignersdairy.com for more updates on SharePoint.

Thursday, May 30, 2019

How to apply Custom Styles to Page Layouts in SharePoint

Welcome to designer dairy blog, here we are going to discuss How to apply Custom Styles to Page Layouts in

SharePoint

Step1:

We refer the css styles in the masterpage, so that style applicable in all the pages. There may be situation comes , we want to override the css file in the pages, which comes from masterpage.

Step2:

To override the styling in the particular page, best way to edit the page-layout of the particular page.

If you go "_Catlog/masterpage" You can find the pagelayouts in both .html and .aspx.

For example:

I have page called about.aspx, i want to change the style of the page. So i have to go pagelayouts and edit the aboutpagelayout.html file.

In your custom Page Layout, search for id=”PlaceHolderAdditionalPageHead“. You’ll find it in an opening tag that looks like this:

<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
     <!--MS:<style type="text/css">--> 
          #wr_leftNav { display: none !important; } 
     <!--ME: </style>-->

So i have added the Inline-style above the contentplaceHolder, Based on your needs

You can also add the Css reference link as below

<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
 <link href="indigo_layout.css" rel="stylesheet" type="text/css" ms-design-css-conversion="no" />

Step3:

Step3:

Thanks for reading the article.Stay Tuned on www.webdesignersdairy.com for more updates on Sharepoint.

Friday, May 25, 2018

How to Turn SharePoint Summary Web part link as an accordion menu

Welcome to Designers dairy blog,Here we are going to discuss about,

How to Turn SharePoint Summary Web part link as an accordion Menu

Step1:

Add the summary link webpart in Sharepoint ribbon

Webpart - > Content Rollup - > Summary Links

The Summary Link Web Part has a toolbar along the top, with these four options:

New Link: Click this button to link to a new item in the Web Part. You can link to a page, item, or person. You can also link to content outside SharePoint.
New Group: Create a new group that you can use to group the links you add to the Web Part.
Configure Styles and Layout: Select the default style that’s applied to new links or change the style on all links you already entered into the Web Part.
Reorder: Move the items in the Web Part up or down to change the order.

As shown in below images

Step2:

Let us see, how to customize and add the new group header style in configure styles and layout.

Now, we are going to add the custom group header style called CustomAccordionGroups as shown in below image

Step3:

To add the custom style CustomAccordionGroups . You have to add in Header.xsl file.

which is located in the below path :

Style Library/XSL Style Sheets/Header.xsl

Open the Header.xsl file and add the below XML template code with the class
name CustomAccordionGroups

<xsl:template name="CustomAccordionGroups" match="*[@GroupStyle='CustomAccordionGroup']" mode="header">
<div class="groupheader item accordionCustomHeaderItem">
<xsl:call-template name="OuterTemplate.GetGroupName">
<xsl:with-param name="GroupName" select="@*[name()=$Group]"/>
<xsl:with-param name="GroupType" select="$GroupType"/>
</xsl:call-template>
</div>
</xsl:template>

Once you added, you will find the custom style CustomAccordionGroups in the drop down list

Step4:

Once you applied the CustomAccordiongroup to the Headers

Now I am going to making this web part into a fully functional accordion for this I added a

CustomAccordiongroup.

Simple Jquery script the performs hide all hyperlinks in this groups and when a user clicks a group header, hide all sections that is not the current header and expand current selected link selection.

So, adding the jquery library Reference

Script:

$(document).ready(function(){

$('.accordionCustomHeaderItem').click(function(){
if( $(this).hasClass('active') ){
$(this).removeClass('active');
$(this).next().removeClass('show');
}else{
$('.accordionCustomHeaderItem').removeClass('active');
$('.accordionCustomHeaderItem + ul.dfwp-list').removeClass('show');

$(this).addClass('active');
$(this).next().addClass('show');
}

})

});

CSS:

.accordionCustomHeaderItem + ul.dfwp-list
{
display:none;

}
.groupheader {
background-color: #921c1c;
color: white;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 140%;
padding: 0.5em;
padding-left: 15px;
margin-right: 0.5em;
margin-bottom: 1px;
}

.accordionCustomHeaderItem:before {

font-family: 'FontAwesome';
content: "\f054";
font-size: 13px;
padding-right:12px;
padding-top: 6px;
float: left;

}

.accordionCustomHeaderItem.active:before {
content: "\f078";
font-size: 13px;
padding-top: 6px;
float: left;
}

.groupheader-arrowdown {

color: white;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 140%;
padding: 0.5em;
padding-left: 35px;
margin-right: 0.5em;
margin-bottom: 1px;

}

.groupmarker:hover .groupheader{
cursor: pointer;
background-color: #e03628;
}

.dfwp-list {

margin-bottom: 0.5em;
margin-right: 0.75em;
}
.dfwp-list .item:hover {

text-decoration:underline;

}
.dfwp-list .link-item a {
margin-left: 2em;
color: black;
}
.show {

display:block !important;
}

Step5:

So Finally, Now you can able to see your web part work as an Accordion menu as shown below

Thanks for reading my article.Stay Tune on www.webdesignersdairy.com for more updates on SharePoint.

Wednesday, May 9, 2018

How to make SharePoint Top navigation menu responsive in 2013 & 2016

Step1 :

Welcome to Designer dairy, Here we are going to discuss how to make SharePoint
Top navigation menu as responsive in 2013 & 2016 without installing

"SharePoint Responsive UI Package"

Step 2:

There are some existing projects built in SharePoint 2013. where the client wish to make it portal responsive.As of now, Here we are not going to discuss about entire portal responsiveness only top navigation menu.

Step 3:

Search for “DeltaTopNavigation” in settle.master and select whole tag > Copy the code and place in between bootstrap navigation tags like below

Step 2-

Place these css in you css file-

/*************************************************************************/

.static,.dynamic {

padding-left: 10px;

padding-right: 10px;

}

.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item

{ margin-right:0px!important;

}

ul.dynamic li:hover {

background-color: red;

}

.static.menu-item.ms-core-listMenu-item.ms-displayInline.ms-navedit-linkNode:hover {

background-color: red;

}

.ms-core-listMenu-horizontalBox li.static > a{

display: none !important;

}

.ms-core-listMenu-horizontalBox li.static > ul a{

display: block !important;

}

@media screen and (max-width:767px) {

.ms-core-listMenu-horizontalBox ul, .ms-core-listMenu-horizontalBox li, .ms-core-listMenu-horizontalBox .ms-core-listMenu-item, .ms-core-listMenu-horizontalBox > ul > li > table

{

display:block;

}

.hideonsmall

{

display:none;

}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {

background-color: transparent!important;

}

.navbar-inverse .navbar-toggle {

border-color: transparent!important;

}

.navbar-nav {

margin: 7.5px -15px;

padding-left: 15px!important;

line-height: 25px!important;

}

.ms-core-listMenu-horizontalBox {

color: #666666;

display: inline-block;

vertical-align: middle;

line-height: 30px;

height: auto;

}.ms-core-listMenu-horizontalBox {

width:100%;

}.static, .dynamic {

padding-left: 0px!important;

padding-right: 0px!important;

}.menu-item-text {

padding-left: 10px;

}

.navbar-collapse {

padding-left: 0px!important;

}

ul.dynamic

{

left:25%!important;

}

Step4:

The final output of the screen will be like below screen.

Thanks for reading my article.Stay Tune on www.webdesignersdairy.com for more updates on SharePoint.

Thursday, May 3, 2018

Creating News Ticker in SharePoint list item Using JSOM

Step1:

Welcome to the designers dairy blog, Here we are going to discuss, how to Create SharePoint 2013 & 2016 list items into News Ticker using JSOM.

Step2:

Create a list name called Announcement as shown in below image

Step3:

The news lists have two feeds.

Step4:

Below are the code written in javascript function  Tickernews() to retrieve data from the list items using CAML Query. And Appending in the page where u needed.

$(function () {

ExecuteOrDelayUntilScriptLoaded(Tickernews, "sp.js");

});


function Tickernews() {

var clientContext = new SP.ClientContext();

var oList = clientContext.get_web().get_lists().getByTitle('Annoucement');

var camlQuery = new SP.CamlQuery();

//camlQuery.set_viewXml("<View><RowLimit>1</RowLimit></View>");

//camlQuery.set_viewXml("<View><Query><Where><BeginsWith><FieldRef Name='FirstName'/><Value Type='Text'>Raja</Value></BeginsWith>"

// + "<Gt><FieldRef Name='ID' /><Value Type='Counter'>2</Value></Gt></Where></Query></View>");

/*camlQuery.set_viewXml("<View>"

+"<Query>"
+"<Where>"
+" <Or>"
+ " <Eq>"
+" <FieldRef Name='FirstName' />"
+" <Value Type='Text'>Raja</Value>"
+" </Eq>"
+" <Gt>"
+" <FieldRef Name='ID' />"
+" <Value Type='Counter'>3</Value>"
+" </Gt>"
+"</Or>"
+"</Where>"
+"</Query>"

+"</View>"); */

camlQuery.set_viewXml("<View><RowLimit>1</RowLimit></View>");

this.collListItem = oList.getItems(camlQuery);

clientContext.load(collListItem);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onTickerSucceeded), Function.createDelegate(this, this.onTickerQueryFailed));

}

function onTickerSucceeded(sender, args) {

var listItemInfo = '';

var listItemEnumerator = collListItem.getEnumerator();

console.log(listItemEnumerator);

while (listItemEnumerator.moveNext()) {

var oListItem = listItemEnumerator.get_current();


listItemInfo += '<div style="float:left; width:25%;"><strong>'+ oListItem.get_item("Title") + '</strong> </div> ' + '<div style="float:left; width:75%;"><marquee>' + oListItem.get_item("ShortDescription") + '</marquee>'

'<br />';

}
console.log(listItemInfo);

$("#divListItems").html(listItemInfo);

console.log($(".o365cs-nav-centerAlign"));

}

function onTickerQueryFailed(sender, args) {

alert('Request failed. ' + args.get_message() +

'\n' + args.get_stackTrace());

}

Step5:

By Using console log window, we can check the list items are retrieving or not.

var listItemEnumerator = collListItem.getEnumerator();

If you give the Stored variable listItemEnumerator in console window.

You fill find

1.Sp.ArrayList Enumerator and click - >SpClientObjectData - > Sharepoint list items will be display as shown in below screenshot

Title : "Vote Now"

Short_xo220_Description : "Vote for favourite Year"

Note : due to space in list item column xo220 is added

Step6:

Output

Thanks for reading my article.Stay Tune on www.webdesignersdairy.com for more updates on SharePoint.

designersdairy

Search This Blog

Friday, September 6, 2019

creating a multi item carousel using bootstrap and sharepoint.

Wednesday, June 19, 2019

How to remove special characters and codes (using jQuery) from SharePoint rendered html?

Thursday, May 30, 2019

How to apply Custom Styles to Page Layouts in SharePoint

SharePoint

Friday, May 25, 2018

How to Turn SharePoint Summary Web part link as an accordion menu

How to Turn SharePoint Summary Web part link as an accordion Menu

Wednesday, May 9, 2018

How to make SharePoint Top navigation menu responsive in 2013 & 2016

Step 2-

Thursday, May 3, 2018

Creating News Ticker in SharePoint list item Using JSOM

Validating to select in sequencial order using angular