How to make cool modern SharePoint Intranets Part 4 – Custom components #makespintranetcoolagain

In the series to make Intranet cool again we have looked at the strategy, design and build (OOB) options in the prior blogs here. In this blog we will look at the options to customise the Intranet and best practices for the same.

With every intranet there are cases, we will need to customize the look and feel. We will need custom components to add to the functionality.

Since there are many aspects where we could add customizations to the Intranet, this blog could become very long. So to keep it of optimal length, I am just highlighting the high level scenarios for customisations. For detail information, either look for other blogs on my site, or please leave a note and will blog the details about them.

So here we go..

Webparts

We could create SPFx custom web parts for specific requirements for the business. The web parts could scale whole width of the page or section as per requirement. One of the other greater benefit of SPFx web parts is that they are inherently mobile compatible*. The challenge of SPFx is that the client functions run on the client browser so we will need to be sure to that it is light weight and browser compatible**.

For blogs regarding building webparts with SharePoint Framework, please check here.

* Note: When I say mobile compatibility, it means that the webpart as a whole will be able to scale to mobile layout but doesn’t necessarily mean the controls in the web part will scale to mobile layout. Hence the code to scale the controls needs to be added to the app.

** Note: The browser compatibility becomes a key consideration if the organisation’s browser standards still include older browsers such as IE 11. So check here to consider challenges and tips regarding this.

Full width webparts

Sometimes we are given requirements to have full width webparts on Intranet pages. Currently there is no support for full width web parts in section layouts, hence the best way to approach this is using the CSS extender webpart here.  In the CSS customiser web part we could provide the path to the custom css file (recommended to store in Site assets so all users will have access) and the webpart applies the css to the page. Easy !!

Provisioning and Branding

Provisioning and Branding are important components of Intranet.

Provisioning

Normally it is possible to start with a blank communication site and then customise it as per Intranet requirements but this process doesn’t provide a consistent pipeline for dev, test, to prod releases. Also this doesn’t allow to add/update items seamlessly in case of a change. Having a custom Provisioning process provides a consistent approach to test and implement changes for custom solutions. This is beneficial in many ways such as access isolation and solution validation prior release.

Tips for custom Provisioning process

1. Use Site Scripts for creating the site and implementing assets. For reference about this process, check here.

2. Site designs could be used to prepare the custom elements for the site.

3. Use PnP PowerShell to apply the scripts. For reference check here.

For other options to create sites using a custom provisioning process, click here.

Branding

Branding is another important component for the Intranet. Branding using OOB features is mostly covered in this blog, however sometimes there could be custom requirements for header or footer components. For adding header or footer components, we could use the Application customiser to populate them. Some of the common requirement for a customiser could be banners, company footer sections, contact info etc. For details of using application customiser, check the doc at here.

Note: SharePoint has some default footer components such as Feedback and like sections that’s could overlap with the custom footer sections, so plan for them accordingly.

 

Content Authoring and Site Management

Another most common requirement that we receive with Intranets is content management such as adding and removing the pages and content. Communication sites provide many OOB features to manage content, some of these are listed in this blog. But we have many custom scenarios that might need to be added. Some of the custom ones are listed below:

1. News approval / Content publishing – There is a OOB approach to promote a page to a News. This can be combined with the OOB Request sign off Flow to add approval flows but what about demotion of promoted pages. If that is needed, then check the blog here.

2. Custom metadata management – The default forms of SharePoint don’t support custom rules. There are only limited choices based on data type. With custom forms we could add our own business rules. This could be done through PowerApps or SPFx List customiser. For more information on SPFx customiser check here.

3. Site hierarchy / Content hierarchy – One of the legacy trend that many of the Intranet leads keep hanging on to is hierarchy of content. Tree hierarchy has been how content was organised earlier and provided a feasible approach for some aspects. Teams are still looking for the same functionality. Instead of walking down the Tree hierarchy path, in my opinion, we could use metadata hierarchy (term store) to provide the same approach. Then Highlighted content or custom SPFx web part could be used to find content.

4. Permissions – This is one important component of the Intranet. Managing permissions in scope of Intranet is challenging as everyone needs access to the intranet. This also needs to be updated with the new employee and exit process of the company. Hence it is advisable to use a Active Directory (AD) security group with all the users of the company added to it. New users/ Exiting users could be maintained using this AD group. For content autors and editors, these could be given contribute rights. For Intranet admins, they could be provide with Edit or Design rights depending on the access they need. The Site collection admins should be maintained with the IT support team, so the Intranet and all custom builds could be maintained properly.

Hub

Intranet can also be a Hub for information which allows it to collate information from various locations without replicating all the information in Intranet.  This providesd two main benefits – single source of truth and defined ownership. Most of the Hub components such as News, Search are OOB. Some of the custom requirements might be with automatic assocation of sites to the Hub and audience targeting. For more information on SharePoint hub sites, please check here.

