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

Showing posts with label SPO. Show all posts

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 webpart with PowerApps Form

PowerApps is an enterprise service that lets you connect, create, and share business apps with your team in minutes, using any device. You can create a PowerApps for an existing list in SharePoint Online.

Let’s get started on how we can integrate PowerApps form with SPFx and leverage the PowerApps out of the box capability.

Overview

The SPFx solution calls the PowerApps form using Modal Dialog with IFrame. PowerApps form then saves the data into SharePoint Online List.

SPFx (SharePoint Framework) control is designed to render the web part at SharePoint Online Modern Framework Page.
PowerApps is designed to add data into SharePoint Online List without REST API call.
SharePoint Online List is created to store the data.

PowerApps Form Creation

Step 1 - Navigate to the PowerApps application here.

Due to network traffic, sometimes the request navigates to here. In the end, it also provides the same interface and functionality.

Step 2 - Create a Canvas App

There are two types of Apps, i.e., Canvas App or Model Apps. In a nutshell, both seem similar, but they have a very basic difference,

Canvas AppIt's used to create a simple visual design without complicated coding or programming tools.
Model AppIt's used to design complex business logic with the ability to generate data model.

Select “+Create” >> Canvas app from blank.

Step 3 - Canvas App Name

Provide the App name and select the format as Tablet. Click "Create" to proceed.

Step 4 - Add Data Source

Once a blank app is created, select View -> Data Source. Type SharePoint to select the connection.

Create an OOTB generic SharePoint List name "Leave Request" with below schema.

S.NO	Column Name	Data Type
1	Leave Comment	Single Line of Text
2	StartDate	Date
3	EndDate	Date

Step 5 - Connect to SharePoint Online Site Collection

Select the desired site collection from the availble list.

Step 6 - Select the List Name

Step 7 - Add Form to Screen

Select Forms

Edit Form

Select the Data Source from the left-hand side; i.e., List Name

Edit Form will appear on the screen with a 3-column layout with all fields in the default views. Change the column and layout with 2 and vertical respectively.

Select Mode to New.

All controls appear on the form with a 2-column layout.

This form is going to create a new request.

Step 8 - Change the form setting

Click the File menu.

Select App Settings >> Screen Size and Orientation >>Choose custom width and height.

Click "Apply" to save the changes.

Step 9 - Resize the Form and Control

Increase the width and height of the form.

Select Title Data card >> set the width in the property as 1024.

Select Data Card Value >> set the width of the text box in the property as 1000.

Follow the same steps for "Leave comments". Select an attachment and remove it.

Step 10 - Add Form Submit Button

Add button to form and rename the text “Submit” and select the form

Choose the form “On Select” from the dropdown

Change the value to “SubmitForm(Form1)

Once the "Submit" button is clicked, it will save the created form.

Step 11 - Add new screen

Select Home -> New Screen -> Blank. It will add a new blank screen into an app.

New screen used for navigation after successful submission of the form.

Step 12 - Add Success message to screen

Select newly added screen2 -> Select insert ribbon -> Select Text

Click HTML Text control.

Select HTML Text control

Add HTML Text to control like “Request Submitted successfully”

Step 13 - Navigate form on Success

Once the form gets submitted, it will navigate the form to screen 2 and show the success message.

Select screen1 Form

Select On Success from dropdown

set value “Navigate (Screen2)

Step 14 - Execute the Form

Press F5 to run the form and set all the details and click submit.

SPFX Webpart integerate with Powerapps Form

Step 15 - Create and Navigate to SPFx Folder

yo @microsoft/sharepoint  

Step 16 - Describe SPFx solution artifacts

Provide Solution Name: SPFX_PowerAppsForm

Provide the Target Solution: SharePoint Online

Provide Web Parts Name: SPFX_PowerAppsForm

Provide WebParts Description: SPFX_PowerAppsForm

Select Framework: React

After a few minutes, the "Congratulations!" screen will appear to notify the successful generation of the package.

Step 17 - Import and Add References

Browse the solution and navigate to filename SpfxpowerappsForm.tsx.

import { Modal } from 'office-ui-fabric-react/lib/Modal';  
import Iframe from 'react-iframe';  
import { Icon } from 'office-ui-fabric-react/lib/Icon';  
import { css, classNamesFunction, DefaultButton, IButtonProps, IStyle, Label, PrimaryButton } from 'office-ui-fabric-react';  

Install "react-iframe" package using the following command.

npm install --save react-iframe  

Step 18 - Add State and Initialize the Contractor

Add State with ShowModalNew variable.

export interface ISpfxPowerAppsFormState {  
  showModalNew: boolean;  
}  

Create Constant with Close button icon.

const CloseModal = () => (  
  <Icon iconName="ChromeClose" className="ms-IconExample" style={{fontWeight : "bold"}}    />  
);  

Add Constructor and initalize the State Variable.

constructor(props: any) {  
    super(props);  
    this.state = {  
      showModalNew: false,  
      };  
  }  

Look at the reference screenshot to place the code.

Step 19 - Add Button to invoke Model Dialog

Add Office-UIiFabric default button and Modal Dailog.

Initilize the Iframe tag inside the Modal Dialog to call the power apps form,

public render(): React.ReactElement<ISpfxPowerAppsFormProps> {  
   return (  
     <div>  
      <DefaultButton id="requestButton" onClick={this._showModalNew} text="Raise Leave Request"></DefaultButton>   
      <Modal  
         titleAriaId="titleId"  
         subtitleAriaId="subtitleId"  
         isOpen={this.state.showModalNew}  
         onDismiss={this._closeModalNew}  
         isBlocking={false}  
        containerClassName="ms-modalExample-container">  
         <div >  
           <span ><b>Leave Request Form  </b> </span>   
           <DefaultButton onClick={this._closeModalNew} className={styles.CloseButton} ><CloseModal/></DefaultButton>  
         </div>  
         <div id="subtitleId" className="ms-modal-body">  
           <Iframe url={"https://web.powerapps.com/webplayer/iframeapp?source=iframe&screenColor=rgba(104,101,171,1)&appId=/providers/Microsoft.PowerApps/apps/f33f9511-5001-467f-8238-fddc36665299"}  
               width="1024px" height="550px"  
               position="relative"  
               allowFullScreen>  
           </Iframe>  
         </div>  
       </Modal>  
      </div>  
   );  
 }  

To hide the Powerapps ribbon into modal dialog, we need to use below define format in the Iframe URL.

https://web.powerapps.com/webplayer/iframeapp?source=iframe&screenColor=rgba(104,101,171,1)&appId=/providers/Microsoft.PowerApps/apps/<PowerAppsFormID>

Navigate to https://web.powerapps.com

Navigate to designed apps and click the "Detail" section.

Step 20 - Add CSS class to float cross icon to right.

Add CSS to SpfxPowerAppsForm.module.scss at the end.

.CloseButton     
{    
float: right;    
background-color: #3860b2;    
height: 40px;    
color: antiquewhite;     
  &:hover{    
    background-color: #3860b2;    
  }    
}     

Step 21 - Test Solution locally

Navigate to View -> Integrated Terminal

type gulp serve  

Step 22 - Browse the Workbench

Browse the workbench with <<SitecollectionUrl>>/_layouts/15/workbench.aspx

Click the + Icon and add the Web Part since the web part has the only button with Modal Popup.

Step 23 - Raise a leave request

The button will invoke the PowerApps form

Fill the details and click the submit. On click of Submit, it will navigate to a different screen with a success message and add an item to SharePoint Online List.

Finally, the record gets added to the SharePoint List.

How easy and quick it was to build a custom PowerApps form solution, without a single line of code.

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