sharepoint

Nitesh Patare

Configure properties of content search webpart

We will be following the export method for configuring properties of content search webpart.

Open the website in a browser, edit the page which contains webpart zones, next click on add a webpart.

Add content search webpart via webpart, edit the web part select the correct options, select display template -> control and set the correct option then inspect the select box and check the value of selected option, it will be a url, copy that url.step1-export

 

Repeat same process for display template attribute “Item”. Add content search webpart via webpart, edit the web part select the correct options, select display template -> item and set the correct option then inspect the select box and check the value of selected option, it will be a url, copy that url.step2-export

 

Next apply that webpart edit option and then export that webpart.

step2-1-export

Open that webpart and search for that url in xml code you will find like this below:

step3-export

Now you found the attribute name of attributes of Display Templates control and item which are “RenderTemplateId” and “ItemTemplateId”.

Next you can go to Sharepoint Designer create a new page layout, add webpart zones and inside webpart zones zone template add Content Search Webpart and add the following values to the code. You can see the image below for the code.

E.g.
RenderTemplateId=”~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/Control_ListWithPaging.js”
ItemTemplateId=”~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/Item_TwoLines.js”

  1. To add vlaue for Control- Go to the page layout and add the url as attribute value of the attribute “RenderTemplateId”step4-exportstep4-1-export
  2. To add value for Item – Go to the page layout and add the url as attribute value of the attribute “ItemTemplateId”
    ItemTemplateId=”~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/Item_TwoLines.js”step5-exportstep5-1-export

Save the page layout. Next when you create a page in browser and apple the newly created page layout you will get the already pre-configured Content Search Webpart.

Advertisements
Nitesh Patare

Creating master pages and page layouts with design manager in sharepoint 2013/Office365

The following blog post follows steps to be followed to get started with Creating master pages and page layouts with design manager in sharepoint 2013/Office365.

I have created master pages and page layouts in Office365 using design manager. It follows a step by step details and by the end of the blog you will have your own demo blog site template ready which uses master page and page layout.

I have replicate the Bootstrap blog template that is available over here.

  • activate features to enable design manager
    Site collection administration-> Site collection features->sharepoint server publishing infrastructureSharePoint Server Publishing Infrastructure (under Site collection features)
    img 1.1Site action-> Manage site features->sharepoint server publishing.SharePoint Server Publishing (under Manage Site Feature)img 1.2
  • Under look and feel you will find design manager.img 2.1
  • Click on edit master pagesimg 3.1
  • Insert the site collection url address. Eg:- https://example.sharepoint.com/sites/dev.
    1. Login with credentials.
    2. Open the site collection and upload the masterpage html document.
    3. Also upload the files under style library folder, check out, check in and publish them as a major version.
    4. Open sharepoint designer upload our html file under _catalogs/master pages. You will find it under All Files->_catalogs->masterpages.
    5. Create required folder structure and upload the remaining files. Follow the same checkout, check-in and publish process for rest of the files. Usually the resources go under Style Library but in this demo we create it under Masterpage library itself.
  • Go to design manager, click on convert file to master page. Browse and select our html document.img 5.1 img 5.2Select blog.html. After that click on insert.
  • It will automatically create another file with same name and extension as .master. The changes made in html file are synced to the master page automatically. You can now go to SP Designer refresh the site and see the changes.img 6.1
  • Open the master page in SP designer, edit it and make the necessary changes.
    Remove the markup of page layout from html page with a div attribute data-name=ContentPlaceHolderMain. You will see code something like below that is selected by user. Place this code inside container div.img 7.1Save it checkout, check-in and publish as a major version.
  • Next step to create a page layout. Select edit page layout option in left nav then the create a page layout.img 8.1Select the master page and default content type.img 8.2Click on the layout name and open the preview.img 8.3
  • Open layout in sharepoint designer. You will see two pages with same page layout name. Edit the html page.
  • Inside the tags of ContentPlaceHolderID with ID as PlaceHolderMain you will find html markup with some sharepoint code.
    <!–MS:<asp:ContentPlaceHolder ID=”PlaceHolderMain” runat=”server”>–><!–ME:</asp:ContentPlaceHolder>–>

    img 10.1These are preadded webparts by default in the page layout, we will delete them and add our own html markup for our page layout.

  • Take out the not required text and snippets and keep only the structure we want to keep for our page layout in which we will copy paste the web part zone.img 11.1
  • Visit our Design manager under page layout section click on the page layout that we created.img 12.1
  • On the top right we will see snippets option link. Next open the snippets link which opens a new page, there we will get the web part zones that we will copy to insert in our page layout later.img 13.1img 13.2
  • Copy paste the web part zones from the below copy to clipboard button. Rename the ids after pasting it in the html markup. Web Partzones must have unique id.img 14.1Changing the html markup of the page layout keep sync with the page layout “.aspx” page. Check out, check in the page and publish it as a major version.
  • Next up create a new page. You can hover on site settings menu, click on add page, it adds below the pages path. You can also select the page layout at this page.img 15.1 img 15.2Orimg 15.3
  • Click on created page and then edit that page. Select page tab and next page layout to select that page layout. Check in the page.img 16.1
  • Visit site settings and click on master pageimg 17.1Select the master page and click saveimg 17.2
  • Edit the page it will take the applied master page and page layout.img 18.1
  • You can now add webparts. Go ahead, add few content editors and text inside it.img 19.1
  • Add some text in it, save it.img 20.1
  • This is how it looks finallyimg 21.1
