


National Laboratory - SharePoint Online Homepage Development
National Laboratory (LAB) SharePoint Online Homepage
The LAB SharePoint internal homepage was redesigned as part of the LAB project to migrate from an on-premise SharePoint 2010 environment to SharePoint Online. The homepage is a high-profile page at LAB with data displayed from many systems. This homepage opens as the start page in the browser for many of the users, which makes it the most visited internal page at LAB. The LAB Migration Project was led by an LAB Project manager and an ITSD Group Leader. The homepage project was a mini project of the overall migration and was collaboratively managed by Calabrae and ITSD staff. The project was a success in the user community at LAB and was completed on time and budget.
The first part of the project was to come up with a design for the new homepage; the team engaged a graphic designer to create mockups and wireframes. The mockups and wireframes were used in meetings to get to a final design without writing any code. Once the team had a final design, we started breaking down the page and subpages then into tasks and assigning resources to be responsible for that development. Many of the tasks were to create a portion of a page using a SharePoint Client-Side Web Part. The SharePoint Client-Side Web Parts were developed using the SharePoint Framework (SPFx) which is a web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling. The client-side web parts are responsive by nature which help satisfy requirements with the cross-browser and cross-platform. The responsiveness also worked for the initial mobile view of the page.
The homepage uses web parts to display data that is being pushed to SharePoint Online environment from LAB internal data sources. This includes the A-Z index (links to sites and systems), LAB Headlines, LAB Today, and LAB Tech Calendar. All of which are internal systems or data that is not accessible from SharePoint Online due to firewall restrictions. This gave the team an opportunity to set some standards on how data would be connected from LAB On-Premise to SharePoint Online. Calabrae developers, ITSD group leads, ITSD developers, Infrastructure Group, Network Services, and Risk Management met on different occasions to discuss the most secure and reliable way to connect SharePoint Online to LAB internal data. The team also discussed as new technologies come available for use at LAB how we could shift to them with least impact.
SharePoint Online would need to connect and consume data from LAB on-premises data service endpoints for SAP, SQL and OLAP. To make those connections possible, Calabrae developers created Windows Communications Foundation (WCF) .NET web services but the homepage data fell into a category that was basically read-only and only needed to be updated nightly which did not require as complex of a solution. For homepage data, Calabrae developers created a PowerShell script that would push data from LAB internal sources (ColdFusion, flat files, and websites) to SharePoint Online on a schedule. The script authenticates with SharePoint Online using a modern authentication type. It uses client id and client secret to establish an Open Authentication (OAuth) connection with SharePoint Online which meant no UCAMS user was needed and no maintenance with password updates.
With the data layer in place now all the data for the homepage is served directly from a list or file stores in the SharePoint homepage site. There was one more SPFx web part that was redesigned for the home page which was the LAB Slider. This was a SharePoint Solution that was deployed in the on-premise SharePoint 2010 environment. This project was built in Visual Studio and contained compiled coded therefore, it had to be re-written. Calabrae developers using SPFx to rebuild this web part which is basically the popular open-source Nivo Slider with some custom configuration added to extend the Nivo Slider to meet the requirements for LAB. Even though this was developed for the homepage because it is in the LAB app catalog and available to all sites.
SharePoint Framework (SPFx) Client-Side Web Parts made it easy to create a Software Quality Assurance (SQA) plan that incorporated an environment for the developer to work and test, an environment for ITSD staff to push releases for test by the Customer, and an environment for Production use. The SPFx client web parts can be packaged and each package has a version. This allows for a different package and version to be deployed to each environment. Each environment being a SharePoint site. The process flow was for developers to publish a new version into the LAB SharePoint Online App Catalog once it was ready to present to customer for user testing. The app catalog handles the versioning so production continues to run the code it had but QA environment will be upgraded to the new version for testing. Once the code is tested in QA then upgrading Production only takes moving the app version in the SharePoint production site. Since going live after migration, we have made changes and were able to follow the process previously mentioned to make easy to publish and test then be able to quickly update production.
Calabrae developers have supported and helped to maintain the homepage but have worked with other ITSD staff to transition the knowledge of how things are architected and any maintenance that is required. All the code for the SPFx web parts are stored in a GIT repository that the ITSD developers have been able to pull down the code and review / discuss with Calabrae developer and currently Calabrae is working with ITSD staff and a team led by the LAB Laboratory Communications Manager to refactor LAB Today’s web application and administration site from Cold Fusion to SharePoint Online, where the development will involve creating new SPFx web parts. Many of the new SPFx web parts will be presented on the homepage. For this project, ITSD staff will be creating SPFx web parts with assistance from Calabrae developers which is another step in the transition and transfer of knowledge of the homepage. In addition to the new SPFx web parts on the home page, we are testing Site Improve on the homepage for rich analytics on users’ interactions with the page. Also, testing changing the search function on the homepage to use the new LAB Enterprise Search built on BA Insights search.