New sample SPFx webhooks real time (#351)
* first commit * Implemented GetChanges API, Readme updated, New property "socket server url" * added some scripts in order to automate the provisioning and deployment, readme updated, minor bug fix
This commit is contained in:
Giuliano De Luca
Vesa Juvonen
parent
99ea9eefde
commit
cbcc2041d4
|
|
@ -0,0 +1,25 @@
|
||||||
|
# EditorConfig helps developers define and maintain consistent
|
||||||
|
# coding styles between different editors and IDEs
|
||||||
|
# editorconfig.org
|
||||||
|
|
||||||
|
root = true
|
||||||
|
|
||||||
|
|
||||||
|
[*]
|
||||||
|
|
||||||
|
# change these settings to your own preference
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
|
||||||
|
# we recommend you to keep these unchanged
|
||||||
|
end_of_line = lf
|
||||||
|
charset = utf-8
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
trim_trailing_whitespace = false
|
||||||
|
|
||||||
|
[{package,bower}.json]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Build generated files
|
||||||
|
dist
|
||||||
|
lib
|
||||||
|
solution
|
||||||
|
temp
|
||||||
|
*.sppkg
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# OSX
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Visual Studio files
|
||||||
|
.ntvs_analysis.dat
|
||||||
|
.vs
|
||||||
|
bin
|
||||||
|
obj
|
||||||
|
|
||||||
|
# Resx Generated Code
|
||||||
|
*.resx.ts
|
||||||
|
|
||||||
|
# Styles Generated Code
|
||||||
|
*.scss.ts
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
// Place your settings in this file to overwrite default and user settings.
|
||||||
|
{
|
||||||
|
// Configure glob patterns for excluding files and folders in the file explorer.
|
||||||
|
"files.exclude": {
|
||||||
|
"**/.git": true,
|
||||||
|
"**/.DS_Store": true,
|
||||||
|
"**/bower_components": true,
|
||||||
|
"**/coverage": true,
|
||||||
|
"**/lib-amd": true,
|
||||||
|
"src/**/*.scss.ts": true
|
||||||
|
},
|
||||||
|
"typescript.tsdk": ".\\node_modules\\typescript\\lib",
|
||||||
|
"json.schemas": [
|
||||||
|
{
|
||||||
|
"fileMatch": [
|
||||||
|
"/config/config.json"
|
||||||
|
],
|
||||||
|
"url": "./node_modules/@microsoft/sp-build-core-tasks/lib/configJson/schemas/config-v1.schema.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fileMatch": [
|
||||||
|
"/config/copy-assets.json"
|
||||||
|
],
|
||||||
|
"url": "./node_modules/@microsoft/sp-build-core-tasks/lib/copyAssets/copy-assets.schema.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fileMatch": [
|
||||||
|
"/config/deploy-azure-storage.json"
|
||||||
|
],
|
||||||
|
"url": "./node_modules/@microsoft/sp-build-core-tasks/lib/deployAzureStorage/deploy-azure-storage.schema.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fileMatch": [
|
||||||
|
"/config/package-solution.json"
|
||||||
|
],
|
||||||
|
"url": "./node_modules/@microsoft/sp-build-core-tasks/lib/packageSolution/package-solution.schema.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fileMatch": [
|
||||||
|
"/config/serve.json"
|
||||||
|
],
|
||||||
|
"url": "./node_modules/@microsoft/gulp-core-build-serve/lib/serve.schema.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fileMatch": [
|
||||||
|
"/config/tslint.json"
|
||||||
|
],
|
||||||
|
"url": "./node_modules/@microsoft/gulp-core-build-typescript/lib/schemas/tslint.schema.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fileMatch": [
|
||||||
|
"/config/write-manifests.json"
|
||||||
|
],
|
||||||
|
"url": "./node_modules/@microsoft/sp-build-core-tasks/lib/writeManifests/write-manifests.schema.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fileMatch": [
|
||||||
|
"/config/configure-webpack.json"
|
||||||
|
],
|
||||||
|
"url": "./node_modules/@microsoft/sp-build-core-tasks/lib/configureWebpack/configure-webpack.schema.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fileMatch": [
|
||||||
|
"/config/configure-external-bundling-webpack.json"
|
||||||
|
],
|
||||||
|
"url": "./node_modules/@microsoft/sp-build-core-tasks/lib/configureWebpack/configure-webpack-external-bundling.schema.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fileMatch": [
|
||||||
|
"/copy-static-assets.json"
|
||||||
|
],
|
||||||
|
"url": "./node_modules/@microsoft/sp-build-core-tasks/lib/copyStaticAssets/copy-static-assets.schema.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"@microsoft/generator-sharepoint": {
|
||||||
|
"version": "1.3.2",
|
||||||
|
"libraryName": "react-webhooks-realtime",
|
||||||
|
"libraryId": "d4eee588-a8e6-45ce-b9e1-c40f0b92ef2d",
|
||||||
|
"environment": "spo"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,118 @@
|
||||||
|
#################
|
||||||
|
# Configuration #
|
||||||
|
#################
|
||||||
|
$catalogSite = "https://giuleon.sharepoint.com/sites/apps" # => App Catalog site
|
||||||
|
$catalogRelativePath = "sites/apps/AppCatalog" # => App Catalog relative url
|
||||||
|
#######
|
||||||
|
# End #
|
||||||
|
#######
|
||||||
|
|
||||||
|
# Get Web Request
|
||||||
|
function GetRequest ($apiUrl, $webSession) {
|
||||||
|
return Invoke-WebRequest -Uri $apiUrl -Method Get -WebSession $webSession
|
||||||
|
}
|
||||||
|
|
||||||
|
# Post Web Request
|
||||||
|
function PostRequest($apiUrl, $webSession, $body) {
|
||||||
|
return Invoke-WebRequest -Uri $apiUrl -Body $body -Method Post -WebSession $webSession
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
# Settting the right parameters value
|
||||||
|
function setXmlMapping($xmlBody, $siteId, $webId, $listId, $fileId, $fileVersion, $skipDeployment) {
|
||||||
|
# Replace the random token with a random guid
|
||||||
|
$randomGuid = [guid]::NewGuid()
|
||||||
|
if($skipDeployment -eq $True){
|
||||||
|
$skipDeployment = "true"
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
$skipDeployment = "false"
|
||||||
|
}
|
||||||
|
$xmlBody = [regex]::replace($xmlBody, "{randomId}", $randomGuid)
|
||||||
|
# Replace the site ID token with the actual site ID string
|
||||||
|
$xmlBody = [regex]::replace($xmlBody, "{siteId}", $siteId)
|
||||||
|
# Replace the web ID token with the actual web ID string
|
||||||
|
$xmlBody = [regex]::replace($xmlBody, "{webId}", $webId)
|
||||||
|
# Replace the list ID token with the actual list ID string
|
||||||
|
$xmlBody = [regex]::replace($xmlBody, "{listId}", $listId)
|
||||||
|
# Replace the item ID token with the actual item ID number
|
||||||
|
$xmlBody = [regex]::replace($xmlBody, "{itemId}", $fileId)
|
||||||
|
# Replace the file version token with the actual file version number
|
||||||
|
$xmlBody = [regex]::replace($xmlBody, "{fileVersion}", $fileVersion)
|
||||||
|
# Replace the skipFeatureDeployment token with the skipFeatureDeployment option
|
||||||
|
$xmlBody = [regex]::replace($xmlBody, "{skipFeatureDeployment}", $skipDeployment)
|
||||||
|
return $xmlBody;
|
||||||
|
}
|
||||||
|
|
||||||
|
Write-Host ***************************************** -ForegroundColor Yellow
|
||||||
|
Write-Host * Uploading the sppkg on the AppCatalog * -ForegroundColor Yellow
|
||||||
|
Write-Host ***************************************** -ForegroundColor Yellow
|
||||||
|
$packageConfig = Get-Content -Raw -Path .\config\package-solution.json | ConvertFrom-Json
|
||||||
|
$packagePath = Join-Path "sharepoint/" $packageConfig.paths.zippedPackage -Resolve
|
||||||
|
$skipFeatureDeployment = $packageConfig.solution.skipFeatureDeployment
|
||||||
|
|
||||||
|
# Connect-PnPOnline $catalogSite -Credentials (Get-Credential)
|
||||||
|
Connect-PnPOnline $catalogSite -Credentials giuleon
|
||||||
|
Add-PnPFile -Path $packagePath -Folder "AppCatalog"
|
||||||
|
|
||||||
|
Write-Host *************************************************** -ForegroundColor Yellow
|
||||||
|
Write-Host * The SPFx solution has been succesfully uploaded to the AppCatalog * -ForegroundColor Yellow
|
||||||
|
Write-Host *************************************************** -ForegroundColor Yellow
|
||||||
|
|
||||||
|
# Connect to SharePoint Online
|
||||||
|
$targetSite = "https://giuleon.sharepoint.com/sites/apps"
|
||||||
|
$targetSiteUri = [System.Uri]$targetSite
|
||||||
|
|
||||||
|
# Retrieve the client credentials and the related Authentication Cookies
|
||||||
|
$context = (Get-PnPWeb).Context
|
||||||
|
$credentials = $context.Credentials
|
||||||
|
$authenticationCookies = $credentials.GetAuthenticationCookie($targetSiteUri, $true)
|
||||||
|
|
||||||
|
# Set the Authentication Cookies and the Accept HTTP Header
|
||||||
|
$webSession = New-Object Microsoft.PowerShell.Commands.WebRequestSession
|
||||||
|
$webSession.Cookies.SetCookies($targetSiteUri, $authenticationCookies)
|
||||||
|
$webSession.Headers.Add("Accept", "application/json;odata=verbose")
|
||||||
|
|
||||||
|
$apiUrl = $catalogSite + "/_api/contextinfo?$"+"select=FormDigestValue"
|
||||||
|
$result = PostRequest -apiUrl $apiUrl -webSession $webSession
|
||||||
|
$formDigest = $result.Content | ConvertFrom-Json
|
||||||
|
Write-Host "FormDigestValue - " $formDigest.d.GetContextWebInformation.FormDigestValue
|
||||||
|
$formDigest = $formDigest.d.GetContextWebInformation.FormDigestValue
|
||||||
|
$webSession.Headers.Add("X-RequestDigest", $formDigest)
|
||||||
|
|
||||||
|
# Set request variables
|
||||||
|
$apiUrl = "$targetSite" + "/_api/site?$"+"select=Id"
|
||||||
|
|
||||||
|
# Make the REST request
|
||||||
|
$webRequest = GetRequest -apiUrl $apiUrl -webSession $webSession # Invoke-WebRequest -Uri $apiUrl -Method Get -WebSession $webSession
|
||||||
|
$response = $webRequest.Content | ConvertFrom-Json
|
||||||
|
$siteId = $response.d.Id
|
||||||
|
Write-Host "Site Id - " $response.d.Id
|
||||||
|
|
||||||
|
# Retrieving webId and listId
|
||||||
|
$apiUrl = "$targetSite" + "/_api/web/getList('$catalogRelativePath')?$"+"select=Id,ParentWeb/Id`&`$"+"expand=ParentWeb"
|
||||||
|
$webRequest = GetRequest -apiUrl $apiUrl -webSession $webSession # Invoke-WebRequest -Uri $apiUrl -Method Get -WebSession $webSession
|
||||||
|
$response = $webRequest.Content | ConvertFrom-Json
|
||||||
|
$webId = $response.d.ParentWeb.Id
|
||||||
|
$listId = $response.d.Id
|
||||||
|
Write-Host "Web Id - " $webId " / List Id - " + $listId
|
||||||
|
|
||||||
|
# Get the ListItemAllFields Id and Version
|
||||||
|
$fileName = $packageConfig.paths.zippedPackage.Substring($packageConfig.paths.zippedPackage.LastIndexOf("/")+1)
|
||||||
|
$apiUrl = "$targetSite" + "/_api/web/GetFolderByServerRelativeUrl('AppCatalog')/Files('$fileName')?$"+"expand=ListItemAllFields`&`$" + "select=ListItemAllFields/ID,ListItemAllFields/owshiddenversion"
|
||||||
|
$webRequest = GetRequest -apiUrl $apiUrl -webSession $webSession
|
||||||
|
$response = $webRequest.Content -replace '"id":', '"id_":' | ConvertFrom-Json
|
||||||
|
$fileId = $response.d.ListItemAllFields.id_
|
||||||
|
$fileVersion = $response.d.ListItemAllFields.owshiddenversion
|
||||||
|
Write-Host "ListItem Id - " $fileId " / Version - " $fileVersion
|
||||||
|
|
||||||
|
# Read the xml
|
||||||
|
$xmlBody = Get-Content DeploySPFxToAppCatalogRequestBody.xml -Encoding UTF8
|
||||||
|
$xmlBody = setXmlMapping -xmlBody $xmlBody -siteId $siteId -webId $webId -listId $listId -fileId $fileId -fileVersion $fileVersion -skipDeployment $skipFeatureDeployment
|
||||||
|
Write-Host "deployment in progress....."
|
||||||
|
|
||||||
|
# Deploy the sspkg
|
||||||
|
$webSession.Headers.Add("Content-type", "application/xml")
|
||||||
|
$apiUrl = $catalogSite + "/_vti_bin/client.svc/ProcessQuery"
|
||||||
|
$result = PostRequest -apiUrl $apiUrl -webSession $webSession -body $xmlBody
|
||||||
|
Write-Host $result
|
||||||
|
|
@ -0,0 +1,148 @@
|
||||||
|
<Request
|
||||||
|
xmlns="http://schemas.microsoft.com/sharepoint/clientquery/2009" SchemaVersion="15.0.0.0" LibraryVersion="16.0.0.0" ApplicationName="Javascript Library">
|
||||||
|
<Actions>
|
||||||
|
<Method Name="SetFieldValue" Id="18" ObjectPathId="10" Version="{fileVersion}">
|
||||||
|
<Parameters>
|
||||||
|
<Parameter Type="String">IsClientSideSolutionDeployed</Parameter>
|
||||||
|
<Parameter Type="Boolean">true</Parameter>
|
||||||
|
</Parameters>
|
||||||
|
</Method>
|
||||||
|
<Method Name="SetFieldValue" Id="19" ObjectPathId="10" Version="{fileVersion}">
|
||||||
|
<Parameters>
|
||||||
|
<Parameter Type="String">IsClientSideSolutionCurrentVersionDeployed</Parameter>
|
||||||
|
<Parameter Type="Boolean">true</Parameter>
|
||||||
|
</Parameters>
|
||||||
|
</Method>
|
||||||
|
<Method Name="SetFieldValue" Id="20" ObjectPathId="10" Version="{fileVersion}">
|
||||||
|
<Parameters>
|
||||||
|
<Parameter Type="String">SkipFeatureDeployment</Parameter>
|
||||||
|
<Parameter Type="Boolean">{skipFeatureDeployment}</Parameter>
|
||||||
|
</Parameters>
|
||||||
|
</Method>
|
||||||
|
<Method Name="Update" Id="21" ObjectPathId="10" Version="{fileVersion}" />
|
||||||
|
<Query Id="22" ObjectPathId="10">
|
||||||
|
<Query SelectAllProperties="false">
|
||||||
|
<Properties>
|
||||||
|
<Property Name="FileSystemObjectType" ScalarProperty="true" />
|
||||||
|
<Property Name="Id" ScalarProperty="true" />
|
||||||
|
<Property Name="ServerRedirectedEmbedUri" ScalarProperty="true" />
|
||||||
|
<Property Name="ServerRedirectedEmbedUrl" ScalarProperty="true" />
|
||||||
|
<Property Name="ID" ScalarProperty="true" />
|
||||||
|
<Property Name="ContentTypeId" ScalarProperty="true" />
|
||||||
|
<Property Name="Created" ScalarProperty="true" />
|
||||||
|
<Property Name="Author" ScalarProperty="true" />
|
||||||
|
<Property Name="Modified" ScalarProperty="true" />
|
||||||
|
<Property Name="Editor" ScalarProperty="true" />
|
||||||
|
<Property Name="_HasCopyDestinations" ScalarProperty="true" />
|
||||||
|
<Property Name="_CopySource" ScalarProperty="true" />
|
||||||
|
<Property Name="_ModerationStatus" ScalarProperty="true" />
|
||||||
|
<Property Name="_ModerationComments" ScalarProperty="true" />
|
||||||
|
<Property Name="FileRef" ScalarProperty="true" />
|
||||||
|
<Property Name="FileDirRef" ScalarProperty="true" />
|
||||||
|
<Property Name="Last_x0020_Modified" ScalarProperty="true" />
|
||||||
|
<Property Name="Created_x0020_Date" ScalarProperty="true" />
|
||||||
|
<Property Name="File_x0020_Size" ScalarProperty="true" />
|
||||||
|
<Property Name="FSObjType" ScalarProperty="true" />
|
||||||
|
<Property Name="SortBehavior" ScalarProperty="true" />
|
||||||
|
<Property Name="CheckedOutUserId" ScalarProperty="true" />
|
||||||
|
<Property Name="IsCheckedoutToLocal" ScalarProperty="true" />
|
||||||
|
<Property Name="CheckoutUser" ScalarProperty="true" />
|
||||||
|
<Property Name="FileLeafRef" ScalarProperty="true" />
|
||||||
|
<Property Name="UniqueId" ScalarProperty="true" />
|
||||||
|
<Property Name="SyncClientId" ScalarProperty="true" />
|
||||||
|
<Property Name="ProgId" ScalarProperty="true" />
|
||||||
|
<Property Name="ScopeId" ScalarProperty="true" />
|
||||||
|
<Property Name="VirusStatus" ScalarProperty="true" />
|
||||||
|
<Property Name="CheckedOutTitle" ScalarProperty="true" />
|
||||||
|
<Property Name="_CheckinComment" ScalarProperty="true" />
|
||||||
|
<Property Name="Modified_x0020_By" ScalarProperty="true" />
|
||||||
|
<Property Name="Created_x0020_By" ScalarProperty="true" />
|
||||||
|
<Property Name="File_x0020_Type" ScalarProperty="true" />
|
||||||
|
<Property Name="HTML_x0020_File_x0020_Type" ScalarProperty="true" />
|
||||||
|
<Property Name="_SourceUrl" ScalarProperty="true" />
|
||||||
|
<Property Name="_SharedFileIndex" ScalarProperty="true" />
|
||||||
|
<Property Name="MetaInfo" ScalarProperty="true" />
|
||||||
|
<Property Name="_Level" ScalarProperty="true" />
|
||||||
|
<Property Name="_IsCurrentVersion" ScalarProperty="true" />
|
||||||
|
<Property Name="ItemChildCount" ScalarProperty="true" />
|
||||||
|
<Property Name="FolderChildCount" ScalarProperty="true" />
|
||||||
|
<Property Name="Restricted" ScalarProperty="true" />
|
||||||
|
<Property Name="OriginatorId" ScalarProperty="true" />
|
||||||
|
<Property Name="NoExecute" ScalarProperty="true" />
|
||||||
|
<Property Name="ContentVersion" ScalarProperty="true" />
|
||||||
|
<Property Name="_ComplianceFlags" ScalarProperty="true" />
|
||||||
|
<Property Name="_ComplianceTag" ScalarProperty="true" />
|
||||||
|
<Property Name="_ComplianceTagWrittenTime" ScalarProperty="true" />
|
||||||
|
<Property Name="_ComplianceTagUserId" ScalarProperty="true" />
|
||||||
|
<Property Name="BSN" ScalarProperty="true" />
|
||||||
|
<Property Name="_ListSchemaVersion" ScalarProperty="true" />
|
||||||
|
<Property Name="_Dirty" ScalarProperty="true" />
|
||||||
|
<Property Name="_Parsable" ScalarProperty="true" />
|
||||||
|
<Property Name="AccessPolicy" ScalarProperty="true" />
|
||||||
|
<Property Name="_VirusStatus" ScalarProperty="true" />
|
||||||
|
<Property Name="_VirusVendorID" ScalarProperty="true" />
|
||||||
|
<Property Name="_VirusInfo" ScalarProperty="true" />
|
||||||
|
<Property Name="AppAuthor" ScalarProperty="true" />
|
||||||
|
<Property Name="AppEditor" ScalarProperty="true" />
|
||||||
|
<Property Name="SMTotalSize" ScalarProperty="true" />
|
||||||
|
<Property Name="SMLastModifiedDate" ScalarProperty="true" />
|
||||||
|
<Property Name="SMTotalFileStreamSize" ScalarProperty="true" />
|
||||||
|
<Property Name="SMTotalFileCount" ScalarProperty="true" />
|
||||||
|
<Property Name="owshiddenversion" ScalarProperty="true" />
|
||||||
|
<Property Name="_UIVersion" ScalarProperty="true" />
|
||||||
|
<Property Name="_UIVersionString" ScalarProperty="true" />
|
||||||
|
<Property Name="InstanceID" ScalarProperty="true" />
|
||||||
|
<Property Name="Order" ScalarProperty="true" />
|
||||||
|
<Property Name="GUID" ScalarProperty="true" />
|
||||||
|
<Property Name="WorkflowVersion" ScalarProperty="true" />
|
||||||
|
<Property Name="WorkflowInstanceID" ScalarProperty="true" />
|
||||||
|
<Property Name="ParentVersionString" ScalarProperty="true" />
|
||||||
|
<Property Name="ParentLeafName" ScalarProperty="true" />
|
||||||
|
<Property Name="DocConcurrencyNumber" ScalarProperty="true" />
|
||||||
|
<Property Name="ParentUniqueId" ScalarProperty="true" />
|
||||||
|
<Property Name="StreamHash" ScalarProperty="true" />
|
||||||
|
<Property Name="ComplianceAssetId" ScalarProperty="true" />
|
||||||
|
<Property Name="Title" ScalarProperty="true" />
|
||||||
|
<Property Name="AppProductID" ScalarProperty="true" />
|
||||||
|
<Property Name="AssetID" ScalarProperty="true" />
|
||||||
|
<Property Name="AppPublisher" ScalarProperty="true" />
|
||||||
|
<Property Name="AppThumbnailURL" ScalarProperty="true" />
|
||||||
|
<Property Name="AppDescription" ScalarProperty="true" />
|
||||||
|
<Property Name="AppShortDescription" ScalarProperty="true" />
|
||||||
|
<Property Name="AppVersion" ScalarProperty="true" />
|
||||||
|
<Property Name="AppSupportURL" ScalarProperty="true" />
|
||||||
|
<Property Name="AppVideoURL" ScalarProperty="true" />
|
||||||
|
<Property Name="IsAppPackageEnabled" ScalarProperty="true" />
|
||||||
|
<Property Name="SharePointAppCategory" ScalarProperty="true" />
|
||||||
|
<Property Name="AppPrerequisitesXML" ScalarProperty="true" />
|
||||||
|
<Property Name="IsFeaturedApp" ScalarProperty="true" />
|
||||||
|
<Property Name="AppMetadataLocale" ScalarProperty="true" />
|
||||||
|
<Property Name="IsDefaultAppMetadataLocale" ScalarProperty="true" />
|
||||||
|
<Property Name="AppImageURL1" ScalarProperty="true" />
|
||||||
|
<Property Name="AppImageURL2" ScalarProperty="true" />
|
||||||
|
<Property Name="AppImageURL3" ScalarProperty="true" />
|
||||||
|
<Property Name="AppImageURL4" ScalarProperty="true" />
|
||||||
|
<Property Name="AppImageURL5" ScalarProperty="true" />
|
||||||
|
<Property Name="AppPackageHash" ScalarProperty="true" />
|
||||||
|
<Property Name="IsValidAppPackage" ScalarProperty="true" />
|
||||||
|
<Property Name="AppPackageErrorMessage" ScalarProperty="true" />
|
||||||
|
<Property Name="AppPermissionXML" ScalarProperty="true" />
|
||||||
|
<Property Name="AppSubtypeID" ScalarProperty="true" />
|
||||||
|
<Property Name="IsAutoHostedApp" ScalarProperty="true" />
|
||||||
|
<Property Name="AppTitleInfo" ScalarProperty="true" />
|
||||||
|
<Property Name="AppSupportedLocales" ScalarProperty="true" />
|
||||||
|
<Property Name="IsClientSideSolution" ScalarProperty="true" />
|
||||||
|
<Property Name="IsClientSideSolutionDeployed" ScalarProperty="true" />
|
||||||
|
<Property Name="ExternalContentDomains" ScalarProperty="true" />
|
||||||
|
<Property Name="IsClientSideSolutionCurrentVersionDeployed" ScalarProperty="true" />
|
||||||
|
<Property Name="SkipFeatureDeployment" ScalarProperty="true" />
|
||||||
|
<Property Name="PackageDefaultSkipFeatureDeployment" ScalarProperty="true" />
|
||||||
|
<Property Name="UniqueSolutionId" ScalarProperty="true" />
|
||||||
|
</Properties>
|
||||||
|
</Query>
|
||||||
|
</Query>
|
||||||
|
</Actions>
|
||||||
|
<ObjectPaths>
|
||||||
|
<Identity Id="10" Name="{randomId}|740c6a0b-85e2-48a0-a494-e0f1759d4aa7:site:{siteId}:web:{webId}:list:{listId}:item:{itemId},1" />
|
||||||
|
</ObjectPaths>
|
||||||
|
</Request>
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
#################
|
||||||
|
# Configuration #
|
||||||
|
#################
|
||||||
|
$cdnSite = "https://giuleon.sharepoint.com/" # => CDN SharePoint site
|
||||||
|
$cdnLib = "cdn/SPFx-react-webhooks-realtime" # => Document library and eventual folders
|
||||||
|
#######
|
||||||
|
# End #
|
||||||
|
#######
|
||||||
|
|
||||||
|
Write-Host ************************************************************************************** -ForegroundColor Yellow
|
||||||
|
Write-Host * Reading the cdnBasePath from write-manifests.json and collectiong the bundle files * -ForegroundColor Yellow
|
||||||
|
Write-Host ************************************************************************************** -ForegroundColor Yellow
|
||||||
|
$cdnConfig = Get-Content -Raw -Path .\config\copy-assets.json | ConvertFrom-Json
|
||||||
|
$bundlePath = Convert-Path $cdnConfig.deployCdnPath
|
||||||
|
$files = Get-ChildItem $bundlePath\*.*
|
||||||
|
|
||||||
|
Write-Host **************************************** -ForegroundColor Yellow
|
||||||
|
Write-Host Uploading the bundle on Office 365 CDN * -ForegroundColor Yellow
|
||||||
|
Write-Host **************************************** -ForegroundColor Yellow
|
||||||
|
Connect-PnPOnline $cdnSite -Credentials giuleon
|
||||||
|
foreach ($file in $files) {
|
||||||
|
$fullPath = $file.DirectoryName + "\" + $file.Name
|
||||||
|
Add-PnPFile -Path $fullPath -Folder $cdnLib
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
$spSite = "https://giuleon.sharepoint.com/sites/demo" # => SharePoint site
|
||||||
|
$spListTitle = "Events" # => List name
|
||||||
|
|
||||||
|
Connect-PnPOnline $spSite -Credentials (Get-Credential)
|
||||||
|
|
||||||
|
New-PnPList -Title $spListTitle -Template GenericList
|
||||||
|
|
||||||
|
Add-PnPField -List $spListTitle -DisplayName "Description" -InternalName "SPFxDescription" -Type Text -Group "SPFx Group" -AddToDefaultView
|
||||||
|
Add-PnPField -List $spListTitle -DisplayName "Thumbnail" -InternalName "SPFxThumbnail" -Type Url -Group "SPFx Group" -AddToDefaultView
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
# Webhooks Realtime
|
||||||
|
|
||||||
|
## Summary
|
||||||
|
This web part demonstrates how to leverage the capabilities of SharePoint Webhooks.
|
||||||
|
The libraries used by this web part are Socket.io, sp pnp js, moment.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Solution architecture
|
||||||
|
|
||||||
|
|
||||||
|
## Used SharePoint Framework Version
|
||||||
|
|
||||||
|
|
||||||
|
## Applies to
|
||||||
|
|
||||||
|
* [SharePoint Framework](https:/dev.office.com/sharepoint)
|
||||||
|
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
> In order to use properly this web part is necessary follow these steps:
|
||||||
|
> * Istall a webserver that will receive the webhooks, for this PoC I created a NodeJs Application hosted on Azure take a look on my solution [https://github.com/giuleon/SharePoint-Webhooks-Broadcaster](https://github.com/giuleon/SharePoint-Webhooks-Broadcaster)
|
||||||
|
> * run the Powershell script **ProvisioningArtifacts.ps1** in order to provision the list Events which is required for this web part
|
||||||
|
> * Create a new webhooks subscription for the SharePoint List **Events** (that will be installed by running the script **ProvisioningArtifacts.ps1**), as you prefer, across your solution or Postman, please read the following guideline to achieve this goal [https://docs.microsoft.com/en-us/sharepoint/dev/apis/webhooks/overview-sharepoint-webhooks](https://docs.microsoft.com/en-us/sharepoint/dev/apis/webhooks/overview-sharepoint-webhooks)
|
||||||
|
> * The web part has been developed (GetChanges API) to notify new items added in the **Events** list
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
|
||||||
|
Solution|Author(s)
|
||||||
|
--------|---------
|
||||||
|
react-webhooks-realtime|Giuliano De Luca ([@giuleon](https://twitter.com/giuleon) , [www.delucagiuliano.com](delucagiuliano.com))
|
||||||
|
|
||||||
|
|
||||||
|
## Version history
|
||||||
|
|
||||||
|
Version|Date|Comments
|
||||||
|
-------|----|--------
|
||||||
|
1.0|October 29, 2017|Initial release
|
||||||
|
|
||||||
|
## Disclaimer
|
||||||
|
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Minimal Path to Awesome
|
||||||
|
|
||||||
|
- Clone this repository
|
||||||
|
- in the command line run:
|
||||||
|
- `npm install`
|
||||||
|
- `gulp serve`
|
||||||
|
|
||||||
|
## Features
|
||||||
|
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
||||||
|
|
||||||
|
- How to leverage the capabilities of SharePoint webhooks.
|
||||||
|
|
||||||
|
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-webhooks-realtime" />
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 687 KiB |
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||||
|
"version": "2.0",
|
||||||
|
"bundles": {
|
||||||
|
"real-time-list-web-part": {
|
||||||
|
"components": [
|
||||||
|
{
|
||||||
|
"entrypoint": "./lib/webparts/realTimeList/RealTimeListWebPart.js",
|
||||||
|
"manifest": "./src/webparts/realTimeList/RealTimeListWebPart.manifest.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"externals": {
|
||||||
|
"sp-pnp-js": "https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.1/pnp.min.js"
|
||||||
|
},
|
||||||
|
"localizedResources": {
|
||||||
|
"RealTimeListWebPartStrings": "lib/webparts/realTimeList/loc/{locale}.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||||
|
"deployCdnPath": "temp/deploy"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||||
|
"workingDir": "./temp/deploy/",
|
||||||
|
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||||
|
"container": "react-webhooks-realtime",
|
||||||
|
"accessKey": "<!-- ACCESS KEY -->"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||||
|
"solution": {
|
||||||
|
"name": "react-webhooks-realtime-client-side-solution",
|
||||||
|
"id": "d4eee588-a8e6-45ce-b9e1-c40f0b92ef2d",
|
||||||
|
"version": "1.0.0.0",
|
||||||
|
"skipFeatureDeployment": true
|
||||||
|
},
|
||||||
|
"paths": {
|
||||||
|
"zippedPackage": "solution/react-webhooks-realtime.sppkg"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json",
|
||||||
|
"port": 4321,
|
||||||
|
"https": true,
|
||||||
|
"initialPage": "https://localhost:5432/workbench",
|
||||||
|
"api": {
|
||||||
|
"port": 5432,
|
||||||
|
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/core-build/tslint.schema.json",
|
||||||
|
// Display errors as warnings
|
||||||
|
"displayAsWarning": true,
|
||||||
|
// The TSLint task may have been configured with several custom lint rules
|
||||||
|
// before this config file is read (for example lint rules from the tslint-microsoft-contrib
|
||||||
|
// project). If true, this flag will deactivate any of these rules.
|
||||||
|
"removeExistingRules": true,
|
||||||
|
// When true, the TSLint task is configured with some default TSLint "rules.":
|
||||||
|
"useDefaultConfigAsBase": false,
|
||||||
|
// Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
|
||||||
|
// which are active, other than the list of rules below.
|
||||||
|
"lintConfig": {
|
||||||
|
// Opt-in to Lint rules which help to eliminate bugs in JavaScript
|
||||||
|
"rules": {
|
||||||
|
"class-name": false,
|
||||||
|
"export-name": false,
|
||||||
|
"forin": false,
|
||||||
|
"label-position": false,
|
||||||
|
"member-access": true,
|
||||||
|
"no-arg": false,
|
||||||
|
"no-console": false,
|
||||||
|
"no-construct": false,
|
||||||
|
"no-duplicate-case": true,
|
||||||
|
"no-duplicate-variable": true,
|
||||||
|
"no-eval": false,
|
||||||
|
"no-function-expression": true,
|
||||||
|
"no-internal-module": true,
|
||||||
|
"no-shadowed-variable": true,
|
||||||
|
"no-switch-case-fall-through": true,
|
||||||
|
"no-unnecessary-semicolons": true,
|
||||||
|
"no-unused-expression": true,
|
||||||
|
"no-use-before-declare": true,
|
||||||
|
"no-with-statement": true,
|
||||||
|
"semicolon": true,
|
||||||
|
"trailing-comma": false,
|
||||||
|
"typedef": false,
|
||||||
|
"typedef-whitespace": false,
|
||||||
|
"use-named-parameter": true,
|
||||||
|
"valid-typeof": true,
|
||||||
|
"variable-name": false,
|
||||||
|
"whitespace": false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||||
|
"cdnBasePath": "https://publiccdn.sharepointonline.com/giuleon.sharepoint.com/cdn/SPFx-react-webhooks-realtime"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const gulp = require('gulp');
|
||||||
|
const build = require('@microsoft/sp-build-web');
|
||||||
|
|
||||||
|
build.initialize(gulp);
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
{
|
||||||
|
"name": "react-webhooks-realtime",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "gulp bundle",
|
||||||
|
"clean": "gulp clean",
|
||||||
|
"test": "gulp test"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@microsoft/sp-core-library": "~1.3.0",
|
||||||
|
"@microsoft/sp-lodash-subset": "~1.3.0",
|
||||||
|
"@microsoft/sp-webpart-base": "~1.3.0",
|
||||||
|
"@types/react": "15.0.38",
|
||||||
|
"@types/react-addons-shallow-compare": "0.14.17",
|
||||||
|
"@types/react-addons-test-utils": "0.14.15",
|
||||||
|
"@types/react-addons-update": "0.14.14",
|
||||||
|
"@types/react-dom": "0.14.18",
|
||||||
|
"@types/webpack-env": ">=1.12.1 <1.14.0",
|
||||||
|
"@uifabric/example-app-base": "^5.1.2",
|
||||||
|
"moment": "^2.19.1",
|
||||||
|
"react": "15.4.2",
|
||||||
|
"react-dom": "15.4.2",
|
||||||
|
"socket.io-client": "^2.0.4",
|
||||||
|
"sp-pnp-js": "^3.0.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@microsoft/sp-build-web": "~1.3.0",
|
||||||
|
"@microsoft/sp-module-interfaces": "~1.3.0",
|
||||||
|
"@microsoft/sp-webpart-workbench": "~1.3.0",
|
||||||
|
"gulp": "~3.9.1",
|
||||||
|
"@types/chai": ">=3.4.34 <3.6.0",
|
||||||
|
"@types/mocha": ">=2.2.33 <2.6.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||||
|
"id": "874bb168-abe1-4176-92c2-24251077c23e",
|
||||||
|
"alias": "RealTimeListWebPart",
|
||||||
|
"componentType": "WebPart",
|
||||||
|
|
||||||
|
// The "*" signifies that the version should be taken from the package.json
|
||||||
|
"version": "*",
|
||||||
|
"manifestVersion": 2,
|
||||||
|
|
||||||
|
// If true, the component can only be installed on sites where Custom Script is allowed.
|
||||||
|
// Components that allow authors to embed arbitrary script code should set this to true.
|
||||||
|
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
|
||||||
|
"requiresCustomScript": false,
|
||||||
|
|
||||||
|
"preconfiguredEntries": [{
|
||||||
|
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
|
||||||
|
"group": { "default": "Other" },
|
||||||
|
"title": { "default": "Real Time List" },
|
||||||
|
"description": { "default": "get the last changes in real time" },
|
||||||
|
"officeFabricIconFontName": "News",
|
||||||
|
"properties": {
|
||||||
|
"description": "RealTimeList"
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import * as ReactDom from 'react-dom';
|
||||||
|
import { Version } from '@microsoft/sp-core-library';
|
||||||
|
import {
|
||||||
|
BaseClientSideWebPart,
|
||||||
|
IPropertyPaneConfiguration,
|
||||||
|
PropertyPaneTextField
|
||||||
|
} from '@microsoft/sp-webpart-base';
|
||||||
|
|
||||||
|
import * as strings from 'RealTimeListWebPartStrings';
|
||||||
|
import RealTimeList from './components/RealTimeList';
|
||||||
|
import { IRealTimeListProps } from './components/IRealTimeListProps';
|
||||||
|
import pnp from "sp-pnp-js";
|
||||||
|
|
||||||
|
export interface IRealTimeListWebPartProps {
|
||||||
|
socketserverurl: string;
|
||||||
|
siteUrl: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class RealTimeListWebPart extends BaseClientSideWebPart<IRealTimeListWebPartProps> {
|
||||||
|
|
||||||
|
// Ovverriding onInit in order to set up the sp pnp js with the web part context
|
||||||
|
public onInit(): Promise<void> {
|
||||||
|
return super.onInit().then(_ => {
|
||||||
|
// establish SPFx context
|
||||||
|
pnp.setup({
|
||||||
|
spfxContext: this.context
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): void {
|
||||||
|
const element: React.ReactElement<IRealTimeListProps > = React.createElement(
|
||||||
|
RealTimeList,
|
||||||
|
{
|
||||||
|
socketserverurl: this.properties.socketserverurl,
|
||||||
|
siteUrl: this.context.pageContext.web.absoluteUrl
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
ReactDom.render(element, this.domElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected get dataVersion(): Version {
|
||||||
|
return Version.parse('1.0');
|
||||||
|
}
|
||||||
|
|
||||||
|
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||||
|
return {
|
||||||
|
pages: [
|
||||||
|
{
|
||||||
|
header: {
|
||||||
|
description: strings.PropertyPaneDescription
|
||||||
|
},
|
||||||
|
groups: [
|
||||||
|
{
|
||||||
|
groupName: strings.BasicGroupName,
|
||||||
|
groupFields: [
|
||||||
|
PropertyPaneTextField('socketserverurl', {
|
||||||
|
label: strings.SocketserverurlFieldLabel
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
protected get disableReactivePropertyChanges(): boolean {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
export interface IRealTimeListProps {
|
||||||
|
socketserverurl: string;
|
||||||
|
siteUrl: string;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import {
|
||||||
|
IColumn
|
||||||
|
} from 'office-ui-fabric-react/lib/DetailsList';
|
||||||
|
|
||||||
|
export interface IRealTimeListState {
|
||||||
|
sortedItems?: any[];
|
||||||
|
columns?: IColumn[];
|
||||||
|
loading?: boolean;
|
||||||
|
newsFeed?: string;
|
||||||
|
newsFeedVisible?: boolean;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
.realTimeList {
|
||||||
|
.container {
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0px auto;
|
||||||
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
padding: 0;//20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItem {
|
||||||
|
max-width: 715px;
|
||||||
|
margin: 5px auto 5px auto;
|
||||||
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
// Our button
|
||||||
|
text-decoration: none;
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
|
// Primary Button
|
||||||
|
min-width: 80px;
|
||||||
|
background-color: "[theme:themePrimary, default:#0078d7]";
|
||||||
|
border-color: "[theme:themePrimary, default:#0078d7]";
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
// Basic Button
|
||||||
|
outline: transparent;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
border-width: 0;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 16px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin: 0 4px;
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,270 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import styles from './RealTimeList.module.scss';
|
||||||
|
import { IRealTimeListProps } from './IRealTimeListProps';
|
||||||
|
import { IRealTimeListState } from './IRealTimeListState';
|
||||||
|
import { escape } from '@microsoft/sp-lodash-subset';
|
||||||
|
import pnp from "sp-pnp-js";
|
||||||
|
import { Web } from "sp-pnp-js";
|
||||||
|
import * as io from 'socket.io-client';
|
||||||
|
import { createListItems } from '@uifabric/example-app-base';
|
||||||
|
import { autobind } from 'office-ui-fabric-react/lib/Utilities';
|
||||||
|
import { Link } from 'office-ui-fabric-react/lib/Link';
|
||||||
|
import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image';
|
||||||
|
import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
|
||||||
|
import { Label } from 'office-ui-fabric-react/lib/Label';
|
||||||
|
import {
|
||||||
|
DetailsList,
|
||||||
|
buildColumns,
|
||||||
|
IColumn
|
||||||
|
} from 'office-ui-fabric-react/lib/DetailsList';
|
||||||
|
import {
|
||||||
|
Spinner,
|
||||||
|
SpinnerSize
|
||||||
|
} from 'office-ui-fabric-react/lib/Spinner';
|
||||||
|
import * as moment from 'moment';
|
||||||
|
|
||||||
|
let _items: any[];
|
||||||
|
let _lastQueryDate: moment.Moment;
|
||||||
|
|
||||||
|
export interface IList {
|
||||||
|
Id: number;
|
||||||
|
Title: string;
|
||||||
|
SPFxDescription: string;
|
||||||
|
SPFxThumbnail: ITumbnailUrl;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ITumbnailUrl {
|
||||||
|
Url: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class RealTimeList extends React.Component<IRealTimeListProps, IRealTimeListState> {
|
||||||
|
public componentDidMount(): void {
|
||||||
|
if (this.props.socketserverurl != null && this.props.socketserverurl != "" && this.props.socketserverurl !== undefined) {
|
||||||
|
this._connectSocket(this.props.socketserverurl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
public componentWillReceiveProps(nextProps: IRealTimeListProps): void {
|
||||||
|
if (nextProps.socketserverurl != null && nextProps.socketserverurl != "" && nextProps.socketserverurl !== undefined) {
|
||||||
|
this._connectSocket(nextProps.socketserverurl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
constructor(props: IRealTimeListProps, state: IRealTimeListState) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
_items = [];
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
sortedItems: _items,
|
||||||
|
columns: _buildColumns(),
|
||||||
|
loading: true
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): React.ReactElement<IRealTimeListProps> {
|
||||||
|
if (this.props.siteUrl.toLowerCase().indexOf("wwww.contoso.com") >= 0
|
||||||
|
|| this.props.socketserverurl === undefined || this.props.socketserverurl === "") {
|
||||||
|
return (
|
||||||
|
<div className={styles.realTimeList}>
|
||||||
|
<div className={styles.container}>
|
||||||
|
<div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
|
||||||
|
<div className="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
|
||||||
|
<span className="ms-font-xl ms-fontColor-white">Connect the web part with SharePoint and configuring it before to begin</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
let { sortedItems, columns } = this.state;
|
||||||
|
const loading: JSX.Element = (this.state.loading == true) ? <Spinner size={SpinnerSize.large} /> : null;
|
||||||
|
const list: JSX.Element = (this.state.loading == false) ?
|
||||||
|
<DetailsList
|
||||||
|
items={sortedItems as any[]}
|
||||||
|
setKey='set'
|
||||||
|
columns={columns}
|
||||||
|
onRenderItemColumn={_renderItemColumn}
|
||||||
|
onColumnHeaderClick={this._onColumnClick}
|
||||||
|
onItemInvoked={this._onItemInvoked}
|
||||||
|
onColumnHeaderContextMenu={this._onColumnHeaderContextMenu}
|
||||||
|
/>
|
||||||
|
: null;
|
||||||
|
const newsFeed: JSX.Element =
|
||||||
|
this.state.newsFeedVisible == true ?
|
||||||
|
<DefaultButton
|
||||||
|
text={this.state.newsFeed}
|
||||||
|
onClick={() => this._loadList()}
|
||||||
|
/>
|
||||||
|
: null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.realTimeList}>
|
||||||
|
<div className={styles.container}>
|
||||||
|
<div className={`ms-Grid-row ms-bgColor-white ms-fontColor-white ${styles.row}`}>
|
||||||
|
<div className="ms-Grid-col ms-lg6 ms-xl6 ms-xlPush5 ms-lgPush5">
|
||||||
|
{newsFeed}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={`ms-Grid-row ms-bgColor-white ms-fontColor-white ${styles.row}`}>
|
||||||
|
<div className="ms-Grid-col ms-lg12 ms-xl12">
|
||||||
|
{loading}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={`ms-Grid-row ms-bgColor-white ms-fontColor-white ${styles.row}`}>
|
||||||
|
<div className="ms-Grid-col ms-lg12 ms-xl12">
|
||||||
|
{list}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
private toTicks(date: moment.Moment): number {
|
||||||
|
return (date.valueOf() * 10000) + 621355968000000000;
|
||||||
|
}
|
||||||
|
private async _connectSocket(socketServerUrl: string) {
|
||||||
|
// Connect to the server
|
||||||
|
const socket = io(socketServerUrl);
|
||||||
|
// Add the socket io listeners
|
||||||
|
socket.on('list:changes', (data) => {
|
||||||
|
this._getListChanges(data);
|
||||||
|
console.log(JSON.stringify(data));
|
||||||
|
});
|
||||||
|
await this._loadList();
|
||||||
|
}
|
||||||
|
private async _getListChanges(dataWebhooks: any): Promise<void> {
|
||||||
|
let dataParsed = JSON.parse(dataWebhooks);
|
||||||
|
let resource = dataParsed[0].resource;
|
||||||
|
let changeToken = `1;3;${resource};${this.toTicks(_lastQueryDate)};-1`;
|
||||||
|
let changes = await pnp.sp.web.lists.getByTitle("Events").getChanges(
|
||||||
|
{
|
||||||
|
Add: true,
|
||||||
|
Item: true,
|
||||||
|
ChangeTokenStart: { StringValue: changeToken }
|
||||||
|
});
|
||||||
|
console.log(changes);
|
||||||
|
console.log(_lastQueryDate);
|
||||||
|
console.log(_items.length);
|
||||||
|
if (changes.length > 0) {
|
||||||
|
let newsFeedText = (changes.length == 1) ? changes.length + " new item" : changes.length + " new items";
|
||||||
|
this.setState({
|
||||||
|
newsFeedVisible: true,
|
||||||
|
newsFeed: newsFeedText
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
private async _loadList(): Promise<void> {
|
||||||
|
this.setState({
|
||||||
|
loading: true
|
||||||
|
});
|
||||||
|
let items = await pnp.sp.web.lists.getByTitle("Events").items.select("Id", "Title", "SPFxDescription", "SPFxThumbnail")
|
||||||
|
.orderBy("Modified", false).get();
|
||||||
|
_items = items.map((item: IList, index: number) => {
|
||||||
|
return {
|
||||||
|
thumbnail: item.SPFxThumbnail != null ? item.SPFxThumbnail.Url : "",
|
||||||
|
key: item.Id,
|
||||||
|
name: item.Title,
|
||||||
|
description: item.SPFxDescription
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.setState({
|
||||||
|
sortedItems: _items,
|
||||||
|
columns: _buildColumns(),
|
||||||
|
loading: false,
|
||||||
|
newsFeedVisible: false
|
||||||
|
});
|
||||||
|
_lastQueryDate = moment();
|
||||||
|
}
|
||||||
|
private _getListItems(count: number, startIndex: number = 0): any {
|
||||||
|
// get all the items from a list
|
||||||
|
pnp.sp.web.lists.getByTitle("Events").items.get().then((items: any[]) => {
|
||||||
|
console.log(items);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
@autobind
|
||||||
|
private _onColumnClick(event: React.MouseEvent<HTMLElement>, column: IColumn) {
|
||||||
|
let { sortedItems, columns } = this.state;
|
||||||
|
let isSortedDescending = column.isSortedDescending;
|
||||||
|
|
||||||
|
// If we've sorted this column, flip it.
|
||||||
|
if (column.isSorted) {
|
||||||
|
isSortedDescending = !isSortedDescending;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sort the items.
|
||||||
|
sortedItems = sortedItems!.concat([]).sort((a, b) => {
|
||||||
|
let firstValue = a[column.fieldName];
|
||||||
|
let secondValue = b[column.fieldName];
|
||||||
|
|
||||||
|
if (isSortedDescending) {
|
||||||
|
return firstValue > secondValue ? -1 : 1;
|
||||||
|
} else {
|
||||||
|
return firstValue > secondValue ? 1 : -1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reset the items and columns to match the state.
|
||||||
|
this.setState({
|
||||||
|
sortedItems: sortedItems,
|
||||||
|
columns: columns!.map(col => {
|
||||||
|
col.isSorted = (col.key === column.key);
|
||||||
|
|
||||||
|
if (col.isSorted) {
|
||||||
|
col.isSortedDescending = isSortedDescending;
|
||||||
|
}
|
||||||
|
|
||||||
|
return col;
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private _onColumnHeaderContextMenu(column: IColumn | undefined, ev: React.MouseEvent<HTMLElement> | undefined): void {
|
||||||
|
console.log(`column ${column!.key} contextmenu opened.`);
|
||||||
|
}
|
||||||
|
|
||||||
|
private _onItemInvoked(item: any, index: number | undefined): void {
|
||||||
|
alert(`Item ${item.name} at index ${index} has been invoked.`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function _buildColumns() {
|
||||||
|
if (_items.length == 0) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
let columns = buildColumns(_items);
|
||||||
|
|
||||||
|
let thumbnailColumn = columns.filter(column => column.name === 'thumbnail')[0];
|
||||||
|
// Special case one column's definition.
|
||||||
|
thumbnailColumn.name = '';
|
||||||
|
thumbnailColumn.maxWidth = 100;
|
||||||
|
|
||||||
|
let keyColumn = columns.filter(column => column.name === 'key')[0];
|
||||||
|
keyColumn.maxWidth = 100;
|
||||||
|
|
||||||
|
let nameColumn = columns.filter(column => column.name === 'name')[0];
|
||||||
|
nameColumn.maxWidth = 200;
|
||||||
|
|
||||||
|
let descriptionColumn = columns.filter(column => column.name === 'description')[0];
|
||||||
|
descriptionColumn.maxWidth = 300;
|
||||||
|
|
||||||
|
return columns;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _renderItemColumn(item: any, index: number, column: IColumn) {
|
||||||
|
let fieldContent = item[column.fieldName];
|
||||||
|
|
||||||
|
switch (column.key) {
|
||||||
|
case 'thumbnail':
|
||||||
|
return <Image src={fieldContent} width={50} height={50} imageFit={ImageFit.cover} />;
|
||||||
|
|
||||||
|
case 'name':
|
||||||
|
return <Link href='#'>{fieldContent}</Link>;
|
||||||
|
|
||||||
|
case 'color':
|
||||||
|
return <span data-selection-disabled={true} style={{ color: fieldContent }}>{fieldContent}</span>;
|
||||||
|
|
||||||
|
default:
|
||||||
|
return <span>{fieldContent}</span>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
define([], function() {
|
||||||
|
return {
|
||||||
|
"PropertyPaneDescription": "Description",
|
||||||
|
"BasicGroupName": "Configuration Panel",
|
||||||
|
"SocketserverurlFieldLabel": "Insert the Socket.IO server URL"
|
||||||
|
}
|
||||||
|
});
|
||||||
10
samples/react-webhooks-realtime/src/webparts/realTimeList/loc/mystrings.d.ts
vendored
Normal file
10
samples/react-webhooks-realtime/src/webparts/realTimeList/loc/mystrings.d.ts
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
declare interface IRealTimeListWebPartStrings {
|
||||||
|
PropertyPaneDescription: string;
|
||||||
|
BasicGroupName: string;
|
||||||
|
SocketserverurlFieldLabel: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module 'RealTimeListWebPartStrings' {
|
||||||
|
const strings: IRealTimeListWebPartStrings;
|
||||||
|
export = strings;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
/// <reference types="mocha" />
|
||||||
|
|
||||||
|
import { assert } from 'chai';
|
||||||
|
|
||||||
|
describe('RealTimeListWebPart', () => {
|
||||||
|
it('should do something', () => {
|
||||||
|
assert.ok(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"module": "commonjs",
|
||||||
|
"jsx": "react",
|
||||||
|
"declaration": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"types": [
|
||||||
|
"es6-promise",
|
||||||
|
"es6-collections",
|
||||||
|
"webpack-env"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
// Type definitions for Microsoft ODSP projects
|
||||||
|
// Project: ODSP
|
||||||
|
|
||||||
|
/* Global definition for UNIT_TEST builds
|
||||||
|
Code that is wrapped inside an if(UNIT_TEST) {...}
|
||||||
|
block will not be included in the final bundle when the
|
||||||
|
--ship flag is specified */
|
||||||
|
declare const UNIT_TEST: boolean;
|
||||||
|
|
||||||
|
/* Global defintion for SPO builds */
|
||||||
|
declare const DATACENTER: boolean;
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference path="@ms/odsp.d.ts" />
|
||||||
Loading…
Reference in New Issue