Conclusion

In this blog we looked at some approaches for custom implementations and extending the Intranet using custom components. The custom web parts could be managed using the SPFx bulid and release cycle as mentioned here. The other components could also be managed in a similar fashion as per requirements. Again this blog calls out the high level scenario for custom components. Please let me know if there are any specific scenarios of interest.

Happy Coding !!

How to make cool modern SharePoint Intranets Part 2 – Design #makespintranetcoolagain

In the previous blog here, we looked at how to strategize (Scope and Plan) a Modern SharePoint Intranet Implementation. In this blog, we will look at some of the design principles for the Intranet.

Before we start building the Intranet, we need to have a usable design so that we could plan for a good user experience. User experience, as most UX guys would say, is not only about a beautiful design but also about easy accessibility and simplicity. In other words, it means we need to plan for a good usable intranet instead of only a beautiful looking intranet.

Note : The reason I stress on usable designs is because we spend most time finding workarounds to make SharePoint Intranet aesthetically beautiful. But instead if we understand the constraints at the UI level and focus on how to make it usable, then it works so smooth.

So, let’s look at some of the key highlights and limitations that the SharePoint Modern Sites present to us and how to tackle them to create a good design. We will look at the most important page sections and then the content part where we could do mostly everything.

Top Header Section

The first major limitation that throws most of my customers off is the fixed banner section at the top. Microsoft recommends not to remove this as it gives the quick way to reach your apps, services settings and personal profile. In future, Microsoft might be providing us with Page Designs that will help arrange this section better.

Now to overcome this limitation, there is a way, but not recommended as any changes on Office 365 layout could break it. So if you are tech savvy, dev and know your way around with CSS, then the below process could work for you.

1. Create an App customiser SharePoint extension.

2. Include your CSS to hide the section as per requirement. Note : not all sections are accessible via CSS overrides

3. Deploy it to the Site Collection App catalog of Intranet. For Site Collection App catalog enablement steps, check here.

App-header-footer-visible

Navigation

With the introduction of modern mega menu navigation, it is now possible to set a better content navigation on SharePoint sites. This could be enabled from the SharePoint site from the “Change the look” option in Site settings. An example is shown below.

Ignite2018_MegaMenus

Left Hand Navigation

Modern Team Sites have a left hand navigation that provide quick access to the common locations such as Site OneNote, Conversations, Site Contents.

Note: The left hand navigation becomes the top navigation in Communication sites. Hence updating the left hand navigation updates the top navigation.

Hack tip: Please check this blog if you would like to find a way to set layout types for pages in Modern Sites

 

Footer

SharePoint by default doesn’t provide a footer, so we could freely add footer to the pages. However, there are two floating footer components on the modern page as shown in the screenshot below that might be of interest. The two buttons are for Microsoft Feedback and cannot be adjusted as per custom requirements.

The footer can be customised using an Application customiser as discussed above.

floatingFooter

Content Section

This section of the page is where the content owners have access to change or add information or components. This is where most of the design layouts are possible, so try to plan/design in this area.

For communication sites, we get a full width layout and team sites we get an article page layout.

ModernPageContentSection

For customisation, we have the following options

  1. Add an existing Out of Box web part to the page. Some of the noted web parts for modern sites are below. We will look at more details about the below in the upcoming blog but below are few highlights of Out of box web parts.
    • Hero Web part – This web part displays content in a metro layout with options to change/update
    • Highlighted content web part – This web part is one of the best web parts in SharePoint site. This allows to filter data in the site using various filtering options such as SharePoint search, or SharePoint list columns or content types or file types etc. Hence this web part can be used at multiple pages
    • Text Web Part – Add any text using Rich text control using this web part
    • Quick Links Web Part – This is another helpful webpart that allows to add quick links to pages or web sites.
  2. Add a custom SharePoint Framework web part
    We could add our own custom web parts using SharePoint Framework. SharePoint Framework allows us to create custom component as per our requirement and add it to the SharePoint site. We are going to discuss more about this in the next blog. For more dev information, please check the blogs here.

Conclusion

In this blog, we saw some of the tips for planning a usable design for Modern Intranets. However, this is not the end, there are more steps after the design is ready, reviewed and accepted. In the upcoming blogs, we will look at how to achieve the design using a functional solution.

Great SharePoint Modern updates Feb 2019 #makespintranetcoolagain

During Ignite 2018, Microsoft showcased some great updates that are going to change how we implement SharePoint Intranets. It will scale Modern Communication sites to new heights to become the Next-gen Intranet.

Since Ignite 2018, there have been many steady releases and some great updates on SharePoint Modern communication sites. Here is a quick blog of these updates.

