0

I have been assigned by my company to create an intranet using Sharepoint Online (we have plan 2). I was given a design sketch on how it should look:

The main/welcome page: https://imgur.com/a/8s2n8b2

A list of articles published/news archive (or news called in Sharepoint perhaps): https://imgur.com/a/JxY3NNO

The layout for an article(news): https://imgur.com/a/A31uAvE

I am a beginner in Sharepoint and I would like some advice on how to implement things in a correct way. I am having full admin rights and I have the freedom to do almost anything.

So far, I created a communication site where I created a masterpage for having the black toolbar on the top with the required text etc. I also created a page layout for the artice page to have the content aligned on the middle, with an image at the beginning etc (I know HTML/CSS/JS etc). All our articles will have a big image at the beginning.

Now I am very confused on how to proceed with the News Archive page (and also display the latest 3 articles on the main page). What I need to display, as in the design, is the title, the image and the beginning of the article (and also an url to the article on click). So no fancy rolling up images.

Here is what I tried so far:

  1. Add a snippet in the design with a content query, but I only managed to get the articles' titles and url. I was unable to retrieve the images and the beginning of the text (I need to get the images from the article itself, not from the Site Collection Images folder). I need somehow to run a query that retrieves all 4 things.

  2. Use the Corporate News App. But how do I add content to that app from my articles? From what I saw, you manually add some news in the app. When a user clicks on a news part, it has to be redirected to the article page (so it has the same layout). I need an automatic process, once a writer publishes an article, it automatically gets on top of the page.

  3. Create a team subsite in order to have the news functionality. But I wasn't able to bring my custom article design when reading some news.

Which is the correct way of doing it? I want to know in what direction to continue my research/learning. Do I need to install Visual Studio and write some C# code in order to achieve this? Take into account that later on, I will have to add some filtering of the articles (can be seen in the design for the news archive).

Thank you.

1

If you are using SharePoint online, then my suggestion would be to use SharePoint modern design without any customization. SharePoint modern pages have web parts to roll up news articles and you can also use new quick links to achieve the button looks and feel on the home page. By default 'News' webpart provide you a link to 'see all' news articles in your company, which can work as archive. Even the news page is also very cool, you can add images, texts and various other web parts without having to write single line of code.

Please note, master page modification is still possible in SharePoint online, but only with classic pages. Microsoft is moving towards modern design which doesn't support that kind of customization and there is are bunch of new features, like custom page layout, audience targeting in news etc. are in the Microsoft roadmap, which would come out in few months. So, it is possible that you spend time creating a custom feature, which is either already available in SharePoint modern design or is coming in future.

Please check the following screenshots from one of the Microsoft Demos site, which has features similar to your asking without any customization.

enter image description here

enter image description here

enter image description here

  • Thank you for your explanation. However, I still need to know the efort required for reaching the design presented in the question and how to get the data I need. Also, some explanation if C# could help me would be great! Or KQL with content query/ content search etc? Thanks! – actunderdc Jun 15 at 10:54
  • 1
    OK, so you will have to style your master pages according to the requirement using SharePoint Designer. This will be the solution for the home page and article page. For News archive, you can use SharePoint search functionality, in this case, you might want to create additional columns for your site pages (News) and map them to new managed metadata properties for use in search filter and then use Search REST API to display. Probably create a SharePoint hosted add-in with REST API for this item. C# coding is not possible in SharePoint online unless you are creating provider hosted add-ins. – UBK Jun 16 at 12:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.