SharePoint Online, Viva , Teams, Power Platform, Azure, Identity

Publish Duplicate Client Side Page Changes To Original Page Within Same SPO Site Pages Library

Problem Statement

This article is a continuation of my previous article, Duplicate the Client Side Pages into same Modern SharePoint Online Library Folder where I explained how to duplicate the client side page with all existing controls.

In this article, I would like to explain this: If the user makes any changes to duplicate page, how to publish the duplicate client side pages to the original page into same site pages library within the same site collection.

As a developer, we have a couple of options to duplicate the page into another modern site collection library or different folder structure, but there is no way to copy the pages within the same modern site collection sites library within the same folder structure.

Prerequisite Steps

Let's create a page and add existing below control, or user can add any other available controls. This is just for demo purposes.

SharePoint Online PnP PowerShell Overview here
Browse the existing pages

Home Page looks like this,

Duplicate Page looks like this with changes,

Add new control
Modify the pages control layout

Approach Overview

Key steps to publish duplicate client side page with changes to original Modern Site Collection Site Pages into Same Library Folder.

Use PnP Online to connect to SharePoint Online Modern Site
Export PnP Client Side Pages Command export pages with PnP Provisioning Template
Store it locally.
Apply PnP Provisioning Template store it with different name.

try
   {

         $srcUrl = "https://mittal1201.sharepoint.com/sites/commsitehub"
         Connect-PnPOnline -Url $srcUrl

         $SourcePageName = "home_duplicate"
         $TargetPageName = "home"

         $tempFile = 'C:\CsharpCorner\'+ $SourcePageName +'.xml'
         Export-PnPClientSidePage -Force -Identity $SourcePageName -Out $tempFile

         $con = Get-Content $tempFile
         $sourcepage=$SourcePageName +".aspx"
         $targetpage=$TargetPageName +".aspx"

         $con | % { $_.Replace($sourcepage,$targetpage) } | Set-Content $tempFile
         Apply-PnPProvisioningTemplate -Path  $tempFile
         write-host -ForegroundColor Magenta "Page reverted with name of  " $targetpage


}
catch {
    Write-Host - ForegroundColor Red 'Error ', ':'
    $Error[0].ToString();

}

Save and run this script.

OutPut Steps

Applying template to client side pages

Export-PnPClientSidePage Cmdlets applying the PnP Provisioning template and export ".xml" file into shared locaiton. Cmdlets referece can be find here

Creation of client side pages

Apply-PnPProvisioningTemplate cmdlets will create a new page within the same library from download or exported ".xml" file with provided name i.e. pagename _ duplicate

Cmdlets referece can be find here

Final Duplicate Page Outcome

Browse the url; i.e., original page. New Client Side Page will be available with all configuration and controls.

I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.

Duplicate Client Side Pages Into Same Modern SharePoint Online SitePages Lib

Problem Statement

In this article, I would like to explain how to duplicate client side pages which have OOTB webparts and custom SPFx webparts into the same site pages library within the same site collection.

Prerequisites Steps

Let's create a page and add the exisitng below controls, or the user can add any other available controls. This is just for demo purposes.

SharePoint Online PnP PowerShell Overview here
Add and Configure Custom SPFx Control
Add and Configure Image Control
Add and Configure News Control

Approach Overview

We need to follow the below key steps to perform duplication of Modern Site Collection Site Pages into the Same Library Folder.

Use PnP Online to connect to SharePoint Online Modern Site
Export PnP Client Side Pages Command export pages with PnP Provisioning Template
Store it locally.
Apply PnP Provisioning Template store it with different name.

SharePoint Online PnP PowerShell Script