Following this blog, I am planning to start with a detailed blog series about how to build cool Modern Intranets in SharePoint #makespintranetcoolagain

Megamenus

This is the first time in SharePoint history that we have an Out of Box Multi-Navigation menu which goes beyond two level hierarchy. This will allow us to include any level of navigation hierarchy. Here is blog link mentioning this release

https://techcommunity.microsoft.com/t5/Microsoft-SharePoint-Blog/Organize-your-SharePoint-sites-with-megamenu-navigation-and-new/ba-p/328068

MegaMenu

Modern SharePoint Webparts

There are few great additions to the existing list of SharePoint Webparts. The blog talking about these is below. Some of the noted ones are:

1. New Yammer Conversations web part

2. My Recent and My Documents

3. Code Snippet for Devs and Markdown for Authors

https://techcommunity.microsoft.com/t5/Microsoft-SharePoint-Blog/SharePoint-web-part-updates-Yammer-Conversations-My-Documents/ba-p/303719

Updated SharePoint Page editing experience

Now we could style page headers and update backgrounds for sections in SharePoint Pages. It is surely a valuable addition for Designers and Content Authors who are looking for ways to improve the design and content real estate on their sites.

PageHeader_EditingExperience

Column Formatting on the Fly

Now applying column formatting is way simpler than using the Out of Box column JSON formatter. We were always able to do it using JSON but now we could set it using the UI designer directly. Isn’t that fabulostatic !!

https://techcommunity.microsoft.com/t5/Microsoft-SharePoint-Blog/New-no-code-solutions-for-custom-formatting-in-SharePoint/ba-p/302498

Site Settings and Apply Site Design updates

Now we could apply a site design on an existing site from the site menu and see the status of the process. There is more information in the below link.

https://support.office.com/en-us/article/manage-your-sharepoint-site-settings-8376034d-d0c7-446e-9178-6ab51c58df42

Page Designs

This are still in build but when released they will be a great addition to setting up page layouts in Modern environment.

Improved SharePoint Admin Center experience

SharePoint Admins Rejoice!! Now we could set external sharing, change Site admins and filter on site properties for eg. Hub site from the modern Admin Center.

SharePointNewAdminCenter.png

Webpart Connections

This is a great announcement for devs of SPFx Framework. Now we could connect and send information within two connected webparts as mentioned below

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/dynamic-data

Conclusion

Above we saw some of the cool updates released recently for the Modern Experience. In the upcoming blog series – SharePoint Modern Intranet #makespintranetcoolagain, we will be looking at some of them in detail and use them on real use cases.

Deploy and Install SharePoint Apps using SharePoint CSOM and PnP PowerShell

In this blog, we will look at steps to install and deploy SharePoint apps to Modern Sites using SharePoint ALM CSOM and PnP PowerShell. Using the below steps, it is possible to programmatically deploy and install custom SharePoint Framework apps using an Azure Function or a Local PowerShell script.

Installing SharePoint Apps

SharePoint Apps can be deployed on a site using ALM (Application Lifecycle Management) APIs. After the app is installed in the App catalog, we could add it to a SharePoint site.

SharePoint CSOM

The steps are pretty simple. The below snippet has the code for deploying and installing apps.

  1. Get the App Id
  2. Create an App Manager Object
  3. Deploy the App
  4. After deploy the app, install the app.
  5. Use Try – catch to handle if the installation has already done.
using Microsoft.SharePoint.Client;
using OfficeDevPnP.Core.ALM;
using OfficeDevPnP.Core.Pages;
using OfficeDevPnP;
public void DeploySingleApp(Guid appId)
{
using (ClientContext context = new ClientContext(<SiteUrl>))
{
context.Credentials = new SharePointOnlineCredentials(UserName, SecurePass);
AppManager manager = new AppManager(context);
if (manager.Deploy(appId, true))
{
if (manager.GetAvailable(appId) != null)
{
try
{
Task installTask = Task.Run(async () => await manager.InstallAsync(appId));
installTask.Wait();
}
catch (Exception ex)
{
log.Info("Exception Caught – Mostly because the App is already installed. Skipping Install. Message – " + ex.InnerException.Message);
}
}
}
}
}

PnP PowerShell

First, lets’ get a list of apps in the App catalog.

Note: There are two values that is supported by scope paramaters for Apps – Tenant and Site.

Get-PnPApp -Scope Tenant
or 
Get-PnPApp -Scope Site

If the App is not installed, then we will add the app to the App catalog

Add-PnPApp -Path "<.sppkg file location>" -Scope Site

Then, publish the App

Publish-PnPApp -Identity <app id> -Scope Tenant -SkipFeatureDeployment