Note: In case you encounter any errors or issues check if both the publishing features are active or disable and reactivate it.
Nitesh Patare

Displaying text/banners (page specific)

We often come up with a requirement that the specific page require banner images,  for example the default landing home pages. The most common requirement is that of carousel on the home page.

The general approach is to create page layouts for different design patterns. Below I am mentioning another approach to implement it.

  • Add an empty contentplaceholder in the master page.

In master page we set an ID in the contentplaceholder tag. This ID will be mentioned in the page layout where we insert content tag. This will insert an empty div into the html page that will be generated.

If you wish to add banner images or carousel we will add the following code in page layout, eliminating the need for another page layout specifically only for banner images or carousel images.

  • Add content tag in the page layout with the html markup.

Next when we visit the page with above mentioned code present in master pages and page layout respectively. The page will display “Sample text”.

Nitesh Patare

Assign master page via page layout to only a single specific page

In a publishing site we have a master page that all the pages inherit. We can edit a page and assign page layouts through the page layouts options on top ribbon. It lists out all the page layouts are available. For a page layout to be available it should be checked in and published.

In current case where we want a single page layout to inherit a different master page other than the custom masterpage that is currently set. Usually setting a master page for a page is done as listed below.

But this alone is not enough, if also need few more things to set in the page layout.

  • Add a page and assign the page layout. Open the site in sharepoint designer, visit pages section where the page is saved and deattach the page layout from the page.
  • Next edit the page and remove the references of custom master page (custom.master) from the page.
  • Set our intended master page

  • MasterPageFile=”/_catalogs/masterpage/Different.master”

  • Remove the publishing feature registry at the top of the page

    Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing

  • Replace it with webpart pages registry reference

    Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint

  • Save the page and publish it. Remember to keep the page layout detached, do not reattach it again.
  • Below is an example of the page after all the changes have been done.
Nitesh Patare

Setting default landing page through code in sharepoint

Usually when i want to set the page as home page i visit the page URL and open the top navigation bar by clicking the Page option and select the option Make Homepage.
There is also another way to set set the page as home page visit the Site Settings, Site Welcome Page, browse to the destined location select the page and click ok to set it as defalt welcome page or landing page of your site collection in sharepoint.
I wanted to set is through code, via the visual solution, publish the solution activate the feature and you are good to go. In your Visual Studio Solution you will find PropertyBags something like this.

Property bags
Property bags

Open the Elements.xml and add the following code and specify the landing page. Home.aspx in the below example.

Nitesh Patare

Getting started with Sharepoint projects in Visual Studio

I had just installed a fresh copy of Visual Studio 2012 and i also installed the latest Update 4. I tried to open my Visual Studio solution in it. I gave me a message project type not supported message.

Project not supported

It tried creating a new sharepoint project but it was missing, which must usually visible like in the below image

Sharepoint project
Sharepoint project

What i found out is that we need to install Microsoft Office Developer Tools for Visual Studio. It is an add-in for Visual Studio that enables developers to create, build, debug, run and publish apps and solutions for Office and Sharepoint. The Web Platform Installer usually installs it for you.

You can download it from here or here is the direct link.

Once you are done downloading, double click to install the app and you will find the options to create sharepoint apps.