try
   {

        $srcUrl = "https://mittal1201.sharepoint.com/sites/commsitehub"
        Connect-PnPOnline -Url $srcUrl
        $pageName  = [System.Web.HttpUtility]::UrlDecode("Home")
        write-host $pageName
        $tempFile = 'C:\CsharpCorner\'+ $pageName +'.xml'
        Export-PnPClientSidePage -Force -Identity $pageName -Out $tempFile

        $con = Get-Content $tempFile
        $sourcepage=$pageName +".aspx"
        $targetpage=$pageName +"_Duplicate.aspx"

        $con | % { $_.Replace($sourcepage, $targetpage) } | Set-Content $tempFile
        Apply-PnPProvisioningTemplate -Path  $tempFile
        write-host -ForegroundColor Magenta "Page Created with name of  " $targetpage

}
catch {
    Write-Host - ForegroundColor Red 'Error ', ':'
    $Error[0].ToString();

Save and run this script.

OutPut Steps

Applying template to client side pages

Export-PnPClientSidePage Cmdlets applying the PnP Provisioning template and export ".xml" file into shared locaiton. Cmdlets referece can be found here

Creation of client side pages

Apply-PnPProvisioningTemplate cmdlets will create a new page within same library from download or exported ".xml" file with provided name i.e. pagename _ duplicate

Cmdlets referece can be found here

Final Duplicate Page outcome

Browse the url with suffix as _duplicate in the url. New Client Side Page will be available with all configuration and controls.

I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.

SPFX with DevOps using SharePoint ALM & Blob Storage

Implement SPFx (SharePoint Framework) deployment with DevOps using SharePoint ALM Commands & Blob Storage

Azure DevOps (Visual Studio Team Services / Team Foundation Server) consists of a set of tools and services that help developers implement DevOps, Continuous Integration, and Continuous Deployment processes for their development projects.

This article explains the steps involved in setting up your Azure DevOps environment with Continuous Integration and Continuous Deployment to automate your SharePoint Framework builds, unit tests, and deployment.

SharePoint ALM (Application Life Cycle Management) APIs provide simple APIs to manage deployment of your SharePoint Framework solutions and add-ins across your tenant or Site Collection level.

ALM APIs can be used to perform exactly the same operations that are available from a UI perspective

Continuous Integration

Continuous Integration (CI) helps developers integrate code into a shared repository by automatically build and packaging the solution each time new code changes are submitted.

Setting up Azure DevOps for Continuous Integration with a SharePoint Framework solution requires the following steps:

Office Azure & SharePoint ALM - Build Pipeline

Node 10.x
Gulp Clean
Gulp Build
Gulp Bundle --ship
Gulp Package-Solution --ship
Publish Build Artifacts (Task Version 1)

"Display Name" -> Publish Artifact: CDN
"Path to Publish" -> temp/deploy
"Artifact Name" -> CDN
"Artifact Publish Location" -> Azure Pipeline

Publish Build Artifact

"Display Name" -> Publish Artifact: App
"Path to Publish" -> sharepoint/solution
"Artifact Name" -> App
"Artifact Publish Location" -> Azure Pipeline

Continuous Deployment

Continuous Deployment (CD) takes validated code packages from build process and deploys them into a staging or production environment. Developers can track which deployments were successful or not and narrow down issues to specific package versions.

Setting up Azure DevOps for Continuous Deployments with a SharePoint Framework solution requires the following steps:

Office Azure & SharePoint ALM - Build Pipeline
Azure file copy (Task Version 2)

"Display name"-> AzureBlobFileCopy
"Source"-> $(System.DefaultWorkingDirectory)/_AzureDevOpsCI/CDN
"AzureConnectionType"-> Azure Resource Manager
"Azure Subscription"
"Destination Type"-> Azure Blob
"RM Storage Account"- >
"Container Name"->

SharePoint ALM: Catalog Scoped Actions

"Display name"->SharePoint ALM: Add Solution Package
"Connection to SharePoint" -> commsite01
"Action"-> Add Solution Package
"Path to SharePoint Solution Package"-> $(System.DefaultWorkingDirectory)/_AzureDevOpsCI/App/devops-01.sppkg
"
"PackageId output variable"-> AppPackageId

SharePoint ALM: Catalog Scoped Actions

"Display name"->SharePoint ALM: Deploy Solution Package
"Connection to SharePoint" -> commsite01
"Action"-> Deploy Solution Package
"Id of the package in the SharePoint App Catalog" -> $(AppPackageId)

End to End implementation SPFx deployment using Azure DevOps with SharePoint (Application Life Cycle Management) & Blob Storage for Static files.

SPFX with DevOps using Office 365 CLI

Implement SPFx (SharePoint Framework) deployment with Azure DevOps Pipeline using Office 365 CLI

Continuous Integration

Continuous Integration (CI) helps developers integrate code into a shared repository by automatically build and packaging the solution each time new code changes are submitted.

Setting up Azure DevOps for Continuous Integration with a SharePoint Framework solution requires the following steps:

Office 365 CLI Build Definition
Node 10.x
Gulp Clean
Gulp Build
Gulp Bundle --ship
Gulp Package-Solution --ship
Copy Files

"Display Name" -> Copy Files To: Copy Files to: $(Build.ArtifactStagingDirectory)/drop
"Contents" -> **/*.sppkg
"Target Folder" -> $(Build.ArtifactStagingDirectory)/drop

Publish Build Artifact

"Display Name" -> Publish Artifact: drop
"Publish To Path" -> $(Build.ArtifactStagingDirectory)
"Artifact Name" -> Drop
"Artifact Publish Location" -> Azure Pipelines

Continuous Deployment

Setting up Azure DevOps for Continuous Deployments with a SharePoint Framework solution requires the following steps:

Office 365 CLI Release Pipeline
Node 10.x
NPM

"Display Name" -> npm custom
"Command" -> custom
"command and arguments" -> install -g @pnp/office365-cli

Command Line

"Display Name" -> Connect to SPO
"Scripts" ->
o365 login https://$(tenant).sharepoint.com/$(catalogsite) --authType password --userName $(username) --password $(password)

Command Line

"Display Name" ->SP add solution
"Scripts" ->

o365 spo app add -p $(System.DefaultWorkingDirectory)/_SPFx-AutomateDeployment-CI/drop/drop/sharePoint/solution/clidemo-02.sppkg --overwrite --appCatalogUrl https://$(tenant).sharepoint.com/$(Devcatalogsite) --scope sitecollection

Command Line

"Display Name" -> Deploy Solution
"Scripts" ->

o365 spo app deploy --name clidemo-02.sppkg --appCatalogUrl https://$(tenant).sharepoint.com/$(Devcatalogsite) --scope sitecollection

End to End implementation SPFx deployment with Azure DevOps using Office 365 CLI

Adaptive Card Templating With Azure Bot Framework SDKV4

Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange. When delivered to a specific app, the JSON is transformed into native UI that automatically adapts to its surroundings. It helps design and integrate light-weight UI for all major platforms and frameworks.

Adaptive Cards Templating is a revolutionary change. It enables the separation of Data & Layouts.

Let's understand the Adaptive Cards online designer. The designer contains multiple panels that serve different purposes, as shown in the following image:

Card Elements
List of all elements available for use within Adaptive Cards
Rendered Card
Preview rendering of the card as it would appear in the currently selected host app.
Card Payload Editor
The browser-friendly JSON editor contains the source of the Adaptive Card that's rendered in the Rendered Card pane.
Card Structure
The card is represented in this panel as a hierarchical structure. Notice that as you select elements in this panel, the corresponding control is highlighted in the Rendered Card pane.
Element Properties
The properties, including those that aren't specified in the source of the Adaptive Card, are displayed in this panel for the control currently selected in the Card Structure panel.
Sample Data Editor
This panel contains the JSON used when using the templating capability of Adaptive Cards.

Templating enables the separation of data from layout in your Adaptive Card. The template language is the syntax used to author a template

Binding syntax changed from {...} to ${...} i.e. “text": "Hello {name}" becomes "text": "Hello ${name}"

Static Card Payload

{
   "type": "TextBlock",
   "text": "Manoj Mittal"
}

Template Payload

{
   "type": "TextBlock",
   "text": "${UserName}"
}

Let's create bot framework sdkv4 project and associate it with adaptive card templating.

Step 1 - Build Bot Framework SDKV4 C# Project

Prerequisties - Azure Bot Framework template installed with Visual Studio 2019.

Launch Visual Studio 2019
Select Create new project
Select Azure Bot Framework (.Net Core 2.1 or 3.1)
Create Project.

Step 2 - Create Adaptive Card Template

Login to https://adaptivecards.io/designer/
Card Element Section desing your card with placehoder, which will be used to bind the data at client side.

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [
    {
      "id": "cardHeader",
      "type": "Container",
      "items": [
        {
          "id": "planetName",
          "type": "TextBlock",
          "weight": "Bolder",
          "size": "Medium",
          "text": "${name}"
        }
      ]
    },
    {
      "type": "Container",
      "id": "cardBody",
      "items": [
        {
          "id": "planetSummary",
          "type": "TextBlock",
          "wrap": true,
          "text": "${summary}"
        },
        {
          "id": "planetDetails",
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "width": 100,
              "items": [
                {
                  "id": "planetImage",
                  "size": "Stretch",
                  "type": "Image",
                  "url": "${imageLink}"
                }
              ]
            },
            {
              "type": "Column",
              "width": 250,
              "items": [
                {
                  "type": "FactSet",
                  "facts": [
                    {
                      "id": "orderFromSun",
                      "title": "Order from the sun:",
                      "value": "${id}"
                    },
                    {
                      "id": "planetNumSatellites",
                      "title": "Known satellites:",
                      "value": "${numSatellites}"
                    },
                    {
                      "id": "solarOrbitYears",
                      "title": "Solar orbit (*Earth years*):",
                      "value": "${solarOrbitYears}"
                    },
                    {
                      "id": "solarOrbitAvgDistanceKm",
                      "title": "Average distance from the sun (*km*):",
                      "value": "${solarOrbitAvgDistanceKm}"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "id": "imageAttribution",
          "type": "TextBlock",
          "size": "Small",
          "isSubtle": true,
          "wrap": true,
          "text": "${imageAlt}",
          "weight": "Lighter"
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.OpenUrl",
      "title": "Learn more on Wikipedia",
      "url": "${wikiLink}"
    }
  ]
}

Card will look like this,

Create Folder into Visual Code Project name - Resource.

Add Json Template with the name of card.json.

Create Folder into Visual Code Project name - Resource.

Add Json Template with the name of card.json.

private readonly string _cards = Path.Combine(".", "Resources", "Card.json");

On Message Activity Function, Load Json into template variable

var adaptiveCardJson = (File.ReadAllText(_cards));
AdaptiveCardTemplate template = new AdaptiveCardTemplate(adaptiveCardJson);

Step 4 - Add Data and bind with template variable

Add reference of AdaptiveCards.Templating.

Note

I used static data or hard coded data here for article purposes. Data Json can be rendered via API also.

var adaptiveCardJson = (File.ReadAllText(_cards));
           AdaptiveCardTemplate template = new AdaptiveCardTemplate(adaptiveCardJson);
           var myData = new
           {
               id = "1",
               name = "Saturn",
               summary = "Saturn is the sixth planet from the Sun and the second-largest in the Solar System, after Jupiter. It is a gas giant with an average radius about nine times that of Earth. It has only one-eighth the average density of Earth; however, with its larger volume, Saturn is over 95 times more massive. Saturn is named after the Roman god of wealth and agriculture; its astronomical symbol (♄) represents the god's sickle.",
               solarOrbitYears = "29.46",
               solarOrbitAvgDistanceKm = "1433525000",
               numSatellites = "82",
               wikiLink = "https://en.wikipedia.org/wiki/Saturn",
               imageLink = "https://upload.wikimedia.org/wikipedia/commons/c/c7/Saturn_during_Equinox.jpg",
               imageAlt = "NASA / JPL / Space Science Institute [Public domain]"
           };
           string cardJson = template.Expand(myData);
           var cardAttachment = CreateAdaptiveCardAttachment(cardJson);

Now turn to render the adaptive card.

private static Attachment CreateAdaptiveCardAttachment(string _card)
       {
           var adaptiveCardAttachment = new Attachment()
           {
               ContentType = "application/vnd.microsoft.card.adaptive",
               Content = JsonConvert.DeserializeObject(_card),
           };
           return adaptiveCardAttachment;
       }

Step 5 - Run Code locally (F5) using Bot Framework Emulator

Data and Layout separated while rendering card. Layouts exists at client side and binding of data also happens at client side. As data will come from the API, it will have server side execution.

Earlier we used to bind the Data and Layout at server side and traverse the entire structure.

Code Base can be downloaded from here.

I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.