-SkipFeatureDeployment is helpful to deploy Apps across the SharePoint tenancy if the app is developed for tenant wide deployments

After the above, we will install the App

Install-PnPApp -Identity <app id> -Scope Site

After the app is installed, it is ready to be added or used at the site.

In the upcoming blog, we will see how to add SharePoint Framework extensions and web parts programmatically.

Happy Coding!!

 

Options to connect SharePoint Online to SQL Server On-Premises with BCS/SharePoint Apps using Hybrid Connection and WCF Services

SharePoint Online cannot directly connect to on-premises data sources such as SQL Server. A recommended approach is to use Hybrid with SharePoint 2013/2016 but adds an overhead of infrastructure and maintenance costs. Hence to overcome it, I am going to describe in this blog how to use the Azure PaaS workloads and connect to on-premises data sources using BCS.

Using Azure Hybrid Connection (refer this post) and BCS with Azure Web App hosting WCF endpoint, we can now expose on-premises SQL data to SharePoint Online and Cloud by external content types (ECTs) or SharePoint Hosted Apps.

Below are two approaches by which BCS can connect these data sources to SharePoint

  1. Azure Web App hosting WCF Service and External Lists
  2. Azure Web App hosting WCF Data Service and Hosted Apps

1. Azure Web App hosting WCF Service and External Lists

Approach Overview: In this approach, we would host a Azure Web App hosting WCF Service in Azure which will connect to the SQL Server On prem using Azure Hybrid connection. After having the data exposed via Azure WCF Service, we could use SharePoint BCS Service to create an External Content Type using SharePoint Designer based on a Web Service. For more information to create External Content type using WCF services, please read this article.

SPOAzureBCSHybrid

Pros: The advantage of using this approach is the reusability of External Content Types (ECT). ECTs can be used across multiple lists and sites in the same site collection. ECTs can also be used for complex associations across multiple types of data.

Cons: Some shortcomings of this approach are

  • Dependency on pass through authentication for users and/or implement custom authentication to authenticate with WCF by passing SQL authentication
  • Added development effort because of WCF build and hosting

High-Level Steps:

  1. Create a WCF Solution using Visual Studio
  2. Use ADO.Net and WCF Service calls to fetch data using web methods. Implement at least two web methods – one to return all items and one to return a specific item
  3. Update Web.Config of the WCF service with required configuration for data calls
  4. Create an Azure Web App
  5. Publish the WCF Service to Azure Web App and get the single wsdl signature from the WCF service
  6. Create an External Content Type using SharePoint Designer using the WSDL signature
  7. Add GetItems and GetItem finder to ECT
  8. Create an External List from ECT

2. Azure Web App hosting WCF Data Service and Hosted Apps

Approach Overview: In this approach, we would a host a WCF Data service in Azure Web App and then create a SharePoint hosted app that will consume the fields in the WCF Data service to create a external list. After the external list is created in the SharePoint App, we would use the App Hope page to display the content as needed.

SPOAzureAppsHybrid

Pros: The advantages of using a WCF Data Service is that the OData method maps directly to the schema of the SQL table which makes it easy to build and maintain. Additionally, using SharePoint hosted apps isolates the CRUD operations from the Host Web decreasing the overhead of external content types and external lists.

Cons: The disadvantage of using this approach is that the data is scoped within the app and cannot be exposed to Host Web components making interaction limited to Web App only. There is a customization requirement to expose and operate on this data in the App Web.

High-Level Steps:

  1. Create a WCF service project using Visual Studio
  2. Install the EntityFramework Nuget package
  3. Add a WCF data service file and implement EntityFrameworkDataService instead of DataService.
  4. Override the below method
public static void InitializeService(DataServiceConfiguration config)
{
// TODO: set rules to indicate which entity sets and service operations are visible, updatable, etc.
// Examples:
config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);
// config.SetServiceOperationAccessRule("MyServiceOperation", ServiceOperationRights.All);
config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V3;
config.UseVerboseErrors = true;
}

view raw
Azure WCF Service
hosted with ❤ by GitHub

 

  1. Add an ADO.Net Entity Data Model project and configure it to fetch data from SQL Tables you want
  2. Update Web.config with required configuration for data calls
  3. Create an Azure Web App and enable SSL on it
  4. Publish the WCF Service to Azure Web App
  5. Next create a new SharePoint hosted app solution in Visual Studio.
  6. In the SharePoint hosted app solution, add an External Content type and select the Azure Web Application hosting the WCF data service as source
  7. After the External Content type is created, then create an External List using ECT created above
  8. The external list is now added to the Hosted app which can then be referenced in the app default page and app part.

In this blog, we have seen the two choices to host BCS connectivity services via Azure PaaS workloads, advantages and disadvantages of each and broad level steps to configure them.