Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.
Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.

O365

VIDEO – Azure CICD Pipeline with SP Framework (SPFX)

Below end to end demonstration of creating SharePoint Framework (SPFX 1.9) with Azure Dev Ops (ADO) code repository to hold original source.  ADO uses for source code repositry (repo) to hold the SPFX project code.

From there, ADO “Build” creates SPPKG dynamically with a Ubuntu container VM that employs NODE and NPM install to load all dependency.   Centralized container build has the benefit of uniform consistency.   No developer workstation configurations.   No server setting inconsistency.

Finally ADO “Release” copies the SPPKG into SharePoint Online App Catalog with Office 365 Command Line Interface (CLI).   From there, it can be added to page on sites across the O365 Tenant.

Cheers. 

shades_smile

Video

Screenshots

image
image
image
image
image
image
image
SNAGHTMLe61d4d

References

Code – Build Pipeline YAML

pool:
  name: Azure Pipelines
steps:
- task: NodeTool@0
  displayName: 'Use Node 10.x'
  inputs:
    versionSpec: 10.x
    checkLatest: true
- task: Npm@1
  displayName: 'npm install'
  inputs:
    verbose: false
- task: Npm@1
  displayName: 'npm test'
  inputs:
    command: custom
    verbose: false
    customCommand: test
- task: PublishTestResults@2
  displayName: 'Publish Test Results temp/test/junit/junit.xml'
  inputs:
    testResultsFiles: temp/test/junit/junit.xml
    searchFolder: '$(Build.SourcesDirectory)'
- task: PublishCodeCoverageResults@1
  displayName: 'Publish code coverage from $(Build.SourcesDirectory)/temp/test/cobertura-coverage.xml'
  inputs:
    codeCoverageTool: Cobertura
    summaryFileLocation: '$(Build.SourcesDirectory)/temp/test/cobertura-coverage.xml'
    reportDirectory: '$(Build.SourcesDirectory)/temp/test'
- task: Gulp@0
  displayName: 'gulp bundle'
  inputs:
    targets: bundle
    arguments: '--ship'
    publishJUnitResults: true
- task: Gulp@0
  displayName: 'gulp package-solution'
  inputs:
    targets: 'package-solution'
    arguments: '--ship'
- script: 'dir sharepoint/solution/*.sppkg'
  displayName: DIR
- task: CopyFiles@2
  displayName: 'Copy Files to: $(build.artifactstagingdirectory)/drop'
  inputs:
    Contents: 'sharepoint/solution/*.sppkg'
    TargetFolder: '$(build.artifactstagingdirectory)/drop'
- task: PublishBuildArtifacts@1
  displayName: 'Publish artifacts: drop'
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)/drop'

Code – Release Pipeline YAML

steps:
- task: NodeTool@0
   displayName: 'Use Node 10.x'
   inputs:
     versionSpec: 10.x
steps:
- task: Npm@1
   displayName: 'npm custom'
   inputs:
     command: custom
     verbose: false
     customCommand: 'install -g @pnp/office365-cli'
#Your build pipeline references a secret variable named ‘password’. Create or edit the build pipeline for this YAML file, define the variable on the Variables tab, and then select the option to make it secret. See https://go.microsoft.com/fwlink/?linkid=865972 variables: tenant: 'spjeff' catalogsite: 'sites/catalog' username: 'spjeff@spjeff.com' steps: - script: 'o365 spo login https://$(tenant).sharepoint.com/$(catalogsite) --authType password --userName $(username) --password $(password)' displayName: 'Command Line Script'
steps: - script: 'o365 spo app add -p $(System.DefaultWorkingDirectory)/SPFX-CICD/drop/sharepoint/solution/code.sppkg --overwrite' displayName: 'Command Line Script'
variables: tenant: 'spjeff' catalogsite: 'sites/catalog' steps: - script: 'o365 spo app deploy --name code.sppkg --appCatalogUrl https://$(tenant).sharepoint.com/$(catalogsite)' displayName: 'Command Line Script'

Modern Page – NEW Web Parts

Recently Microsoft added more choices when adding a Web Part to SharePoint Online Modern pages.

We now have the “Divider” and “Spacer” which control page layout with either a horizontal rule (Divider) or white space (Spacer) between other web parts.   Simple but helpful addition.

clip_image002

clip_image002[4]

Also, Modern pages now include a “Promote” button that provides a right task pane with options to Add to Navigation, Post as News, or Email to inform a wider audience and build traffic.  Cheers!

shades_smile

asdf

References

FIXED – SharePoint Online missing Quick Edit

While troubleshooting OneDrive I noticed an end user missing the “Quick edit” toolbar button.  The fix was to update Document Library view to display  a custom column so that we have data which can be edited.  The default view with only system read-only columns does not support “Quick edit.”

Cheers!

shades_smile_thumb

Steps

  • Document Library (View) > Modify View > Add a custom column > OK
  • Refresh view to see Quick Edit on Toolbar

Screenshots

1
2

FIXED – SharePoint Online missing Sync button

While troubleshooting OneDrive I noticed an end user missing the “Sync” toolbar button.  The fix was to update Document Library settings to display “Sync” so that we could connect and take the Document Library offline.   After clicking “Sync” we were able to connect to the OneDrive desktop client and download all files.

Cheers!

shades_smile

Steps

  • Document Library (Classic View) -> List Settings > Advanced settings > Offline Client Availability >
  • Allow items from this document library to be downloaded to offline clientsYES

Screenshot

clip_image002
clip_image002[4]

© Copyright 2016
@ SPJeff

Return to Top ▲Return to Top ▲