How to: SharePoint Online Branding & News Center using Visual Studo Part 2 of 4

This is Part two in my How to series. In this part we will create the news page library with all content types that are needed for setting up an SharePoint Online News Center

Part 1: Add a custom master page to enable branding

Part 2: Create the news page library with all content types that are needed.

Part 3: Create a news flow web part to be used in both the Start Page and the Archive.

Part 4. How to deploy and set this up in SP Online.

Before we get started make sure you have read Part 1 about what you need to have and what you should have done before this.

We will do the following:

  • Modify a Page Layout (Remove Byline and add Ingress, remove roll-up image)
  • Add Add a Content Type and a Site Column
  • Make a Custom web part to show the news and to enable branding a bit easier.
  1. Lets start with adding the Page Layout to the project by going to your SharePoint site, Settings -> Site Settings -> Master pages and page layouts and in there download a copy of ArticleLeft.aspx. Rename the file to OnlineNewsArticle.aspx.
  2. Create a new Module under FeatureElements that you call “PageLayouts”. Remove the sample.txt and the OnlineNewsArticle.aspx to the project under PageLayouts. (as we did with the master page.)
  3. Open the Elements.xml and replace the code with this one.
  4. Go to features and Add a new feature that you call “Activate.Online.News”. (Site feature) Open the “Activate.Online.News feature and add PageLayouts, then open Activate Branding feature and remove PageLayouts.
  5. Just to test this you can deploy the project and you should find the OnlineNewsArticle.aspx under Master pages and page layouts.
  6. Under FeatureElements create two folders: ContentTypes and SiteColumns.
  7. Then add a Content type under the ContentTypes that you call “OnlineNews” (right click add new-item -> Content type)
  8. The content type should inherit from Article Page.
  9. Open the content types Elements.xml file and change to the following . Name=”OnlineNews” Group=”Online News” Description=”Content type for Online News”
  10. Right click on the SiteColumns folder and Add New-Item -> Site Column. Call it “Ingress”.
  11. In the columns Elements.xml change the following: Type=”Note” Required=”TRUE” Group=”Online News Site Columns”. Copy the ID string to NotePad.
  12. Open the ContentTypes -> OnlineNews Elements.xml and add the following code in the <FieldRefs>. Replace My ID width Yours. (the id in notepad)
  13. We have done this to connect the Site Column to the Content type…
  14. Go to your Activate.Online.News feature and make sure the Content type and Filed is included. Also make sure there Not in the Activate.Brand feature.
  15. To test this just do a deploy and look in Site Settings -> Site Content Types -> Online News. You should have all Article Fields in it plus Ingress.
  16. Next Up is to Add Ingress and remove Byline and Rollup image from the page template.
  17. Open your OnlineNewsArticle.aspx page, Replace all code with the code under here. I have commented where i have done changes so that you can see.
  18. The result in edit mode will look like this
  19. Screen Shot 2013-11-03 at 21.32.10
  20. And the result in Page view mode will look like this (You will have to add some styling to it so that Ingress come after date etc. Or just make something bigger and better :-))
  21. Screen Shot 2013-11-03 at 21.35.34

In Part 3 we will make the web part that shows the news on the Start Page and in the archive.

Leave a Reply

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