honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into hotfix/fix_attachment_not_cleared

This commit is contained in:
Hugo Bernier 2021-05-17 12:13:52 -04:00 committed by GitHub
parent 39d8cb44e8 da3f8b3ce3
commit c5f2456c44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1181 changed files with 354880 additions and 5915 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
.github/ISSUE_TEMPLATE/bug-report.yml vendored Normal file
View File

@ -0,0 +1,164 @@
name: 🐞 Bug or error report
description: Report an anomaly or unexpected behavior with a sample from this repository.
labels: ['Needs: Triage :mag:', 'type:bug-suspected']
body:
- type: markdown
attributes:
value: |
- [x] Bug
Thank you for reporting a bug! Use the sections below to submit a bug ONLY if it's related to samples in this repo. If you have an issue or question about the SharePoint Framework or its documentation, please submit it at https://aka.ms/spdev-issues.
- Follow our guidance on [How To Create Good Issues](https://github.com/pnp/sp-dev-fx-webparts/wiki/How-to-Create-Good-Issues).
- All bug reports are welcome - we want to fix them!
- This repo is maintained by volunteers. Please be courteous and patient. 🙂
- Remember to include sufficient details and context.
- If you have multiple questions, suggestions, or bugs, please submit them in separate issues.
- We accept pull requests. If you know how to fix it - go ahead! If you know how to make it - go ahead! If you're unsure how to do a pull request, consider signing up for a free [Sharing is Caring First-Time Contributor](http://aka.ms/sharing-is-caring#pnp-sic-first-time-contributor) session.
Please provide the following details about the issue you encountered. *Issues that do not provide the information requested in this form will be flagged as **incomplete** & automatically closed.*
- type: input
id: sample
validations:
required: true
attributes:
label: Sample
description: |
Which sample are you having troubles with?
Use the sample name or URL. We don't want to be spend all this time diagnosing issues about the wrong sample, do we?
- type: input
id: authors
validations:
required: true
attributes:
label: Author(s)
description: |
Who wrote the sample?
Because of the way this repository is configured, samples authors do not get a notification when you create an issue.
For the section above **@mention any author of the sample**. Authors' GitHub handle can be found on the main sample documentation page, under the "Solution" section.
Issues without an @mention will be closed automatically, as authors won't get notified.
**NOTE:** Don't @mention the repo maintainers, they already get notified.
- type: markdown
attributes:
value: |
Provide a clear & concise description of what the bug is. Please follow our guidance on [How To Create Good Issues](https://github.com/pnp/sp-dev-fx-webparts/wiki/How-to-Create-Good-Issues) which explains how to apply formatting, adding references & resources, screenshots, etc.
**Do not attach ZIP files** of your code or compiled projects - instead, please publish your code to a public GitHub repo & post a link to it.
- type: textarea
id: what-happened
attributes:
label: What happened?
description: Describe the observed behavior
placeholder: Tell us what you see!
validations:
required: true
- type: textarea
id: steps
attributes:
label: Steps to reproduce
description: How do you reproduce this? Please provide as much step-by-step detail as possible.
value: |
1.
2.
3.
validations:
required: true
- type: textarea
id: expected
attributes:
label: Expected behavior
description: What did you expect to happen when the reproduce steps are followed?
placeholder: Tell us what you expected to see!
validations:
required: true
- type: markdown
attributes:
value: |
When solving bugs, most time is spent going back and forth with the issue author asking for more information about their environment.
Save yourself some time (and those who are trying to help you); provide us with your environment information so we can reproduce the issue.
We're not trying to be difficult here, we just want to help as quickly as possible.
- type: dropdown
id: sharepoint-version
validations:
required: true
attributes:
label: Target SharePoint environment
options:
- SharePoint Online
- SharePoint Server 2019 (on-premise)
- SharePoint Server 2016 (on-premise)
- type: dropdown
id: environment-os
attributes:
label: Developer environment
options:
- Windows
- macOS
- Linux
- type: checkboxes
id: browsers
attributes:
label: Browsers
description: |
What browser(s) / client(s) have you tested
Select the browser(s)/clients this submission is relevant to.
options:
- label: Internet Explorer
- label: Microsoft Edge
- label: Google Chrome
- label: FireFox
- label: Safari
- label: mobile (iOS/iPadOS)
- label: mobile (Android)
- label: not applicable
- label: other (enter in the "Additional environment details" area below)
- type: input
id: spfx
validations:
required: true
attributes:
label: SPFx version
placeholder: 1.11.0
description: |
Which version of SPFx are you using?
TIP: To find out, run `npm ls -g --depth=0 @microsoft/generator-sharepoint` and provide the number that comes after `@microsoft/generator-sharepoint@`
- type: input
id: Node
validations:
required: true
attributes:
label: Node.js version
placeholder: v10.23.1
description: |
Which version of Node.js are you using?
TIP: To find out, run `node -v`
- type: textarea
id: moar
attributes:
label: Additional environment details
description: Include as much detail about the environment you're targeting. This is required if "other (enter below)" is selected in the previous field.

84
.github/ISSUE_TEMPLATE/bug.md vendored
View File

@ -1,84 +0,0 @@
---
name: "\U0001F41E Bug"
about: Report an anomaly or unexpected behavior with a sample from this repository.
title: '[Web Part Name]: [Issue Title]'
labels: type:bug
assignees: ''
---
Thank you for reporting a bug! Use the sections below to submit a bug ONLY if it's related to samples in this repo. If you have an issue or question about the SharePoint Framework or its documentation, please submit it at https://aka.ms/spdev-issues
- Bugs that do not follow the below template will automatically be closed
- All bug reports are welcome - we want to fix them!
- This repo is maintained by volunteers (not Microsoft). Please be courteous and patient. 🙂
- Include sufficient details and context.
- If you have multiple bugs please submit them separately so we can track resolution.
- Screenshots are always helpful (just paste any images right here in the bug report)
- We accept pull requests. If you know how to fix it - go ahead!
DELETE EVERYTHING ABOVE AFTER READING - THANKS!
## Sample
> Which sample are you having trouble with?
>
> Issues without a sample name will be closed automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
## Authors
> Because of the way this repository is configured, samples authors do not get a notification when you create an issue. *It makes it less likely for you to get your issue resolved or to get help*. For the section above **@mention any author of the sample**. Authors' GitHub handle can be found on the main sample documentation page, under the "solution" section. Use the `PREVIEW` tab at the top right to preview the rendering before submitting your issue.
>
> The author's name can be found in the sample's `README.md` file, under **Authors**.
>
> Issues without an author will be closed automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
## Expected or Desired Behavior
> What should it do?
>
> Issues without an expected behavior will be closed automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
## Observed Behavior
> What does it do?
>
> Issues without an observed behavior will be closed automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
## Steps to Reproduce
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
> Issues without an steps to reproduce will be closed automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
# Environment Details (*Development & Target environment*)
- **OS**: [e.g. Windows 10 | MacOS 10.15.x]
- **Target Environment**: [e.g. SharePoint Server 2016 | SharePoint Server 2019 | SharePoint Online]
- **Framework**: [e.g. .NET Framework v3.x | .NET Core v3.x | Node.js v6/v8/v10/v12]
- **Browser(s)**: [e.g. Chrome v79 | Safari v22 | FireFox v31 | IE v11 | Edge | Chromium Edge v79]
- **Tooling**: [e.g. VS Code | SPFx v1.10.0 | Visual Studio 2019]
- **Additional details**: *The more context you can provide, the easier it is (and therefore quicker) to help.*
> Issues without environment details will be closed automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
## Additional context

43
.github/ISSUE_TEMPLATE/enhancement.md vendored
View File

@ -1,43 +0,0 @@
---
name: "\U0001F4A1 Suggestion"
about: Suggest an enhancement to make one of our web part samples even better
title: '[Web Part Name]: [Suggestion Title]'
labels: type:enhancement
assignees: ''
---
Thank you for your suggestion! Use the sections below to submit a suggestion ONLY if it's related to samples in this repo. If you have an issue or question about the SharePoint Framework or its documentation, please submit it at https://aka.ms/spdev-issues
- Suggestions that do not follow the below template will automatically be closed
- All ideas are welcome - let's build something together!
- This repo is maintained by volunteers (not Microsoft). Please be courteous and patient. 🙂
- Include sufficient details and context.
- If you have multiple suggestions please submit them separately so we can track resolution.
- Screenshots are always helpful (just paste any images right here in the suggestion)
DELETE EVERYTHING ABOVE AFTER READING - THANKS!
## Sample
> Which sample are you talking about
>
> Suggestions without a sample name will be closed automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
## Authors
> Because of the way this repository is configured, samples authors do not get a notification when you create an issue. *It makes it less likely for you to get your issue resolved or to get help*. For the section above **@mention any author of the sample**. The authors' GitHub handle can be found on the main sample documentation page, under the "solution" section. Use the `PREVIEW` tab at the top right to preview the rendering before submitting your issue.
>
> The authors can be found in the sample's `README.md` file, under **Authors**
>
> Suggestions without an author will be closed automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
## Suggestion
> The more details, the better
>
> _(DELETE THIS PARAGRAPH AFTER READING)_

44
.github/ISSUE_TEMPLATE/question.md vendored
View File

@ -1,44 +0,0 @@
---
name: "❓ Question"
about: Ask a question about one of our web part samples
title: ''
labels: type:question
assignees: ''
---
Thank you for asking a question! Use the sections below to submit a question ONLY if it's related to samples in this repo. If you have an issue or question about the SharePoint Framework or its documentation, please submit it at https://aka.ms/spdev-issues
- Questions that do not follow the below template will automatically be closed
- All questions are welcome - let us know what's on your mind!
- This repo is maintained by volunteers (not Microsoft). Please be courteous and patient. 🙂
- Include sufficient details and context.
- If you have multiple questions please submit them separately so we can track resolution.
- Screenshots are always helpful (just paste any images right here in the question)
- If you're trying to start a conversation on a topic, consider using [Discussions](https://github.com/pnp/sp-dev-fx-webparts/discussions). We want to close every issue as quickly as possible, but discussions are intended for longer conversations.
DELETE EVERYTHING ABOVE AFTER READING - THANKS!
## Sample (which sample are you talking about)
> Questions without a sample name will be rejected automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
## Authors
> Because of the way this repository is configured, samples authors do not get a notification when you create an issue. *It makes it less likely for you to get your issue resolved or to get help*. For the section above **@mention any author of the sample**. The authors' GitHub handle can be found on the main sample documentation page, under the "solution" section. Use the `PREVIEW` tab at the top right to preview the rendering before submitting your issue.
>
> Questions without an author will be rejected automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
## Question
> The more details, the better
>
> _(DELETE THIS PARAGRAPH AFTER READING)_

56
.github/ISSUE_TEMPLATE/question.yml vendored Normal file
View File

@ -0,0 +1,56 @@
name: ❓ Question
description: Ask a question about one of our web part samples
labels: ['Needs: Triage :mag:', 'type:question']
body:
- type: markdown
attributes:
value: |
Thank you for asking a question! Use the sections below to submit a question ONLY if it's related to samples in this repo. If you have an issue or question about the SharePoint Framework or its documentation, please submit it at https://aka.ms/spdev-issues
- Questions that do not follow the below template will automatically be closed
- Don't use questions to diagnose issues with samples, that's what [bug reports](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml) are for!
- All questions are welcome - let us know what's on your mind!
- This repo is maintained by volunteers. Please be courteous and patient. 🙂
- Remember to include sufficient details and context.
- If you have multiple questions please submit them separately so we can track resolution.
- Screenshots are always helpful (just paste any images right here in the question)
- If you're trying to start a conversation on a topic, consider using [Discussions](https://github.com/pnp/sp-dev-fx-webparts/discussions). We want to close every issue as quickly as possible, but discussions are intended for longer conversations.
- type: input
id: sample
validations:
required: true
attributes:
label: Sample
description: |
Which sample are you talking about
Use the sample name or URL.
- type: input
id: authors
validations:
required: true
attributes:
label: Author(s)
description: |
Who wrote the sample?
Because of the way this repository is configured, samples authors do not get a notification when you create an issue.
For the section above **@mention any author of the sample**. Authors' GitHub handle can be found on the main sample documentation page, under the "Solution" section.
Questions without an @mention will automatically be closed, because authors won't get notified.
**NOTE:** Don't @mention the repo maintainers, they already get notified.
- type: textarea
id: question
attributes:
label: Question
description: What would you like to know?
placeholder: The more details, the better
validations:
required: true

24
.github/ISSUE_TEMPLATE/samplerequest.md vendored
View File

@ -1,24 +0,0 @@
---
name: "\U0001F9EA Sample request"
about: Request a new sample from the community
title: ''
labels: type:sample-request
assignees: ''
---
Thank you for making a request! Use the sections below to submit a request ONLY for a new sample. If you have an issue or question about the SharePoint Framework or its documentation, please submit it at https://aka.ms/spdev-issues
- Requests that do not follow the below template will automatically be closed
- All requests are welcome - the more the merrier!
- This repo is maintained by volunteers (not Microsoft). Please be courteous and patient. 🙂
- If you have multiple requests submit them separately so we can track resolution.
- Screenshots are always helpful (just paste any images right here in the request)
- We accept pull requests. If you know how to make it - go ahead!
DELETE EVERYTHING ABOVE AFTER READING - THANKS!
## Sample Description (what should it do)
## Are you Willing to Help?

37
.github/ISSUE_TEMPLATE/samplerequest.yml vendored Normal file
View File

@ -0,0 +1,37 @@
name: "\U0001F9EA Sample request"
description: Request a new sample from the community
labels: ['Needs: Triage :mag:', 'type:sample-request', 'Help wanted 🪧']
body:
- type: markdown
attributes:
value: |
Thank you for making a request! Use the sections below to submit a request **only** for a new sample. If you have an issue or question about the SharePoint Framework or its documentation, please submit it at https://aka.ms/spdev-issues
- Requests that do not follow the below template will automatically be closed
- All requests are welcome - the more the merrier!
- This repo is maintained by volunteers. Please be courteous and patient. 🙂
- Remember to include sufficient details and context.
- If you have multiple requests submit them separately so we can track resolution.
- We accept pull requests. If you know how to make it - go ahead! If you're unsure how to do a pull request, consider signing up for a free [Sharing is Caring First-Time Contributor](http://aka.ms/sharing-is-caring#pnp-sic-first-time-contributor) session.
- type: textarea
id: description
attributes:
label: Sample description
description: What should the sample do?
placeholder: Tell us what you want, what you really, really want.
validations:
required: true
- type: dropdown
id: willing-to-help
attributes:
label: Are you willing to help?
description: Would you be willing to help whoever decides to take this on?
options:
- "Yes"
- "No"
validations:
required: true

64
.github/ISSUE_TEMPLATE/suggestion.yml vendored Normal file
View File

@ -0,0 +1,64 @@
name: 💡 Suggestion
description: Suggest an enhancement to make one of our web part samples even better
labels: ['Needs: Triage :mag:', 'type:enhancement']
body:
- type: markdown
attributes:
value: |
Thank you for your suggestion! Use the sections below to submit a suggestion ONLY if it's related to samples in this repo. If you have an issue or question about the SharePoint Framework or its documentation, please submit it at https://aka.ms/spdev-issues.
- Suggestions that do not follow the below template will automatically be closed
- All ideas are welcome - let's build something together!
- This repo is maintained by volunteers. Please be courteous and patient. 🙂
- Remember to include sufficient details and context.
- If you have multiple suggestions please submit them separately so we can track resolution.
- Screenshots are always helpful (just paste any images right here in the suggestion)
- type: input
id: sample
validations:
required: true
attributes:
label: Sample
description: |
Which sample are you talking about
Use the sample name or URL.
- type: input
id: authors
validations:
required: true
attributes:
label: Author(s)
description: |
Who wrote the sample?
Because of the way this repository is configured, samples authors do not get a notification when you create an issue.
For the section above **@mention any author of the sample**. Authors' GitHub handle can be found on the main sample documentation page, under the "Solution" section.
**NOTE:** Don't @mention the repo maintainers, they already get notified.
- type: textarea
id: suggestion
attributes:
label: Suggestion
description: What would you like to see improved?
placeholder: The more details, the better
validations:
required: true
- type: dropdown
id: willing-to-help
attributes:
label: Are you willing to help?
description: Would you be willing to help us make this improvement?
options:
- "Yes"
- "No"
validations:
required: true

7
.github/PULL_REQUEST_TEMPLATE.md vendored
View File

@ -1,3 +1,8 @@
> By submitting this pull request, you agree to the [contribution guidelines](https://github.com/pnp/sp-dev-fx-webparts/blob/main/CONTRIBUTING.md)
> If you aren't familiar with how to contribute to open-source repositories using GitHub, or if you find the instructions on this page confusing, [sign up](https://forms.office.com/Pages/ResponsePage.aspx?id=KtIy2vgLW0SOgZbwvQuRaXDXyCl9DkBHq4A2OG7uLpdUREZVRDVYUUJLT1VNRDM4SjhGMlpUNzBORy4u) for one of our [Sharing is Caring](https://pnp.github.io/sharing-is-caring/#pnp-sic-events) events. It's completely free, and we'll guide you through the process.
| Q | A |
| --------------- | --------------------------------------- |
| Bug fix? | no - yes? |
@ -17,7 +22,7 @@
>
> *Pull requests that do not follow this template will be automatically rejected.*
>
> *Please target your PR to `master` branch.*
> *Please target your PR to `main` branch.*
>
> *Remember that this repository is maintained by community members who volunteer their time to help. Be courteous and patient.*
> _(DELETE THIS SECTION AFTER READING)_

25
.github/label-actions.yml vendored Normal file
View File

@ -0,0 +1,25 @@
# Configuration for Label Actions - https://github.com/dessant/label-actions
# Actions taken when the `incomplete-submission` label is added to issues
incomplete-submission:
# Post a comment
comment: >
Thank you for your submission, but there isn't enough detail in the issue for us to review & move forward. The new issue template includes sections for you to fill out. Please resubmit your issue and complete the provided sections in the new item template so we can move forward on it refer to our wiki for more information: [How to Create Good Issues](https://github.com/pnp/sp-dev-fx-webparts/wiki/How-to-Create-Good-Issues)
# Close the issue
close: true
# Actions taken when the `incomplete-submission` label is added to issues
status:incomplete-submission:
# Post a comment
comment: >
Thank you for your submission, but there isn't enough detail in the issue for us to review & move forward. The new issue template includes sections for you to fill out. Please resubmit your issue and complete the provided sections in the new item template so we can move forward on it refer to our wiki for more information: [How to Create Good Issues](https://github.com/pnp/sp-dev-fx-webparts/wiki/How-to-Create-Good-Issues)
# Close the issue
close: true
# Actions taken when the `wrong-repo` label is added to issues
status:wrong-repo:
# Post a comment
comment: >
Thank you for your submission, but this issues list is intended only for issues related to the samples in this repository. For general SPFx development issues, you may want to try to create issues in the [SP-Dev-Docs repository](https://github.com/SharePoint/sp-dev-docs/issues/new)
# Close the issue
close: true

67
.github/workflows/codeql-analysis.yml vendored Normal file
View File

@ -0,0 +1,67 @@
# For most projects, this workflow file will not need changing; you simply need
# to commit it to your repository.
#
# You may wish to alter this file to override the set of languages analyzed,
# or to provide custom queries or build logic.
#
# ******** NOTE ********
# We have attempted to detect the languages in your repository. Please check
# the `language` matrix defined below to confirm you have the correct set of
# supported CodeQL languages.
#
name: "CodeQL"
on:
push:
branches: [ main ]
pull_request:
# The branches below must be a subset of the branches above
branches: [ main ]
schedule:
- cron: '33 2 * * 0'
jobs:
analyze:
name: Analyze
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
language: [ 'javascript' ]
# CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
# Learn more:
# https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
steps:
- name: Checkout repository
uses: actions/checkout@v2
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@v1
with:
languages: ${{ matrix.language }}
# If you wish to specify custom queries, you can do so here or in a config file.
# By default, queries listed here will override any specified in a config file.
# Prefix the list here with "+" to use these queries and those in the config file.
# queries: ./path/to/local/query, your-org/your-repo/queries@main
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
# If this step fails, then you should remove it and run the build manually (see below)
- name: Autobuild
uses: github/codeql-action/autobuild@v1
# ℹ️ Command-line programs to run using the OS shell.
# 📚 https://git.io/JvXDl
# ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
# and modify them (or add more) to build your code if your project
# uses a compiled language
#- run: |
# make bootstrap
# make release
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v1

14
.github/workflows/label-actions.yml vendored Normal file
View File

@ -0,0 +1,14 @@
name: 'Check for incomplete submissions'
on:
issues:
types: [labeled, unlabeled]
jobs:
reaction:
runs-on: ubuntu-latest
steps:
- uses: dessant/label-actions@v2
with:
github-token: ${{ github.token }}
process-only: 'issues'

44
.github/workflows/ossar-analysis.yml vendored Normal file
View File

@ -0,0 +1,44 @@
# This workflow integrates a collection of open source static analysis tools
# with GitHub code scanning. For documentation, or to provide feedback, visit
# https://github.com/github/ossar-action
name: OSSAR
on:
push:
branches: [ main ]
pull_request:
# The branches below must be a subset of the branches above
branches: [ main ]
schedule:
- cron: '36 20 * * 2'
jobs:
OSSAR-Scan:
# OSSAR runs on windows-latest.
# ubuntu-latest and macos-latest support coming soon
runs-on: windows-latest
steps:
- name: Checkout repository
uses: actions/checkout@v2
# Ensure a compatible version of dotnet is installed.
# The [Microsoft Security Code Analysis CLI](https://aka.ms/mscadocs) is built with dotnet v3.1.201.
# A version greater than or equal to v3.1.201 of dotnet must be installed on the agent in order to run this action.
# GitHub hosted runners already have a compatible version of dotnet installed and this step may be skipped.
# For self-hosted runners, ensure dotnet version 3.1.201 or later is installed by including this action:
# - name: Install .NET
# uses: actions/setup-dotnet@v1
# with:
# dotnet-version: '3.1.x'
# Run open source static analysis tools
- name: Run OSSAR
uses: github/ossar-action@v1
id: ossar
# Upload results to the Security tab
- name: Upload OSSAR results
uses: github/codeql-action/upload-sarif@v1
with:
sarif_file: ${{ steps.ossar.outputs.sarifFile }}

9
CODE_OF_CONDUCT.md Normal file
View File

@ -0,0 +1,9 @@
# Contributor Covenant Code of Conduct
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
For more information, see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
Remember that this repository is maintained by community members who volunteer their time to help. Be courteous and patient.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/CODE_OF_CONDUCT.md" />

94
.github/CONTRIBUTING.md → CONTRIBUTING.md
View File

@ -24,38 +24,82 @@ Whenever you are submitting any changes to the SharePoint repositories, please f
* Always fork the repository to your own account before making your modifications
* Do not combine multiple changes to one pull request. For example, submit any samples and documentation updates using separate PRs
* If your pull request shows merge conflicts, make sure to update your local master to be a mirror of what's in the main repo before making your modifications
* If your pull request shows merge conflicts, make sure to update your local main to be a mirror of what's in the main repo before making your modifications
* If you are submitting multiple samples, please create a specific PR for each of them
* If you are submitting typo or documentation fix, you can combine modifications to single PR where suitable
## Sample Naming and Structure Guidelines
When you are submitting a new sample, it has to follow up below guidelines
When you submit a new sample, please follow these guidelines:
* Each sample must be placed in a folder under the `samples` folder
* Your sample folder must include the following content:
- Your solution's source code
- An `assets` folder, containing screenshots
- A `README.md` file
* You must only submit samples for which you have the rights to share. Make sure that you asked for permission from your employer and/or clients before committing the code to an open-source repository, because once you submit a pull request, the information is public and _cannot be removed_.
### Sample Folder
* You will need to have a `README.md` file for your contribution, which is based on [the provided template](../samples/README-template.md) under the `samples` folder. Please copy this template to your project and update it accordingly. Your `README.md` must be named exactly `README.md` -- with capital letters -- as this is the information we use to make your sample public.
* You will need to have a screenshot picture of your sample in action in the `README.md` file ("pics or it didn't happen"). The preview image must be located in the `/assets/` folder in the root of your solution.
* The `README` template contains a specific tracking image at the bottom of the file with an `img` tag, where the `src` attribute points to `https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template`. This is a transparent image which is used to track viewership of individual samples in GitHub.
* Update the image `src` attribute according with the repository name and folder information. For example, if your sample is named `react-todo` in the `samples` folder, you should update the `src` attribute to `https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-todo`
* If you find an existing sample which is similar to yours, please extend the existing one rather than submitting a new similar sample
* For example, if you use Office Graph with React, please add a new web part to the existing solution, rather than introducing a completely new solution
* When you update existing samples, please update also `README.md` file accordingly with information on provided changes and with your author details
* When submitting a new sample solution, please name the sample solution folder accordingly
* Folder should start by identifying JS library used - like `react-`, `angular-`, `knockout-`
* If you are not using any specific JS library, please use `js-` as the prefix for your sample
* Do not use words such as `sample`, `webpart` or `wp` in the folder or sample name - these are samples for client-side web parts repository
* If your solution is demonstrating multiple technologies, please use functional terms as the name for the solution folder
* Folder should start by identifying JS library used - like `react-`, `angular-`, `knockout-`
* If you are not using any specific JS library, please use `js-` as the prefix for your sample
* Do not use words such as `sample`, `webpart` or `wp` in the folder or sample name - these are samples for client-side web parts repository
* If your solution is demonstrating multiple technologies, please use functional terms as the name for the solution folder
* Do not use period/dot in the folder name of the provided sample
### Source Code
* For security reasons, we do not accept pull requests containing `.sppkg` files. We only accept source code files for applications.
* Make sure to place the root of your solution's source code in sample folder
### README.md
* You will need to have a `README.md` file for your contribution, which is based on [the provided template](../samples/README-template.md) under the `samples` folder. Please copy this template to your project and update it accordingly. Your `README.md` must be named exactly `README.md` -- with capital letters -- as this is the information we use to make your sample public.
* You will need to have a screenshot picture of your sample in action in the `README.md` file ("pics or it didn't happen"). The preview image must be located in the `assets` folder in the root of your sample folder.
* All screen shots must be located in the `assets` folder. Do not point to your own repository or any other external source
* The README template contains a specific tracking image at the end of the file with an `img` element pointing to `https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template`. This is a transparent image which is used to track how many visits each sample receives in GitHub.
* Update the image `src` attribute according with the repository name and folder information. For example, if your sample is named `react-todo` in the `samples` folder, you should update the `src` attribute to `https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-todo`
* Update the image `src` attribute according with the repository name and folder information.
* If you find an existing sample which is similar to yours, please extend the existing one rather than submitting a new similar sample
* When you update existing samples, please update also `README.md` file accordingly with information on provided changes and with your author details
* Make sure to document each function in the `README.md`
* If you include your social media information under **Authors** in the **Solution** section, we'll use this information to promote your contribution on social media, blog posts, and community calls.
* Try to use the following syntax:
```md
folder name | Author Name ([@yourtwitterhandle](https://twitter.com/yourtwitterhandle))
```
* If you include your company name after your name, we'll try to include your company name in blog posts and community calls.
* Try to use the following syntax:
```md
folder name | Author Name ([@yourtwitterhandle](https://twitter.com/yourtwitterhandle)), Company Name
```
* For multiple authors, please provide one line per author
* If you prefer to not use social media or disclose your name, we'll still accept your sample, but we'll assume that you don't want us to promote your contribution on social media.
### Assets
* To help people make sense of your sample, make sure to always include at least one screenshot of your solution in action. People are more likely to click on a sample if they can preview it before installing it.
* Please provide a high-quality screenshot
* If possible, use a resolution of **1920x1080**
* You can add as many screen shots as you'd like to help users understand your sample without having to download it and install it.
* You can include animated images (such as `.gif` files), but you must provide at least one static `.png` file
* There is no need to include the steps where you find your web part and add it to a page. Just get to the good stuff!
## Submitting Pull Requests
> If you aren't familiar with how to contribute to open-source repositories using GitHub, or if you find the instructions on this page confusing, [sign up](https://forms.office.com/Pages/ResponsePage.aspx?id=KtIy2vgLW0SOgZbwvQuRaXDXyCl9DkBHq4A2OG7uLpdUREZVRDVYUUJLT1VNRDM4SjhGMlpUNzBORy4u) for one of our [Sharing is Caring](https://pnp.github.io/sharing-is-caring/#pnp-sic-events) events. It's completely free, and we'll guide you through the process.
Here's a high-level process for submitting new samples or updates to existing ones.
1. Sign the Contributor License Agreement (see below)
2. Fork this repository [pnp/sp-dev-fx-webparts](https://github.com/pnp/sp-dev-fx-webparts) to your GitHub account
3. Create a new branch from the `master` branch for your fork for the contribution
3. Create a new branch from the `main` branch for your fork for the contribution
4. Include your changes to your branch
5. Commit your changes using descriptive commit message * These are used to track changes on the repositories for monthly communications
6. Create a pull request in your own fork and target the `master` branch
6. Create a pull request in your own fork and target the `main` branch
7. Fill up the provided PR template with the requested details
Before you submit your pull request consider the following guidelines:
@ -77,7 +121,7 @@ Before you submit your pull request consider the following guidelines:
* Make your changes in a new git branch:
```shell
git checkout -b react-taxonomypicker master
git checkout -b react-taxonomypicker main
```
* Ensure your fork is updated and not behind the upstream **sp-dev-fx-webparts** repo. Refer to these resources for more information on syncing your repo:
@ -87,19 +131,19 @@ Before you submit your pull request consider the following guidelines:
```shell
# assuming you are in the folder of your locally cloned fork....
git checkout master
git checkout main
# assuming you have a remote named `upstream` pointing official **sp-dev-fx-webparts** repo
git fetch upstream
# update your local master to be a mirror of what's in the main repo
git pull --rebase upstream master
# update your local main to be a mirror of what's in the main repo
git pull --rebase upstream main
# switch to your branch where you are working, say "react-taxonomypicker"
git checkout react-taxonomypicker
# update your branch to update it's fork point to the current tip of master & put your changes on top of it
git rebase master
# update your branch to update it's fork point to the current tip of main & put your changes on top of it
git rebase main
```
* Push your branch to GitHub:
@ -125,19 +169,19 @@ If the sample you wish to contribute is stored in your own GitHub repository, yo
```shell
git remote add origin https://github.com/yourgitaccount/sp-dev-fx-webparts.git
git pull origin master
git pull origin main
```
* Pull your other project from GitHub into the `samples` folder of your local copy of `sp-dev-fx-webparts`
```shell
git subtree add --prefix=samples/projectname https://github.com/yourgitaccount/projectname.git master
git subtree add --prefix=samples/projectname https://github.com/yourgitaccount/projectname.git main
```
* Push the changes up to your forked repository
```shell
git push origin master
git push origin main
```
## Signing the CLA
@ -149,3 +193,5 @@ You can find Microsoft CLA from the following address - https://cla.microsoft.co
Thank you for your contribution.
> Sharing is caring.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/CONTRIBUTING.md" />

6
README.md
View File

@ -23,7 +23,7 @@ SharePoint client-side web parts are controls that appear inside a SharePoint pa
Please use following logic on submitting your questions or issues to right location to ensure that they are noticed and addressed as soon as possible.
* You have general question or challenge with SPFx - use [sp-dev-docs repository issue list](https://github.com/SharePoint/sp-dev-docs/issues).
* You have issue on specific web part or sample - use [issue list in this repository](https://github.com/SharePoint/sp-dev-fx-webparts/issues).
* You have issue on specific web part or sample - use [issue list in this repository](https://github.com/pnp/sp-dev-fx-webparts/issues).
## Additional resources
@ -75,13 +75,13 @@ gulp serve
```
## Authors
This repository's contributors are all community members who volunteered their time to share code samples. Work is done as an open source community project, which each sample contained in their own solution.
This repository's contributors are all community members who volunteered their time to share code samples. Work is done as an open source community project, with each sample contained in their own solution.
## Contributions
These samples are direct from the feature teams, SharePoint PnP core team (http://aka.ms/m365pnp) or shared by the community. We welcome your input on issues and suggestions for new samples. We do also welcome community contributions around the client-side web parts. If you have any questions, just let us know.
Please have a look on our [Contribution Guidance](./.github/CONTRIBUTING.md) before submitting your pull requests, so that we can get your contribution processed as fast as possible.
Please have a look on our [Contribution Guidance](./CONTRIBUTING.md) before submitting your pull requests, so that we can get your contribution processed as fast as possible.
## Code of Conduct
This repository has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.

18
SECURITY.md Normal file
View File

@ -0,0 +1,18 @@
# Security Policy
## Disclaimer
**ALL SAMPLE CODE IN THIS REPOSITORY 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.**
---
## Supported Versions
All code samples in this repository are intended for education purposes only and should not be used directly in production without a proper security review from your organization's security team.
## Reporting a Vulnerability
To report a vulnerability, please [create an issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new/choose) and tag the issue as `vulnerability-suspected`.
Upon receipt of the issue, we will flag the sample as having a suspected vulnerability and request the support from the community to identify and resolve, if possible, the issue.

41
SUPPORT.md Normal file
View File

@ -0,0 +1,41 @@
# Support Guidelines
The SPFx web part samples repository is maintained by the [Patterns and Practices](https://aka.ms/m365pnp) team and the community, who all volunteer their time.
We track bugs, user questions, suggestions and sample requests through [GitHub issues](https://github.com/pnp/sp-dev-fx-webparts/issues).
Please help out as you can in response to issues and user questions.
## Disclaimer
**ALL SAMPLE CODE IN THIS REPOSITORY 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.**
## Have issues or questions?
Please use following logic on submitting your questions or issues to right location to ensure that they are noticed and addressed as soon as possible.
* You have general question or challenge with SPFx - use [sp-dev-docs repository issue list](https://github.com/SharePoint/sp-dev-docs/issues).
* You have issue on specific web part or sample - use [issue list in this repository](https://github.com/pnp/sp-dev-fx-webparts/issues).
### How to report a bug
We use GitHub to track issues. To report a bug, [open a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new/choose). Please include
all the information that might be relevant, including instructions for reproducing the bug. Make sure to read up on [how to create good issues](https://github.com/pnp/sp-dev-fx-webparts/wiki/How-to-Create-Good-Issues) to get your issue resolved faster.
### Where can I ask for help?
We use GitHub issues to support user questions. To ask a question, [open a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new/choose) and select the question template.
### How to submit changes
Please see our [Contributing Guidance](https://github.com/pnp/sp-dev-fx-webparts/blob/main/CONTRIBUTING.md).
### How to request an enhancement
We use GitHub issues to support user suggestions. To request an enhanced, [open a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new/choose) and select the suggestion template.
### How to request an sample request
We use GitHub issues to support sample request. To request a new sample, [open a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new/choose) and select the sample request template.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/SUPPORT.md" />

41
samples/README-template.md
View File

@ -10,7 +10,6 @@
>
> DELETE THIS PARAGRAPH BEFORE SUBMITTING
## Summary
Short summary on functionality and used technologies.
@ -60,16 +59,18 @@ Short summary on functionality and used technologies.
> Update accordingly as needed.
> DELETE THIS PARAGRAPH BEFORE SUBMITTING
## Prerequisites
> Any special pre-requisites? Include any lists, permissions, offerings to the demo gods, or whatever else needs to be done for this web part to work.
> DELETE THIS PARAGRAPH BEFORE SUBMITTING
## Solution
> We use this section to recognize and promote your contributions. Please provide one author per line -- even if you worked together on it.
> We'll only use the info you provided here. Make sure to include your full name, not just your GitHub username.
> Provide a link to your GitHub profile to help others find more cool things you have done.
> If you provide a link to your Twitter profile, we'll promote your contribution on social media.
>
> DELETE THE TEXT ABOVE BEFORE SUBMITTING
Solution|Author(s)
--------|---------
folder name | Author details
folder name | [Author Name](LinkToYourGitHubProfile) ([@yourtwitterhandle](https://twitter.com/yourtwitterhandle)), Company
## Version history
@ -78,11 +79,13 @@ Version|Date|Comments
1.1|September 2, 2021|Update comment
1.0|August 29, 2021|Initial release
## Disclaimer
## Prerequisites
**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.**
---
> Any special pre-requisites? Include any lists, permissions, offerings to the demo gods, or whatever else needs to be done for this web part to work.
>
> Please describe the steps to configure the pre-requisites. Feel free to add screen shots, but make sure that there is a text description of the steps to perform.
>
> DELETE THE TEXT ABOVE BEFORE SUBMITTING
## Minimal Path to Awesome
@ -106,4 +109,18 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
> Note that better pictures and documentation will increase the sample usage and the value you are providing for others. Thanks for your submissions in advance! You rock ❤.
> DELETE THIS PARAGRAPH BEFORE SUBMITTING
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template" />
## 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.**
## Support
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=YOUR-SOLUTION-NAME&authors=@YOURGITHUBUSERNAME&title=YOUR-SOLUTION-NAME%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=YOUR-SOLUTION-NAME&authors=@YOURGITHUBUSERNAME&title=YOUR-SOLUTION-NAME%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=YOUR-SOLUTION-NAME&authors=@YOURGITHUBUSERNAME&title=YOUR-SOLUTION-NAME%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/YOUR-SOLUTION-NAME" />

19
samples/aad-api-spo-cookie/README.md
View File

@ -25,7 +25,8 @@ Sample web part showing the list of latest orders retrieved from a custom API se
![Web part showing the list of latest orders retrieved from a custom API secured with AAD](./assets/preview-orders.png)
## Used SharePoint Framework Version
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-GA-green.svg)
## Applies to
@ -37,7 +38,7 @@ Sample web part showing the list of latest orders retrieved from a custom API se
Solution|Author(s)
--------|---------
aad-api-spo-cookie|Waldek Mastykarz (MVP, Rencore, @waldekm)
aad-api-spo-cookie|[Waldek Mastykarz](https://github.com/waldekmastykarz) (MVP, Rencore, @waldekm)
## Version history
@ -46,6 +47,7 @@ Version|Date|Comments
1.0.0|May 5, 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.**
---
@ -227,4 +229,15 @@ This sample illustrates the following concepts on top of the SharePoint Framewor
- manipulating DOM without using JavaScript libraries
- chaining promises
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/aad-api-spo-cookie" />
## Support
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=aad-api-spo-cookie&authors=@waldekmastykarz&title=aad-api-spo-cookie%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=aad-api-spo-cookie&authors=@waldekmastykarz&title=aad-api-spo-cookie%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=aad-api-spo-cookie&authors=@waldekmastykarz&title=aad-api-spo-cookie%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/aad-api-spo-cookie" />

89
samples/aad-api-spo-cookie/assets/sample.json
View File

@ -1 +1,88 @@
{"name":"pnp-sp-dev-spfx-web-parts-aad-api-spo-cookie","version":null,"source":"pnp","title":"Call custom APIs secured with Azure Active Directory without ADAL JS","shortDescription":"Sample SharePoint Framework client-side web part showing how to access a custom API secured with Azure Active Directory (AAD) without using ADAL JS.","longDescription":["Sample SharePoint Framework client-side web part showing how to access a custom API secured with Azure Active Directory (AAD) without using ADAL JS."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/aad-api-spo-cookie/assets/preview-orders.png","alt":"Call custom APIs secured with Azure Active Directory without ADAL JS","slides":null}],"authors":[{"gitHubAccount":"waldekmastykarz","company":"","pictureUrl":"https://github.com/waldekmastykarz.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-aad-api-spo-cookie",
"source": "pnp",
"title": "Call custom APIs secured with Azure Active Directory without ADAL JS",
"shortDescription": "Sample SharePoint Framework client-side web part showing how to access a custom API secured with Azure Active Directory (AAD) without using ADAL JS.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/aad-api-spo-cookie",
"longDescription": [
"Sample SharePoint Framework client-side web part showing how to access a custom API secured with Azure Active Directory (AAD) without using ADAL JS."
],
"creationDateTime": "2017-05-05",
"updateDateTime": "2017-05-05",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Angular"
},
{
"key": "SPFX-VERSION",
"value": "GA"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/aad-api-spo-cookie/assets/preview-orders.png",
"alt": "Call custom APIs secured with Azure Active Directory without ADAL JS"
},
{
"type": "image",
"order": 101,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/aad-api-spo-cookie/assets/orders-api-configure-authentication-dialog.png?raw=true",
"alt": "Call custom APIs secured with Azure Active Directory without ADAL JS"
},
{
"type": "image",
"order": 102,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/aad-api-spo-cookie/assets/orders-api-configure-authentication.png?raw=true",
"alt": "Call custom APIs secured with Azure Active Directory without ADAL JS"
},
{
"type": "image",
"order": 103,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/aad-api-spo-cookie/assets/orders-api-restore-packages.png?raw=true",
"alt": "Call custom APIs secured with Azure Active Directory without ADAL JS"
},
{
"type": "image",
"order": 104,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/aad-api-spo-cookie/assets/orders-fetch-error.png?raw=true",
"alt": "Call custom APIs secured with Azure Active Directory without ADAL JS"
},
{
"type": "image",
"order": 105,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/aad-api-spo-cookie/assets/orders-ie-error.png?raw=true",
"alt": "Call custom APIs secured with Azure Active Directory without ADAL JS"
},
{
"type": "image",
"order": 106,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/aad-api-spo-cookie/assets/orders-ie-zones-settings.png?raw=true",
"alt": "Call custom APIs secured with Azure Active Directory without ADAL JS"
}
],
"authors": [
{
"gitHubAccount": "waldekmastykarz",
"company": "Microsoft",
"pictureUrl": "https://github.com/waldekmastykarz.png",
"name": "Waldek Mastykarz",
"twitter": "waldekm"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

42
samples/aad-api-spo-cookie/webpart/yarn.lock
View File

@ -1554,10 +1554,6 @@ commander@2.9.x, commander@^2.5.0, commander@^2.7.1, commander@^2.9.0:
dependencies:
graceful-readlink ">= 1.0.0"
commander@~2.20.3:
version "2.20.3"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
commoner@^0.10.1:
version "0.10.8"
resolved "https://registry.yarnpkg.com/commoner/-/commoner-0.10.8.tgz#34fc3672cd24393e8bb47e70caa0293811f4f2c5"
@ -3205,12 +3201,13 @@ gulplog@^1.0.0:
glogg "^1.0.0"
handlebars@^4.0.1:
version "4.5.3"
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
version "4.7.7"
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
dependencies:
minimist "^1.2.5"
neo-async "^2.6.0"
optimist "^0.6.1"
source-map "^0.6.1"
wordwrap "^1.0.0"
optionalDependencies:
uglify-js "^3.1.4"
@ -3307,8 +3304,8 @@ homedir-polyfill@^1.0.0:
parse-passwd "^1.0.0"
hosted-git-info@^2.1.4:
version "2.4.2"
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.4.2.tgz#0076b9f46a270506ddbaaea56496897460612a67"
version "2.8.9"
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
html-comment-regex@^1.1.0:
version "1.1.1"
@ -4539,9 +4536,9 @@ minimist@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.2.0.tgz#4dffe525dae2b864c66c2e23c6271d7afdecefce"
minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
version "1.2.5"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
minimist@~0.0.1:
version "0.0.10"
@ -4644,8 +4641,8 @@ negotiator@0.6.1:
resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
neo-async@^2.6.0:
version "2.6.1"
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
version "2.6.2"
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
no-case@^2.2.0:
version "2.3.1"
@ -6220,7 +6217,7 @@ source-map@^0.1.41, source-map@~0.1.33:
dependencies:
amdefine ">=0.0.4"
source-map@^0.6.1, source-map@~0.6.1:
source-map@^0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
@ -6661,8 +6658,8 @@ typescript@~2.1.4:
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.1.6.tgz#40c7e6e9e5da7961b7718b55505f9cac9487a607"
ua-parser-js@^0.7.9:
version "0.7.12"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"
version "0.7.28"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.28.tgz#8ba04e653f35ce210239c64661685bf9121dec31"
uglify-js@^2.6.4, uglify-js@~2.7.3:
version "2.7.5"
@ -6674,11 +6671,8 @@ uglify-js@^2.6.4, uglify-js@~2.7.3:
yargs "~3.10.0"
uglify-js@^3.1.4:
version "3.7.3"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.3.tgz#f918fce9182f466d5140f24bb0ff35c2d32dcc6a"
dependencies:
commander "~2.20.3"
source-map "~0.6.1"
version "3.13.5"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.5.tgz#5d71d6dbba64cf441f32929b1efce7365bb4f113"
uglify-js@~2.8.22:
version "2.8.23"
@ -7174,8 +7168,8 @@ xtend@~3.0.0:
resolved "https://registry.yarnpkg.com/xtend/-/xtend-3.0.0.tgz#5cce7407baf642cba7becda568111c493f59665a"
y18n@^3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
version "3.2.2"
resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.2.tgz#85c901bd6470ce71fc4bb723ad209b70f7f28696"
yallist@^2.0.0:
version "2.1.2"

21
samples/angular-aad-webapi/README.md
View File

@ -24,6 +24,7 @@ Sample SharePoint Framework client-side web part illustrating communication with
![Sample showing the client-side web part](./assets/preview.jpg)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-ga-green.svg)
## Applies to
@ -35,7 +36,7 @@ Sample SharePoint Framework client-side web part illustrating communication with
Solution|Author(s)
--------|---------
angular-aad-webapi|David Hartman ([Slalom](https://slalom.com))
angular-aad-webapi|[David Hartman](https://github.com/davidhartman) ([Slalom](https://slalom.com))
## Version history
@ -45,11 +46,13 @@ Version|Date|Comments
1.0|December 21, 2016|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.**
---
## Configuration Bliss
- clone this repo
### Create custom Web API site
@ -57,6 +60,7 @@ Version|Date|Comments
- in the Azure Management Portal at https://portal.azure.com create a new API App
### Secure custom Web API with AAD
- in the Azure Management Portal at https://manage.windowsazure.com navigate to Azure Active Directory and register a new web application:
- as the name use anything you want
- as the sign-in URL use the URL of the previously created API App
@ -97,8 +101,19 @@ Version|Date|Comments
> Note: When you first login, the screen will refresh several times. I tried using the popUp feature with adal,
> however, this caused a infinite digest loop. Also ideally you should be able to make the calls to both the Graph
> API and your custom Web API without having to acquire the bearer tokens first, however, what happens is the app
> aquires the bearer token and then never finishes the call, I believe that is because the app is reloading, not quite
> acquires the bearer token and then never finishes the call, I believe that is because the app is reloading, not quite
> sure how to fix that yet. There is definitely room to improved the user experience but the main logic and functionality
> is here. Thanks!
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-aad-webapi" />
## Support
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=angular-aad-webapi&authors=@davidhartman&title=angular-aad-webapi%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=angular-aad-webapi&authors=@davidhartman&title=angular-aad-webapi%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=angular-aad-webapi&authors=@davidhartman&title=angular-aad-webapi%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-aad-webapi" />

52
samples/angular-aad-webapi/assets/sample.json
View File

@ -1 +1,51 @@
{"name":"pnp-sp-dev-spfx-web-parts-angular-aad-webapi","version":null,"source":"pnp","title":"Call custom Web API secured with AAD from SharePoint Framework client-side web part using Angular v1.x","shortDescription":"Sample SharePoint Framework client-side web part illustrating communication with a custom Web API secured with Azue Active Directory using Angular v1.x","longDescription":["Sample SharePoint Framework client-side web part illustrating communication with a custom Web API secured with Azue Active Directory using Angular v1.x"],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/angular-aad-webapi/assets/preview.jpg","alt":"Call custom Web API secured with AAD from SharePoint Framework client-side web part using Angular v1.x","slides":null}],"authors":[{"gitHubAccount":"davidhartman","company":"","pictureUrl":"https://github.com/davidhartman.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-angular-aad-webapi",
"source": "pnp",
"title": "Call custom Web API secured with AAD from SharePoint Framework client-side web part using Angular v1.x",
"shortDescription": "Sample SharePoint Framework client-side web part illustrating communication with a custom Web API secured with Azue Active Directory using Angular v1.x",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-aad-webapi",
"longDescription": [
"Sample SharePoint Framework client-side web part illustrating communication with a custom Web API secured with Azue Active Directory using Angular v1.x"
],
"creationDateTime": "2017-03-21",
"updateDateTime": "2017-03-21",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Angular"
},
{
"key": "SPFX-VERSION",
"value": "GA"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-aad-webapi/assets/preview.jpg",
"alt": "Call custom Web API secured with AAD from SharePoint Framework client-side web part using Angular v1.x"
}
],
"authors": [
{
"gitHubAccount": "davidhartman",
"company": "Slalom",
"pictureUrl": "https://avatars.githubusercontent.com/u/11304394?s=460\u0026v=4",
"name": "David Hartman"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

23
samples/angular-greeting/README.md
View File

@ -19,14 +19,15 @@ extensions:
## Summary
This sample Web Part illustrating using AngularJS with the SharePoint Framework. This is Greeting webpart which shows greeting to the current logged in user.
This sample Web Part illustrating using AngularJS with the SharePoint Framework. This is Greeting web part which shows greeting to the current logged in user.
![AngularJS Greetings Webpart SharePoint Framework client-side web part built using AngularJS](./assets/captured.gif)
![AngularJS Greetings Web part SharePoint Framework client-side web part built using AngularJS](./assets/captured.gif)
Final outcome:
![AngularJS Greetings Webpart SharePoint Framework client-side web part built using AngularJS](./assets/preview.PNG)
![AngularJS Greetings Web part SharePoint Framework client-side web part built using AngularJS](./assets/preview.PNG)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-GA-green.svg)
## Applies to
@ -38,15 +39,16 @@ Final outcome:
Solution|Author(s)
--------|---------
angular-todo|Gaurav Goyal (MCSD, BizPortals Solutions, @gauravgoyal_5)
angular-todo|[Gaurav Goyal](https://github.com/gauravgoyal5) (MCSD, BizPortals Solutions, @gauravgoyal_5)
## Version history
Version|Date|Comments
-------|----|--------
1.0|Feb 15, 2020|Initial release submittion
1.0|Feb 15, 2020|Initial release submission
## 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.**
---
@ -71,4 +73,15 @@ This web part illustrates the following concepts on top of the SharePoint Framew
* using conditional rendering for one-time web part setup
* passing web part configuration to AngularJS and reacting to configuration changes
## Support
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=angular-greeting&authors=@gauravgoyal5&title=angular-greeting%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=angular-greeting&authors=@gauravgoyal5&title=angular-greeting%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=angular-greeting&authors=@gauravgoyal5&title=angular-greeting%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-greeting" />

58
samples/angular-greeting/assets/sample.json
View File

@ -1 +1,57 @@
{"name":"pnp-sp-dev-spfx-web-parts-angular-greeting","version":null,"source":"pnp","title":"Greeting client-side web part","shortDescription":"This is Greeting web part which shows greeting to the current logged in user.","longDescription":["This is Greeting web part which shows greeting to the current logged in user."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"1.10.0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/angular-greeting/assets/captured.gif","alt":"Greeting client-side web part","slides":null}],"authors":[{"gitHubAccount":"gauravgoyal5","company":"","pictureUrl":"https://github.com/gauravgoyal5.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-angular-greeting",
"source": "pnp",
"title": "Greeting client-side web part",
"shortDescription": "This is Greeting web part which shows greeting to the current logged in user.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-greeting",
"longDescription": [
"This is Greeting web part which shows greeting to the current logged in user."
],
"creationDateTime": "2020-02-15",
"updateDateTime": "2020-02-15",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Angular"
},
{
"key": "SPFX-VERSION",
"value": "1.10.0"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-greeting/assets/captured.gif",
"alt": "Greeting client-side web part"
},
{
"type": "image",
"order": 101,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/angular-greeting/assets/preview.PNG?raw=true",
"alt": "Greeting client-side web part"
}
],
"authors": [
{
"gitHubAccount": "gauravgoyal5",
"company": "BizPortals Solutions",
"pictureUrl": "https://github.com/gauravgoyal5.png",
"name": "Gaurav Goyal"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

15
samples/angular-migration/README.md
View File

@ -34,7 +34,7 @@ Application after migration:
Solution|Author(s)
--------|---------
angular-migration|Waldek Mastykarz (MVP, Rencore, @waldekm)
angular-migration|[Waldek Mastykarz](https://github.com/waldekmastykarz) (MVP, Rencore, @waldekm)
## Version history
@ -43,6 +43,7 @@ Version|Date|Comments
1.0.0|October 21, 2016|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.**
---
@ -51,4 +52,14 @@ Follow the setup instructions:
- [Angular application](./angular-todo/README.md)
- [SharePoint Framework client-side web part](./angular-todo-webpart/README.md)
![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-migration)
## Support
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=angular-migration&authors=@waldekmastykarz&title=angular-migration%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=angular-migration&authors=@waldekmastykarz&title=angular-migration%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=angular-migration&authors=@waldekmastykarz&title=angular-migration%20-%20).
![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-migration)

59
samples/angular-migration/assets/sample.json
View File

@ -1 +1,58 @@
{"name":"pnp-sp-dev-spfx-web-parts-angular-migration","version":null,"source":"pnp","title":"Migrating existing Angular applications to SharePoint Framework sample","shortDescription":"This is a sample Angular application before and after it has been migrated to a SharePoint Framework client-side web part.","longDescription":["This is a sample Angular application before and after it has been migrated to a SharePoint Framework client-side web part."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/angular-migration/assets/angular-todo-spfx-preview.png","alt":"Migrating existing Angular applications to SharePoint Framework sample","slides":null}],"authors":[{"gitHubAccount":"waldekmastykarz","company":"","pictureUrl":"https://github.com/waldekmastykarz.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-angular-migration",
"source": "pnp",
"title": "Migrating existing Angular applications to SharePoint Framework sample",
"shortDescription": "This is a sample Angular application before and after it has been migrated to a SharePoint Framework client-side web part.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-migration",
"longDescription": [
"This is a sample Angular application before and after it has been migrated to a SharePoint Framework client-side web part."
],
"creationDateTime": "2016-10-21",
"updateDateTime": "2016-10-21",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Angular"
},
{
"key": "SPFX-VERSION",
"value": "GA"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-migration/assets/angular-todo-spfx-preview.png",
"alt": "Migrating existing Angular applications to SharePoint Framework sample"
},
{
"type": "image",
"order": 101,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/angular-migration/assets/angular-todo-preview.png?raw=true",
"alt": "Migrating existing Angular applications to SharePoint Framework sample"
}
],
"authors": [
{
"gitHubAccount": "waldekmastykarz",
"company": "Microsoft",
"pictureUrl": "https://github.com/waldekmastykarz.png",
"name": "Waldek Mastykarz",
"twitter": "waldekm"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

6
samples/angular-msgraph/README-Localized/README-fr-fr.md
View File

@ -17,10 +17,10 @@ extensions:
- AngularJS
createdDate: 2/16/2017 12:00:00 AM
---
Composant graphique WebPart Angular MS Graph créé avec Angular v1.x
Composant graphique Web Part Angular MS Graph créé avec Angular v1.x
## Résumé
Il s’agit d’un exemple de composant WebPart Angular MS Graph qui se connecte à Microsoft Graph et extrait des informations SharePoint de votre client.
Il s’agit d’un exemple de composant Web Part Angular MS Graph qui se connecte à Microsoft Graph et extrait des informations SharePoint de votre client.
Il extrait tout d’abord la collection de sites racine (actuellement limitée par Microsoft Graph),
puis affiche toutes les listes associées au site, suivies de tous les éléments dans la liste.
@ -94,4 +94,4 @@ Version|Date|Commentaires
1. Remplacez les valeurs d’espace réservé **aad**et **redirect_uri** par l’ID d’application et
redirigez l’URL de votre application Azure inscrit dans le fichier GraphHelper.ts sous src-> angularMsGraph-> GraphHelper.ts
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-msgraph" />
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-msgraph" />

18
samples/angular-msgraph/README.md
View File

@ -20,6 +20,7 @@ extensions:
# Angular MS Graph Web Part Built with Angular v1.x
## Summary
This is a sample MS Graph web part that connects to Microsoft Graph and pulls SharePoint information from your
tenant. It will first pull the root site collection (currently a limitation by Microsoft Graph), then it will
display all the lists associated with the site followed by all the items inside the list.
@ -38,6 +39,7 @@ display all the lists associated with the site followed by all the items inside
> Note: I currently only have models developed for the Announcements list. All other lists will currently generate errors.
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-ga-green.svg)
## Applies to
@ -49,7 +51,7 @@ display all the lists associated with the site followed by all the items inside
Solution|Author(s)
--------|---------
angular-msgraph|David Hartman ([Slalom](https://slalom.com))
angular-msgraph|[David Hartman](https://github.com/davidhartman) ([Slalom](https://slalom.com))
## Version history
@ -59,6 +61,7 @@ Version|Date|Comments
1.0|February 6th, 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.**
---
@ -91,7 +94,20 @@ Version|Date|Comments
8. Choose **Save**.
## Configuring the App
1. Replace the **aad** and **redirect_uri** placeholder values with the application ID and redirect url of your registered Azure application in the GraphHelper.ts file Under
src -> angularMsGraph -> GraphHelper.ts
## Support
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=angular-msgraph&authors=@davidhartman&title=angular-msgraph%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=angular-msgraph&authors=@davidhartman&title=angular-msgraph%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=angular-msgraph&authors=@davidhartman&title=angular-msgraph%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-msgraph" />

BIN
samples/angular-msgraph/assets/Connect.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
samples/angular-msgraph/assets/Connected.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 30 KiB

BIN
samples/angular-msgraph/assets/Items.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 58 KiB

BIN
samples/angular-msgraph/assets/Lists.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 56 KiB

BIN
samples/angular-msgraph/assets/Root.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 35 KiB

119
samples/angular-msgraph/assets/sample.json
View File

@ -1,44 +1,75 @@
{
"name": "pnp-sp-dev-spfx-web-parts-angular-msgraph",
"version": null,
"source": "pnp",
"title": "Angular MS Graph Web Part Built with Angular v1.x",
"shortDescription": "This is a sample MS Graph web part that connects to Microsoft Graph and pulls SharePoint information from your tenant. It will first pull the root site collection (currently a limitation by Microsoft Graph), then it will display all the lists associated with the site followed by all the items inside the list.",
"longDescription": [
"This is a sample MS Graph web part that connects to Microsoft Graph and pulls SharePoint information from your tenant. It will first pull the root site collection (currently a limitation by Microsoft Graph), then it will display all the lists associated with the site followed by all the items inside the list."
],
"products": [
"SharePoint",
"Office"
],
"categories": [
""
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Angular"
},
{
"key": "SPFX-VERSION",
"value": "GA"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/angular-msgraph/assets/Connect.png",
"alt": "Angular MS Graph Web Part Built with Angular v1.x",
"slides": null
}
],
"authors": [
{
"gitHubAccount": "davidhartman",
"company": "",
"pictureUrl": "https://github.com/davidhartman.png"
}
],
"references": []
}
[
{
"name": "pnp-sp-dev-spfx-web-parts-angular-msgraph",
"source": "pnp",
"title": "Angular MS Graph Web Part Built with Angular v1.x",
"shortDescription": "This is a sample MS Graph web part that connects to Microsoft Graph and pulls SharePoint information from your tenant. It will first pull the root site collection (currently a limitation by Microsoft Graph), then it will display all the lists associated with the site followed by all the items inside the list.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-msgraph",
"longDescription": [
"This is a sample MS Graph web part that connects to Microsoft Graph and pulls SharePoint information from your tenant. It will first pull the root site collection (currently a limitation by Microsoft Graph), then it will display all the lists associated with the site followed by all the items inside the list."
],
"creationDateTime": "2017-04-19",
"updateDateTime": "2017-04-19",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Angular"
},
{
"key": "SPFX-VERSION",
"value": "GA"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-msgraph/assets/Connect.png",
"alt": "Angular MS Graph Web Part Built with Angular v1.x"
},
{
"type": "image",
"order": 101,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/angular-msgraph/assets/Connected.png?raw=true",
"alt": "Angular MS Graph Web Part Built with Angular v1.x"
},
{
"type": "image",
"order": 102,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/angular-msgraph/assets/Items.png?raw=true",
"alt": "Angular MS Graph Web Part Built with Angular v1.x"
},
{
"type": "image",
"order": 103,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/angular-msgraph/assets/Lists.png?raw=true",
"alt": "Angular MS Graph Web Part Built with Angular v1.x"
},
{
"type": "image",
"order": 104,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/angular-msgraph/assets/Root.png?raw=true",
"alt": "Angular MS Graph Web Part Built with Angular v1.x"
}
],
"authors": [
{
"gitHubAccount": "davidhartman",
"company": "Slalom",
"pictureUrl": "https://avatars.githubusercontent.com/u/11304394?s=460\u0026v=4",
"name": "David Hartman"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

14
samples/angular-multipage/README.md
View File

@ -26,6 +26,7 @@ This sample contains a poll web part allowing users to vote and view the results
![Poll web part built on the SharePoint Framework using Angular](./assets/poll-preview.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-drop5-red.svg)
## Applies to
@ -37,7 +38,7 @@ This sample contains a poll web part allowing users to vote and view the results
Solution|Author(s)
--------|---------
angular-multipage|Waldek Mastykarz (MVP, Rencore, @waldekm)
angular-multipage|[Waldek Mastykarz](https://github.com/waldekmastykarz) (MVP, Rencore, @waldekm)
## Version history
@ -46,6 +47,7 @@ Version|Date|Comments
1.0.0|November 1, 2016|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.**
---
@ -98,4 +100,14 @@ This sample illustrates the following concepts on top of the SharePoint Framewor
- reading and updating SharePoint list items using Angular
- showing charts using [Chart.js](http://www.chartjs.org) and [Angular Chart directives](https://jtblin.github.io/angular-chart.js/)
## Support
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=angular-multipage&authors=@waldekmastykarz&title=angular-multipage%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=angular-multipage&authors=@waldekmastykarz&title=angular-multipage%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=angular-multipage&authors=@waldekmastykarz&title=angular-multipage%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-multipage" />

53
samples/angular-multipage/assets/sample.json
View File

@ -1 +1,52 @@
{"name":"pnp-sp-dev-spfx-web-parts-angular-multipage","version":null,"source":"pnp","title":"Angular multi-page client-side web part","shortDescription":"This is a sample SharePoint Framework client-side web part built using Angular, illustrating building multi-page web parts.","longDescription":["This is a sample SharePoint Framework client-side web part built using Angular, illustrating building multi-page web parts."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"drop5"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/angular-multipage/assets/poll-preview.gif","alt":"Angular multi-page client-side web part","slides":null}],"authors":[{"gitHubAccount":"waldekmastykarz","company":"","pictureUrl":"https://github.com/waldekmastykarz.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-angular-multipage",
"source": "pnp",
"title": "Angular multi-page client-side web part",
"shortDescription": "This is a sample SharePoint Framework client-side web part built using Angular, illustrating building multi-page web parts.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-multipage",
"longDescription": [
"This is a sample SharePoint Framework client-side web part built using Angular, illustrating building multi-page web parts."
],
"creationDateTime": "2016-11-01",
"updateDateTime": "2016-11-01",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Angular"
},
{
"key": "SPFX-VERSION",
"value": "drop5"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-multipage/assets/poll-preview.gif",
"alt": "Angular multi-page client-side web part"
}
],
"authors": [
{
"gitHubAccount": "waldekmastykarz",
"company": "Microsoft",
"pictureUrl": "https://github.com/waldekmastykarz.png",
"name": "Waldek Mastykarz",
"twitter": "waldekm"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

26
samples/angular-ngofficeuifabric-file-upload/README.md
View File

@ -14,16 +14,18 @@ extensions:
- AngularJS
createdDate: 6/19/2017 12:00:00 AM
---
# Spfx Webpart: File Upload using AngularJs
# SPFx Web part: File Upload using AngularJs
## Summary
File Update/Delete webpart using AngularJs and ngOfficeUIFabric with the SharePoint Framework.
File Update/Delete web part using AngularJs and ngOfficeUIFabric with the SharePoint Framework.
![File Upload using Angular](http://i.imgur.com/U5qg4II.png)
Edit webpart properties to set Document library Name. Initially, It has been set to `Documents`.
Edit web part properties to set Document library Name. Initially, It has been set to `Documents`.
## Used SharePoint Framework Version
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
## Applies to
@ -35,7 +37,8 @@ Edit webpart properties to set Document library Name. Initially, It has been set
Solution|Author(s)
--------|---------
angular-ngofficeuifabric-file-upload | Atish Kumar Dipongkor (MVP, Office Development), Gautam Sheth(SharePoint Consultant,RapidCircle,@gautamdsheth)
angular-ngofficeuifabric-file-upload | [Atish Kumar Dipongkor](https://github.com/dipongkor) (MVP, Office Development)
angular-ngofficeuifabric-file-upload | [Gautam Sheth](https://github.com/gautamdsheth) (SharePoint Consultant,RapidCircle,@gautamdsheth)
## Version history
@ -46,6 +49,7 @@ Version|Date|Comments
2.1|July 19, 2017|Bug fix
## 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.**
---
@ -59,10 +63,22 @@ Version|Date|Comments
- `gulp serve --nobrowser`
## Features
This Web Part illustrates the following concepts on top of the SharePoint Framework & AngularJs:
- `BaseService`: By injecting this Angular Service, GET, POST, UPDATE & DELETE requests can be made easily. It's a resuable service.
- `CustomFileChange`: It's a custom Angular directive. It binds the file with model on file change event.
- `IsoToDateString`: It's a custom Angular filter. It formats ISO date string to `{0:yyyy}-{0:MM}-{0:dd}` format.
## Support
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=angular-ngofficeuifabric-file-upload&authors=@waldekmastykarz&title=angular-ngofficeuifabric-file-upload%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=angular-ngofficeuifabric-file-upload&authors=@waldekmastykarz&title=angular-ngofficeuifabric-file-upload%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=angular-ngofficeuifabric-file-upload&authors=@waldekmastykarz&title=angular-ngofficeuifabric-file-upload%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-ngofficeuifabric-file-upload" />

66
samples/angular-ngofficeuifabric-file-upload/assets/sample.json
View File

@ -1 +1,65 @@
{"name":"pnp-sp-dev-spfx-web-parts-angular-ngofficeuifabric-file-upload","version":null,"source":"pnp","title":"File Upload using AngularJs","shortDescription":"File Update/Delete web part using AngularJs and ngOfficeUIFabric with the SharePoint Framework.","longDescription":["File Update/Delete web part using AngularJs and ngOfficeUIFabric with the SharePoint Framework."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://camo.githubusercontent.com/674cb6e830d597e1ab9bb89992b6fe7f0359b80f/687474703a2f2f692e696d6775722e636f6d2f553571673449492e706e67","alt":"File Upload using AngularJs","slides":null}],"authors":[{"gitHubAccount":"dipongkor","company":"","pictureUrl":"https://github.com/dipongkor.png"},{"gitHubAccount":"gautamdsheth","company":"","pictureUrl":"https://github.com/gautamdsheth.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-angular-ngofficeuifabric-file-upload",
"source": "pnp",
"title": "File Upload using AngularJs",
"shortDescription": "File Update/Delete web part using AngularJs and ngOfficeUIFabric with the SharePoint Framework.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-ngofficeuifabric-file-upload",
"longDescription": [
"File Update/Delete web part using AngularJs and ngOfficeUIFabric with the SharePoint Framework."
],
"creationDateTime": "2017-07-17",
"updateDateTime": "2017-07-17",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Angular"
},
{
"key": "SPFX-VERSION",
"value": "GA"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://camo.githubusercontent.com/674cb6e830d597e1ab9bb89992b6fe7f0359b80f/687474703a2f2f692e696d6775722e636f6d2f553571673449492e706e67",
"alt": "File Upload using AngularJs"
},
{
"type": "image",
"order": 101,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/angular-ngofficeuifabric-file-upload/assets/NG File Upload.png?raw=true",
"alt": "File Upload using AngularJs"
}
],
"authors": [
{
"gitHubAccount": "dipongkor",
"company": "Jashore University of Science and Technology",
"pictureUrl": "https://avatars.githubusercontent.com/u/4987425?s=460\u0026u=998935621b0e998dc9bcd0fc26267623a8e5512c\u0026v=4",
"name": "Atish Kumar Dipongkor",
"twitter": "atish_iit"
},
{
"gitHubAccount": "gautamdsheth",
"company": "Valo Intranet",
"pictureUrl": "https://github.com/gautamdsheth.png",
"name": "Gautam Sheth",
"twitter": "gautamdsheth"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

16
samples/angular-ngofficeuifabric-todo/README.md
View File

@ -26,7 +26,8 @@ You can find a video recording walk-through this sample from [SharePoint PnP You
![Sample To do SharePoint Framework Client-Side Web Part built using Angular and ngOfficeUIFabric](./assets/preview.png)
## Used SharePoint Framework Version
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-drop2-red.svg)
## Applies to
@ -38,7 +39,7 @@ You can find a video recording walk-through this sample from [SharePoint PnP You
Solution|Author(s)
--------|---------
angular-ngofficeuifabric-todo|Waldek Mastykarz (MVP, Rencore, @waldekm)
angular-ngofficeuifabric-todo|[Waldek Mastykarz](https://github.com/waldekmastykarz) (MVP, Rencore, @waldekm)
## Version history
@ -48,6 +49,7 @@ Version|Date|Comments
1.0|August 29, 2016|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.**
---
@ -75,4 +77,14 @@ This web part illustrates the following concepts on top of the SharePoint Framew
- using conditional rendering for one-time web part setup
- passing web part configuration to Angular and reacting to configuration changes
## Support
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=angular-ngofficeuifabric-todo&authors=@waldekmastykarz&title=angular-ngofficeuifabric-todo%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=angular-ngofficeuifabric-todo&authors=@waldekmastykarz&title=angular-ngofficeuifabric-todo%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=angular-ngofficeuifabric-todo&authors=@waldekmastykarz&title=angular-ngofficeuifabric-todo%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-ngofficeuifabric-todo" />

BIN
samples/angular-ngofficeuifabric-todo/assets/preview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

54
samples/angular-ngofficeuifabric-todo/assets/sample.json
View File

@ -1 +1,53 @@
{"name":"pnp-sp-dev-spfx-web-parts-angular-ngofficeuifabric-todo","version":null,"source":"pnp","title":"Angular \u0026 ngOfficeUIFabric Client-Side Web Part","shortDescription":"","longDescription":[""],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"drop2"}],"thumbnails":[{"type":"image","order":100,"url":"https://avatars2.githubusercontent.com/u/11164679?s=460\u0026v=4","alt":"Angular \u0026 ngOfficeUIFabric Client-Side Web Part","slides":null}],"authors":[{"gitHubAccount":"waldekmastykarz","company":"","pictureUrl":"https://github.com/waldekmastykarz.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-angular-ngofficeuifabric-todo",
"source": "pnp",
"title": "Angular \u0026 ngOfficeUIFabric Client-Side Web Part",
"shortDescription": "Illustrates the use of Angular and ngOfficeUIFabric with the SharePoint Framework.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-ngofficeuifabric-todo",
"longDescription": [
"This is a sample web part that illustrates the use of Angular and ngOfficeUIFabric with the SharePoint Framework.",
"You can find a video recording walk-through this sample from SharePoint PnP YouTube channel."
],
"creationDateTime": "2016-09-09",
"updateDateTime": "2016-09-09",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Angular"
},
{
"key": "SPFX-VERSION",
"value": "drop2"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://avatars2.githubusercontent.com/u/11164679?s=460\u0026v=4",
"alt": "Angular \u0026 ngOfficeUIFabric Client-Side Web Part"
}
],
"authors": [
{
"gitHubAccount": "waldekmastykarz",
"company": "Microsoft",
"pictureUrl": "https://github.com/waldekmastykarz.png",
"name": "Waldek Mastykarz",
"twitter": "waldekm"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

22
samples/angular-search/README.md
View File

@ -16,6 +16,7 @@ extensions:
# Search Client-Side Web Part Built with Angular v1.x
## Summary
This is a sample search web part that illustrates how you can use Angular within the new SharePoint Framework
![Sample of the search web part](./assets/angularSearch.png)
@ -23,15 +24,16 @@ This app uses the SharePoint Search REST API endpoint to query listitems of a sp
Ideally instead of selecting a content type for the search you would want to select a Result Source, but currently Result Sources are not
available through SharePoint's REST API.
The logic for querying the SharePoint Content Types in the properties of the webpart was in part due to Chris O'Brien and this [blog post](http://www.sharepointnutsandbolts.com/2016/09/sharepoint-framework-spfx-web-part-properties-dynamic-dropdown.html?m=0)
The logic for querying the SharePoint Content Types in the properties of the web part was in part due to Chris O'Brien and this [blog post](http://www.sharepointnutsandbolts.com/2016/09/sharepoint-framework-spfx-web-part-properties-dynamic-dropdown.html?m=0)
> Note: In order to use the ngOfficeFabric code I use the ModuleLoader to load newer source files than the currently Office Fabric UI in SharePoint Online, which will cause many of the icons not to load properly on the SharePoint Page this webpart is added to.
> Note: In order to use the ngOfficeFabric code I use the ModuleLoader to load newer source files than the currently Office Fabric UI in SharePoint Online, which will cause many of the icons not to load properly on the SharePoint Page this web part is added to.
> Note: For the display template of the search results I'm currently using the Office Fabric UI List template. Ideally I was hoping to use the DocumentCard Component, however, that is not yet available through the ngOfficUIFabric.
> Note: The List display is not currently displaying correctly because there appears to be an issue when loading https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.components.min.css which causes the dropdowns in the property pane not to work.
## Used SharePoint Framework Version
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-rc0-green.svg)
## Applies to
@ -43,7 +45,7 @@ The logic for querying the SharePoint Content Types in the properties of the web
Solution|Author(s)
--------|---------
angular-search|David Hartman ([Slalom](https://slalom.com))
angular-search|[David Hartman](https://github.com/davidhartman) ([Slalom](https://slalom.com))
## Version history
@ -52,6 +54,7 @@ Version|Date|Comments
1.0|February 4th, 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.**
---
@ -72,4 +75,15 @@ Version|Date|Comments
> and not by id because then I would get everything that inherits from that content type. I only want the
> the results for a specific content type and not everything that inherits that content type as well
## Support
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=angular-search&authors=@davidhartman&title=angular-search%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=angular-search&authors=@davidhartman&title=angular-search%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=angular-search&authors=@davidhartman&title=angular-search%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-search" />

52
samples/angular-search/assets/sample.json
View File

@ -1 +1,51 @@
{"name":"pnp-sp-dev-spfx-web-parts-angular-search","version":null,"source":"pnp","title":"Search Client-Side Web Part Built with Angular v1.x","shortDescription":"This is a sample search web part that illustrates how you can use Angular within the new SharePoint Framework","longDescription":["This is a sample search web part that illustrates how you can use Angular within the new SharePoint Framework"],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"rc0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/angular-search/assets/angularSearch.png","alt":"Search Client-Side Web Part Built with Angular v1.x","slides":null}],"authors":[{"gitHubAccount":"davidhartman","company":"","pictureUrl":"https://github.com/davidhartman.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-angular-search",
"source": "pnp",
"title": "Search Client-Side Web Part Built with Angular v1.x",
"shortDescription": "This is a sample search web part that illustrates how you can use Angular within the new SharePoint Framework",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-search",
"longDescription": [
"This is a sample search web part that illustrates how you can use Angular within the new SharePoint Framework"
],
"creationDateTime": "2017-02-04",
"updateDateTime": "2017-02-04",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Angular"
},
{
"key": "SPFX-VERSION",
"value": "rc0"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-search/assets/angularSearch.png",
"alt": "Search Client-Side Web Part Built with Angular v1.x"
}
],
"authors": [
{
"gitHubAccount": "davidhartman",
"company": "Slalom",
"pictureUrl": "https://avatars.githubusercontent.com/u/11304394?s=460\u0026v=4",
"name": "David Hartman"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

14
samples/angular-todo/README.md
View File

@ -23,6 +23,7 @@ Sample Web Part illustrating using Angular with the SharePoint Framework.
![Sample To do SharePoint Framework client-side web part built using Angular](./assets/preview.png)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-GA-green.svg)
## Applies to
@ -34,7 +35,7 @@ Sample Web Part illustrating using Angular with the SharePoint Framework.
Solution|Author(s)
--------|---------
angular-todo|Waldek Mastykarz (MVP, Rencore, @waldekm)
angular-todo|[Waldek Mastykarz](https://github.com/waldekmastykarz) (MVP, Rencore, @waldekm)
## Version history
@ -43,6 +44,7 @@ Version|Date|Comments
1.0|March 10, 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.**
---
@ -67,4 +69,14 @@ This web part illustrates the following concepts on top of the SharePoint Framew
* using conditional rendering for one-time web part setup
* passing web part configuration to Angular and reacting to configuration changes
## Support
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=angular-todo&authors=@waldekmastykarz&title=angular-todo%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=angular-todo&authors=@waldekmastykarz&title=angular-todo%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=angular-todo&authors=@waldekmastykarz&title=angular-todo%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-todo" />

53
samples/angular-todo/assets/sample.json
View File

@ -1 +1,52 @@
{"name":"pnp-sp-dev-spfx-web-parts-angular-todo","version":null,"source":"pnp","title":"Angular client-side web part","shortDescription":"Sample Web Part illustrating using Angular with the SharePoint Framework.","longDescription":["Sample Web Part illustrating using Angular with the SharePoint Framework."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/angular-todo/assets/preview.png","alt":"Angular client-side web part","slides":null}],"authors":[{"gitHubAccount":"waldekmastykarz","company":"","pictureUrl":"https://github.com/waldekmastykarz.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-angular-todo",
"source": "pnp",
"title": "Angular client-side web part",
"shortDescription": "Sample Web Part illustrating using Angular with the SharePoint Framework.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-todo",
"longDescription": [
"Sample Web Part illustrating using Angular with the SharePoint Framework."
],
"creationDateTime": "2017-03-10",
"updateDateTime": "2017-03-10",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Angular"
},
{
"key": "SPFX-VERSION",
"value": "GA"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-todo/assets/preview.png",
"alt": "Angular client-side web part"
}
],
"authors": [
{
"gitHubAccount": "waldekmastykarz",
"company": "Microsoft",
"pictureUrl": "https://github.com/waldekmastykarz.png",
"name": "Waldek Mastykarz",
"twitter": "waldekm"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

23
samples/angular2-prototype/README.md
View File

@ -16,17 +16,20 @@ extensions:
# Angular2 Web Part Prototype
## Note to developers
> This web part sample is currently in prototype phase and subject to change.
This sample is not currently supported for use in production environments as unexpected behavior may occur.
It is provided as guidance for building Angular2 web parts in the SharePoint Framework environment.
This sample is a work in progress and it will be updated as advances in stability are made.
## Summary
Sample To Do Web Part built with Angular2. This sample illustrates how you can use Angular2 with the SharePoint Framework.
![Sample of the search web part](./assets/preview.png)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-RC0-green.svg)
## Applies to
@ -42,7 +45,8 @@ Sample To Do Web Part built with Angular2. This sample illustrates how you can u
Solution|Author(s)
--------|---------
angular2-prototype | Manish Garg, Daniel Gaeta
angular2-prototype | Manish Garg
angular2-prototype | [Daniel Gaeta](https://github.com/dgaeta)
## Version history
@ -53,6 +57,7 @@ Version|Date|Comments
0.1|August 14, 2016|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.**
---
@ -68,12 +73,14 @@ Version|Date|Comments
- Test out the web part
## Features
This is a sample client-side web part built on the SharePoint Framework using Angular2 for building the UI component of the web part.
The SharePoint Framework is designed to allow developers to build web parts using the web framework of their choice.
In this prototype we make use of the Angular2 framework. The BaseAngular2WebPart class tries to abstract some of the Angular2 integration.
This way the developer can focus on their web part code and not worry about Angular2 integration.
### Protoype anomalies
Please note, this is an early prototype and we are still trying to learn the best practices of the Angular2 framework.
Angular2 uses TypeScript decorators to annotate classes as Components and Modules.
And also recommends that there be only one NgModule per application.
@ -83,13 +90,27 @@ Though this is not a best practice, it helps build web parts successfully.
We are trying to find better solutions to this problem. Specially, how to avoid creating a separate NgModule for each web part.
### Adding functionality
To add functionality to this web part prototype the main file to edit is `TodoWebPart.ts`, here there are comments to help you alter the prototype.
### Web part concepts
The web part displays a title, button to add to dos and a button to print the to do items to the console.
This web part illustrates the following concepts on top of the SharePoint Framework:
- Changing a property (the title) of a web part using the PropertyPane
- Manipulating properties in the Angular2 component class and saving to web part’s property bag
## Support
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=angular2-prototype=@dgaeta&title=angular-todo%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=angular2-prototype=@dgaeta&title=angular-todo%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=angular2-prototype=@dgaeta&title=angular-todo%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular2-prototype" />

52
samples/angular2-prototype/assets/sample.json
View File

@ -1 +1,51 @@
{"name":"pnp-sp-dev-spfx-web-parts-angular2-prototype","version":null,"source":"pnp","title":"Angular2 Web Part Prototype","shortDescription":"Sample To Do Web Part built with Angular2. This sample illustrates how you can use Angular2 with the SharePoint Framework.","longDescription":["Sample To Do Web Part built with Angular2. This sample illustrates how you can use Angular2 with the SharePoint Framework."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"rc0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/angular2-prototype/assets/preview.png","alt":"Angular2 Web Part Prototype","slides":null}],"authors":[{"gitHubAccount":null,"company":"","pictureUrl":"https://github.com/.png"},{"gitHubAccount":"dgaeta","company":"","pictureUrl":"https://github.com/dgaeta.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-angular2-prototype",
"source": "pnp",
"title": "Angular2 Web Part Prototype",
"shortDescription": "Sample To Do Web Part built with Angular2. This sample illustrates how you can use Angular2 with the SharePoint Framework.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular2-prototype",
"longDescription": [
"Sample To Do Web Part built with Angular2. This sample illustrates how you can use Angular2 with the SharePoint Framework."
],
"creationDateTime": "2017-01-20",
"updateDateTime": "2017-01-20",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Angular"
},
{
"key": "SPFX-VERSION",
"value": "rc0"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular2-prototype/assets/preview.png",
"alt": "Angular2 Web Part Prototype"
}
],
"authors": [
{
"gitHubAccount": "dgaeta",
"company": "",
"pictureUrl": "https://avatars.githubusercontent.com/u/1770329?s=460\u0026v=4",
"name": "Daniel Gaeta"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

15
samples/angularelements-helloworld/README.md
View File

@ -20,6 +20,7 @@ extensions:
Set of sample web parts illustrating how to use Angular Elements in the SharePoint Framework.
## Used SharePoint Framework Version
![SPFx 1.4.1](https://img.shields.io/badge/spfx-1.4.1-green.svg)
## Applies to
@ -31,7 +32,8 @@ Set of sample web parts illustrating how to use Angular Elements in the SharePoi
Solution|Author(s)
--------|---------
angularelements-helloworld|Waldek Mastykarz (MVP, Rencore, @waldekm), Sébastien Levert (MVP, Valo, @sebastienlevert)
angularelements-helloworld|[Waldek Mastykarz](https://github.com/waldekmastykarz) (MVP, Rencore, @waldekm),
angularelements-helloworld|[Sébastien Levert](https://github.com/sebastienlevert) (MVP, Valo, @sebastienlevert)
## Version history
@ -40,6 +42,7 @@ Version|Date|Comments
1.0|June 1, 2018|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.**
---
@ -67,4 +70,14 @@ This web part illustrates the following concepts on top of the SharePoint Framew
* calling the SharePoint REST API from an Angular Element using PnPjs
* calling the Microsoft Graph from an Angular Element using PnPjs
## Support
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=angularelements-helloworld=@waldekmastykarz,%20@sebastienlevert&title=angular-todo%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=angularelements-helloworld=@waldekmastykarz,%20@sebastienlevert&title=angular-todo%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=angularelements-helloworld=@waldekmastykarz,%20@sebastienlevert&title=angular-todo%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angularelements-helloworld" />

60
samples/angularelements-helloworld/assets/sample.json
View File

@ -1 +1,59 @@
{"name":"pnp-sp-dev-spfx-web-parts-angularelements-helloworld","version":null,"source":"pnp","title":"Angular Elements in SharePoint Framework","shortDescription":"Set of sample web parts illustrating how to use Angular Elements in the SharePoint Framework.","longDescription":["Set of sample web parts illustrating how to use Angular Elements in the SharePoint Framework."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"1.4.1"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png","alt":"Angular Elements in SharePoint Framework","slides":null}],"authors":[{"gitHubAccount":"waldekmastykarz","company":"","pictureUrl":"https://github.com/waldekmastykarz.png"},{"gitHubAccount":"sebastienlevert","company":"","pictureUrl":"https://github.com/sebastienlevert.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-angularelements-helloworld",
"source": "pnp",
"title": "Angular Elements in SharePoint Framework",
"shortDescription": "Set of sample web parts illustrating how to use Angular Elements in the SharePoint Framework.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angularelements-helloworld",
"longDescription": [
"Set of sample web parts illustrating how to use Angular Elements in the SharePoint Framework."
],
"creationDateTime": "2018-06-01",
"updateDateTime": "2018-06-01",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Angular"
},
{
"key": "SPFX-VERSION",
"value": "1.4.1"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png",
"alt": "Angular Elements in SharePoint Framework"
}
],
"authors": [
{
"gitHubAccount": "waldekmastykarz",
"company": "Microsoft",
"pictureUrl": "https://github.com/waldekmastykarz.png",
"name": "Waldek Mastykarz",
"twitter": "waldekm"
},
{
"gitHubAccount": "sebastienlevert",
"company": "Microsoft",
"pictureUrl": "https://github.com/sebastienlevert.png",
"name": "S\u00E9bastien Levert",
"twitter": "sebastienlevert"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

516
samples/angularelements-helloworld/package-lock.json generated
View File

@ -1795,6 +1795,12 @@
"acorn": "4.0.13"
}
},
"acorn-walk": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.2.0.tgz",
"integrity": "sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==",
"dev": true
},
"adal-angular": {
"version": "1.0.16",
"resolved": "https://registry.npmjs.org/adal-angular/-/adal-angular-1.0.16.tgz",
@ -2210,9 +2216,9 @@
"dev": true
},
"async-limiter": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
"integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==",
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
"dev": true
},
"asynckit": {
@ -2828,21 +2834,22 @@
"callsite": "1.0.0"
}
},
"bfj-node4": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/bfj-node4/-/bfj-node4-5.3.1.tgz",
"integrity": "sha512-SOmOsowQWfXc7ybFARsK3C4MCOWzERaOMV/Fl3Tgjs+5dJWyzo3oa127jL44eMbQiAN17J7SvAs2TRxEScTUmg==",
"bfj": {
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/bfj/-/bfj-6.1.2.tgz",
"integrity": "sha512-BmBJa4Lip6BPRINSZ0BPEIfB1wUY/9rwbwvIHQA1KjX9om29B6id0wnWXq7m3bn5JrUVjeOTnVuhPT1FiHwPGw==",
"dev": true,
"requires": {
"bluebird": "3.5.1",
"check-types": "7.3.0",
"tryer": "1.0.0"
"bluebird": "^3.5.5",
"check-types": "^8.0.3",
"hoopy": "^0.1.4",
"tryer": "^1.0.1"
},
"dependencies": {
"bluebird": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.1.tgz",
"integrity": "sha512-MKiLiV+I1AA596t9w1sQJ8jkiSr5+ZKi0WKrYGUn6d1Fx+Ij4tIj+m2WMQSGczs5jZVxV339chE8iwk6F64wjA==",
"version": "3.7.2",
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
"dev": true
}
}
@ -3343,9 +3350,9 @@
"dev": true
},
"check-types": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/check-types/-/check-types-7.3.0.tgz",
"integrity": "sha1-Ro9XGkQ1wkJI9f0MsOjYfDw0Hn0=",
"version": "8.0.3",
"resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
"integrity": "sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==",
"dev": true
},
"chokidar": {
@ -6055,7 +6062,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@ -6076,12 +6084,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "1.0.0",
"concat-map": "0.0.1"
@ -6096,17 +6106,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@ -6223,7 +6236,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@ -6235,6 +6249,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "1.0.1"
}
@ -6249,6 +6264,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "1.1.11"
}
@ -6256,12 +6272,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "5.1.1",
"yallist": "3.0.2"
@ -6280,6 +6298,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -6360,7 +6379,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@ -6372,6 +6392,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1.0.2"
}
@ -6457,7 +6478,8 @@
"safe-buffer": {
"version": "5.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@ -6493,6 +6515,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "1.1.0",
"is-fullwidth-code-point": "1.0.0",
@ -6512,6 +6535,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "2.1.1"
}
@ -6555,12 +6579,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},
@ -8335,19 +8361,19 @@
}
},
"gzip-size": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-4.1.0.tgz",
"integrity": "sha1-iuCWJX6r59acRb4rZ8RIEk/7UXw=",
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
"integrity": "sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==",
"dev": true,
"requires": {
"duplexer": "0.1.1",
"pify": "3.0.0"
"duplexer": "^0.1.1",
"pify": "^4.0.1"
},
"dependencies": {
"pify": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
"dev": true
}
}
@ -8574,6 +8600,12 @@
"parse-passwd": "1.0.0"
}
},
"hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
"integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==",
"dev": true
},
"hosted-git-info": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.6.0.tgz",
@ -12383,9 +12415,9 @@
"dev": true
},
"opener": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/opener/-/opener-1.4.3.tgz",
"integrity": "sha1-XG2ixdflgx6P+jlklQ+NZnSskLg=",
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
"integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
"dev": true
},
"optimist": {
@ -15923,6 +15955,12 @@
"repeat-string": "1.6.1"
}
},
"toidentifier": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
"integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
"dev": true
},
"tough-cookie": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz",
@ -15979,9 +16017,9 @@
"dev": true
},
"tryer": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.0.tgz",
"integrity": "sha1-Antp+oIyJeVRys4+8DsR9qs3wdc=",
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
"integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
"dev": true
},
"tslib": {
@ -17062,39 +17100,40 @@
}
},
"webpack-bundle-analyzer": {
"version": "2.13.1",
"resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.13.1.tgz",
"integrity": "sha512-rwxyfecTAxoarCC9VlHlIpfQCmmJ/qWD5bpbjkof+7HrNhTNZIwZITxN6CdlYL2axGmwNUQ+tFgcSOiNXMf/sQ==",
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.3.2.tgz",
"integrity": "sha512-7qvJLPKB4rRWZGjVp5U1KEjwutbDHSKboAl0IfafnrdXMrgC0tOtZbQD6Rw0u4cmpgRN4O02Fc0t8eAT+FgGzA==",
"dev": true,
"requires": {
"acorn": "5.5.3",
"bfj-node4": "5.3.1",
"chalk": "2.4.1",
"commander": "2.15.1",
"ejs": "2.6.1",
"express": "4.16.3",
"filesize": "3.6.1",
"gzip-size": "4.1.0",
"lodash": "4.17.10",
"mkdirp": "0.5.1",
"opener": "1.4.3",
"ws": "4.1.0"
"acorn": "^6.0.7",
"acorn-walk": "^6.1.1",
"bfj": "^6.1.1",
"chalk": "^2.4.1",
"commander": "^2.18.0",
"ejs": "^2.6.1",
"express": "^4.16.3",
"filesize": "^3.6.1",
"gzip-size": "^5.0.0",
"lodash": "^4.17.10",
"mkdirp": "^0.5.1",
"opener": "^1.5.1",
"ws": "^6.0.0"
},
"dependencies": {
"accepts": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
"integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=",
"version": "1.3.7",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
"integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
"dev": true,
"requires": {
"mime-types": "2.1.18",
"negotiator": "0.6.1"
"mime-types": "~2.1.24",
"negotiator": "0.6.2"
}
},
"acorn": {
"version": "5.5.3",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-5.5.3.tgz",
"integrity": "sha512-jd5MkIUlbbmb07nXH0DT3y7rDVtkzDi4XZOUVWAer8ajmF/DTSSbl5oNFyDOl/OXA33Bl79+ypHhl2pN20VeOQ==",
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
"integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
"dev": true
},
"ansi-styles": {
@ -17103,38 +17142,65 @@
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"dev": true,
"requires": {
"color-convert": "1.9.1"
"color-convert": "^1.9.0"
}
},
"body-parser": {
"version": "1.18.2",
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.2.tgz",
"integrity": "sha1-h2eKGdhLR9hZuDGZvVm84iKxBFQ=",
"version": "1.19.0",
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
"integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
"dev": true,
"requires": {
"bytes": "3.0.0",
"content-type": "1.0.4",
"bytes": "3.1.0",
"content-type": "~1.0.4",
"debug": "2.6.9",
"depd": "1.1.2",
"http-errors": "1.6.3",
"iconv-lite": "0.4.19",
"on-finished": "2.3.0",
"qs": "6.5.1",
"raw-body": "2.3.2",
"type-is": "1.6.16"
"depd": "~1.1.2",
"http-errors": "1.7.2",
"iconv-lite": "0.4.24",
"on-finished": "~2.3.0",
"qs": "6.7.0",
"raw-body": "2.4.0",
"type-is": "~1.6.17"
}
},
"bytes": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
"integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
"dev": true
},
"chalk": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
"integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dev": true,
"requires": {
"ansi-styles": "3.2.1",
"escape-string-regexp": "1.0.5",
"supports-color": "5.4.0"
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
}
},
"commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true
},
"content-disposition": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
"integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
"dev": true,
"requires": {
"safe-buffer": "5.1.2"
}
},
"cookie": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
"integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
"dev": true
},
"etag": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
@ -17142,56 +17208,56 @@
"dev": true
},
"express": {
"version": "4.16.3",
"resolved": "https://registry.npmjs.org/express/-/express-4.16.3.tgz",
"integrity": "sha1-avilAjUNsyRuzEvs9rWjTSL37VM=",
"version": "4.17.1",
"resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
"integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
"dev": true,
"requires": {
"accepts": "1.3.5",
"accepts": "~1.3.7",
"array-flatten": "1.1.1",
"body-parser": "1.18.2",
"content-disposition": "0.5.2",
"content-type": "1.0.4",
"cookie": "0.3.1",
"body-parser": "1.19.0",
"content-disposition": "0.5.3",
"content-type": "~1.0.4",
"cookie": "0.4.0",
"cookie-signature": "1.0.6",
"debug": "2.6.9",
"depd": "1.1.2",
"encodeurl": "1.0.2",
"escape-html": "1.0.3",
"etag": "1.8.1",
"finalhandler": "1.1.1",
"depd": "~1.1.2",
"encodeurl": "~1.0.2",
"escape-html": "~1.0.3",
"etag": "~1.8.1",
"finalhandler": "~1.1.2",
"fresh": "0.5.2",
"merge-descriptors": "1.0.1",
"methods": "1.1.2",
"on-finished": "2.3.0",
"parseurl": "1.3.2",
"methods": "~1.1.2",
"on-finished": "~2.3.0",
"parseurl": "~1.3.3",
"path-to-regexp": "0.1.7",
"proxy-addr": "2.0.3",
"qs": "6.5.1",
"range-parser": "1.2.0",
"safe-buffer": "5.1.1",
"send": "0.16.2",
"serve-static": "1.13.2",
"setprototypeof": "1.1.0",
"statuses": "1.4.0",
"type-is": "1.6.16",
"proxy-addr": "~2.0.5",
"qs": "6.7.0",
"range-parser": "~1.2.1",
"safe-buffer": "5.1.2",
"send": "0.17.1",
"serve-static": "1.14.1",
"setprototypeof": "1.1.1",
"statuses": "~1.5.0",
"type-is": "~1.6.18",
"utils-merge": "1.0.1",
"vary": "1.1.2"
"vary": "~1.1.2"
}
},
"finalhandler": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
"integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
"integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
"dev": true,
"requires": {
"debug": "2.6.9",
"encodeurl": "1.0.2",
"escape-html": "1.0.3",
"on-finished": "2.3.0",
"parseurl": "1.3.2",
"statuses": "1.4.0",
"unpipe": "1.0.0"
"encodeurl": "~1.0.2",
"escape-html": "~1.0.3",
"on-finished": "~2.3.0",
"parseurl": "~1.3.3",
"statuses": "~1.5.0",
"unpipe": "~1.0.0"
}
},
"fresh": {
@ -17206,146 +17272,172 @@
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
"dev": true
},
"http-errors": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
"integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
"dev": true,
"requires": {
"depd": "~1.1.2",
"inherits": "2.0.3",
"setprototypeof": "1.1.1",
"statuses": ">= 1.5.0 < 2",
"toidentifier": "1.0.0"
}
},
"iconv-lite": {
"version": "0.4.19",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
"integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==",
"dev": true
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
"dev": true,
"requires": {
"safer-buffer": ">= 2.1.2 < 3"
}
},
"ipaddr.js": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.6.0.tgz",
"integrity": "sha1-4/o1e3c9phnybpXwSdBVxyeW+Gs=",
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
"dev": true
},
"lodash": {
"version": "4.17.10",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
"integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
},
"mime": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
"integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==",
"mime-db": {
"version": "1.47.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.47.0.tgz",
"integrity": "sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw==",
"dev": true
},
"mime-types": {
"version": "2.1.30",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.30.tgz",
"integrity": "sha512-crmjA4bLtR8m9qLpHvgxSChT+XoSlZi8J4n/aIdn3z92e/U47Z0V/yl+Wh9W046GgFVAmoNR/fmdbZYcSSIUeg==",
"dev": true,
"requires": {
"mime-db": "1.47.0"
}
},
"ms": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
"dev": true
},
"negotiator": {
"version": "0.6.2",
"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
"integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==",
"dev": true
},
"parseurl": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
"dev": true
},
"proxy-addr": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.3.tgz",
"integrity": "sha512-jQTChiCJteusULxjBp8+jftSQE5Obdl3k4cnmLA6WXtK6XFuWRnvVL7aCiBqaLPM8c4ph0S4tKna8XvmIwEnXQ==",
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
"integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
"dev": true,
"requires": {
"forwarded": "0.1.2",
"ipaddr.js": "1.6.0"
"forwarded": "~0.1.2",
"ipaddr.js": "1.9.1"
}
},
"qs": {
"version": "6.5.1",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz",
"integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==",
"version": "6.7.0",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
"integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
"dev": true
},
"range-parser": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
"dev": true
},
"raw-body": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.2.tgz",
"integrity": "sha1-vNYMd9Prk83gBQKVw/N5OJvIj4k=",
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
"integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
"dev": true,
"requires": {
"bytes": "3.0.0",
"http-errors": "1.6.2",
"iconv-lite": "0.4.19",
"bytes": "3.1.0",
"http-errors": "1.7.2",
"iconv-lite": "0.4.24",
"unpipe": "1.0.0"
},
"dependencies": {
"depd": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz",
"integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=",
"dev": true
},
"http-errors": {
"version": "1.6.2",
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz",
"integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=",
"dev": true,
"requires": {
"depd": "1.1.1",
"inherits": "2.0.3",
"setprototypeof": "1.0.3",
"statuses": "1.4.0"
}
},
"setprototypeof": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz",
"integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=",
"dev": true
}
}
},
"safe-buffer": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
"integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
"dev": true
},
"send": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
"integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
"version": "0.17.1",
"resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
"integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
"dev": true,
"requires": {
"debug": "2.6.9",
"depd": "1.1.2",
"destroy": "1.0.4",
"encodeurl": "1.0.2",
"escape-html": "1.0.3",
"etag": "1.8.1",
"depd": "~1.1.2",
"destroy": "~1.0.4",
"encodeurl": "~1.0.2",
"escape-html": "~1.0.3",
"etag": "~1.8.1",
"fresh": "0.5.2",
"http-errors": "1.6.3",
"mime": "1.4.1",
"ms": "2.0.0",
"on-finished": "2.3.0",
"range-parser": "1.2.0",
"statuses": "1.4.0"
"http-errors": "~1.7.2",
"mime": "1.6.0",
"ms": "2.1.1",
"on-finished": "~2.3.0",
"range-parser": "~1.2.1",
"statuses": "~1.5.0"
}
},
"serve-static": {
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
"integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
"integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
"dev": true,
"requires": {
"encodeurl": "1.0.2",
"escape-html": "1.0.3",
"parseurl": "1.3.2",
"send": "0.16.2"
"encodeurl": "~1.0.2",
"escape-html": "~1.0.3",
"parseurl": "~1.3.3",
"send": "0.17.1"
}
},
"statuses": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
"integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==",
"setprototypeof": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
"dev": true
},
"supports-color": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
"integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"requires": {
"has-flag": "3.0.0"
"has-flag": "^3.0.0"
}
},
"type-is": {
"version": "1.6.18",
"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
"integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
"dev": true,
"requires": {
"media-typer": "0.3.0",
"mime-types": "~2.1.24"
}
},
"ws": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/ws/-/ws-4.1.0.tgz",
"integrity": "sha512-ZGh/8kF9rrRNffkLFV4AzhvooEclrOH0xaugmqGsIfFgOE/pIz4fMc4Ef+5HSQqTEug2S9JZIWDR47duDSLfaA==",
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
"integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
"dev": true,
"requires": {
"async-limiter": "1.0.0",
"safe-buffer": "5.1.1"
"async-limiter": "~1.0.0"
}
}
}

2
samples/angularelements-helloworld/package.json
View File

@ -42,6 +42,6 @@
"ajv": "~5.2.2",
"gulp": "~3.9.1",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack-bundle-analyzer": "^2.13.1"
"webpack-bundle-analyzer": "^3.3.2"
}
}

15
samples/angularelements-html-templatefile/README.md
View File

@ -21,7 +21,8 @@ extensions:
A sample web part illustrating how to use Angular Elements in the SharePoint Framework with the help of separate template HTML File.
## Used SharePoint Framework Version
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-1.4.1-green.svg)
## Applies to
@ -33,7 +34,7 @@ A sample web part illustrating how to use Angular Elements in the SharePoint Fra
Solution|Author(s)
--------|---------
angularelements-html-templatefile| Jayakumar Balasubramaniam (C# Corner MVP, Hubfly, @jayakumrB)
angularelements-html-templatefile| [Jayakumar Balasubramaniam](https://github.com/JayakumarB) (C# Corner MVP, Hubfly, [@jayakumrB](https://twitter.com/jayakumrB))
## Version history
@ -84,5 +85,15 @@ build.rig.addPostTypescriptTask(tsInlines);
//************END: Added to handle Template file url ************/
```
## Support
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=angularelements-html-templatefile=@JayakumarB&title=angular-todo%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=angularelements-html-templatefile=@JayakumarB&title=angular-todo%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=angularelements-html-templatefile=@JayakumarB&title=angular-todo%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angularelements-helloworld" />

53
samples/angularelements-html-templatefile/assets/sample.json
View File

@ -1 +1,52 @@
{"name":"pnp-sp-dev-spfx-web-parts-angularelements-html-templatefile","version":null,"source":"pnp","title":"Angular Elements with HTML Template File in SharePoint Framework","shortDescription":"A sample web part illustrating how to use Angular Elements in the SharePoint Framework with the help of separate template HTML File.","longDescription":["A sample web part illustrating how to use Angular Elements in the SharePoint Framework with the help of separate template HTML File."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"1.4.1"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png","alt":"Angular Elements with HTML Template File in SharePoint Framework","slides":null}],"authors":[{"gitHubAccount":"JayakumarB","company":"","pictureUrl":"https://github.com/JayakumarB.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-angularelements-html-templatefile",
"source": "pnp",
"title": "Angular Elements with HTML Template File in SharePoint Framework",
"shortDescription": "A sample web part illustrating how to use Angular Elements in the SharePoint Framework with the help of separate template HTML File.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angularelements-html-templatefile",
"longDescription": [
"A sample web part illustrating how to use Angular Elements in the SharePoint Framework with the help of separate template HTML File."
],
"creationDateTime": "2019-01-08",
"updateDateTime": "2019-01-08",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Angular"
},
{
"key": "SPFX-VERSION",
"value": "1.4.1"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png",
"alt": "Angular Elements with HTML Template File in SharePoint Framework"
}
],
"authors": [
{
"gitHubAccount": "JayakumarB",
"company": "Hubfly",
"pictureUrl": "https://github.com/JayakumarB.png",
"name": "Jayakumar Balasubramaniam",
"twitter": "jayakumrb"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

18
samples/bootstrap-slider/README.md
View File

@ -17,6 +17,7 @@ extensions:
# Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x
## Summary
Sample bootstrap slider which pulls the slides from a list inside the SharePoint site. The list is automatically deployed once the app is installed in the SharePoint site.
![First Slider Image](./assets/slider_image_1.png)
@ -26,6 +27,7 @@ Sample bootstrap slider which pulls the slides from a list inside the SharePoint
![Deployed List](./assets/List.png)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-ga-green.svg)
## Applies to
@ -37,7 +39,7 @@ Sample bootstrap slider which pulls the slides from a list inside the SharePoint
Solution|Author(s)
--------|---------
bootstrap-slider|David Hartman ([Slalom](https://slalom.com))
bootstrap-slider|[David Hartman](https://github.com/davidhartman) ([Slalom](https://slalom.com))
## Version History
@ -46,11 +48,13 @@ Version|Date|Comments
1.0|April 25th, 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.**
---
## Configuration Bliss
- clone this repo
- in write-manifests.json
- fill in the correct CDN path
@ -64,7 +68,17 @@ Version|Date|Comments
- add the app to your SharePoint Online site
- When the app is finished installing you should see a **SPFx List** in the **Site Contents** of the site
![Deployed List](./assets/List.png)
- Add items to the **SPFx List** in order for slides to display in the webpart
- Add items to the **SPFx List** in order for slides to display in the web part
## Support
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=bootstrap-slider=@davidhartman&title=angular-todo%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=bootstrap-slider=@davidhartman&title=angular-todo%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=bootstrap-slider=@davidhartman&title=angular-todo%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/bootstrap-slider" />

64
samples/bootstrap-slider/assets/sample.json
View File

@ -1 +1,63 @@
{"name":"pnp-sp-dev-spfx-web-parts-bootstrap-slider","version":null,"source":"pnp","title":"Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x","shortDescription":"Sample bootstrap slider which pulls the slides from a list inside the SharePoint site. The list is automatically deployed once the app is installed in the SharePoint site.","longDescription":["Sample bootstrap slider which pulls the slides from a list inside the SharePoint site. The list is automatically deployed once the app is installed in the SharePoint site."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Other"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/bootstrap-slider/assets/slider_image_1.png","alt":"Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x","slides":null}],"authors":[{"gitHubAccount":"davidhartman","company":"","pictureUrl":"https://github.com/davidhartman.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-bootstrap-slider",
"source": "pnp",
"title": "Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x",
"shortDescription": "Sample bootstrap slider which pulls the slides from a list inside the SharePoint site. The list is automatically deployed once the app is installed in the SharePoint site.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/bootstrap-slider",
"longDescription": [
"Sample bootstrap slider which pulls the slides from a list inside the SharePoint site. The list is automatically deployed once the app is installed in the SharePoint site."
],
"creationDateTime": "2017-04-25",
"updateDateTime": "2017-04-25",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "jQuery"
},
{
"key": "SPFX-VERSION",
"value": "GA"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/bootstrap-slider/assets/slider_image_1.png",
"alt": "Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x"
},
{
"type": "image",
"order": 101,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/bootstrap-slider/assets/List.png?raw=true",
"alt": "Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x"
},
{
"type": "image",
"order": 102,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/bootstrap-slider/assets/slider_image_2.png?raw=true",
"alt": "Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x"
}
],
"authors": [
{
"gitHubAccount": "davidhartman",
"company": "Slalom",
"pictureUrl": "https://avatars.githubusercontent.com/u/11304394?s=460\u0026v=4",
"name": "David Hartman"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

45
samples/handlebarsjs-webpack-loader/assets/sample.json
View File

@ -1 +1,44 @@
{"name":"pnp-sp-dev-spfx-web-parts-handlebarsjs-webpack-loader","version":null,"source":"pnp","title":"Sample with Handlebars.js","shortDescription":"This sample demonstrate how to set up SPFX to use Handlebars through webpack loader.","longDescription":["This sample demonstrate how to set up SPFX to use Handlebars through webpack loader."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Handlebars"},{"key":"SPFX-VERSION","value":"1.4.1"}],"thumbnails":[{"type":"image","order":100,"url":"https://avatars2.githubusercontent.com/u/5503835?s=460\u0026v=4","alt":"Sample with Handlebars.js","slides":null}],"authors":[{"gitHubAccount":"StfBauer","company":"","pictureUrl":"https://github.com/StfBauer.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-handlebarsjs-webpack-loader",
"source": "pnp",
"title": "Sample with Handlebars.js",
"shortDescription": "This sample demonstrate how to set up SPFX to use Handlebars through webpack loader.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/handlebarsjs-webpack-loader",
"longDescription": [
"This sample demonstrate how to set up SPFX to use Handlebars through webpack loader."
],
"creationDateTime": "2018-03-21",
"updateDateTime": "2018-03-21",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Other"
},
{
"key": "SPFX-VERSION",
"value": "1.4.1"
}
],
"authors": [
{
"gitHubAccount": "StfBauer",
"company": "N8D",
"pictureUrl": "https://github.com/StfBauer.png",
"name": "Stefan Bauer",
"twitter": "stfbauer"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

53
samples/jquery-cdn/assets/sample.json
View File

@ -1 +1,52 @@
{"name":"pnp-sp-dev-spfx-web-parts-jquery-cdn","version":null,"source":"pnp","title":"Using jQuery loaded from CDN","shortDescription":"This is a sample web Part that illustrates the use of jQuery and its plugins loaded from CDN for building SharePoint Framework client-side web parts.","longDescription":["This is a sample web Part that illustrates the use of jQuery and its plugins loaded from CDN for building SharePoint Framework client-side web parts."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"jQuery"},{"key":"SPFX-VERSION","value":"drop2"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/jquery-cdn/assets/preview_weather.png","alt":"Using jQuery loaded from CDN","slides":null}],"authors":[{"gitHubAccount":"waldekmastykarz","company":"","pictureUrl":"https://github.com/waldekmastykarz.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-jquery-cdn",
"source": "pnp",
"title": "Using jQuery loaded from CDN",
"shortDescription": "This is a sample web Part that illustrates the use of jQuery and its plugins loaded from CDN for building SharePoint Framework client-side web parts.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/jquery-cdn",
"longDescription": [
"This is a sample web Part that illustrates the use of jQuery and its plugins loaded from CDN for building SharePoint Framework client-side web parts."
],
"creationDateTime": "2016-09-16",
"updateDateTime": "2016-09-16",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "jQuery"
},
{
"key": "SPFX-VERSION",
"value": "drop2"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/jquery-cdn/assets/preview_weather.png",
"alt": "Using jQuery loaded from CDN"
}
],
"authors": [
{
"gitHubAccount": "waldekmastykarz",
"company": "Microsoft",
"pictureUrl": "https://github.com/waldekmastykarz.png",
"name": "Waldek Mastykarz",
"twitter": "waldekm"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

76
samples/jquery-photopile/assets/sample.json
View File

@ -1 +1,75 @@
{"name":"pnp-sp-dev-spfx-web-parts-jquery-photopile","version":null,"source":"pnp","title":"JQuery, Photopile.JS \u0026 Office UI Fabric Client-Side Web Part","shortDescription":"This is a sample web part that illustrated the use of JQuery and Photopile.Js with the SharePoint Framework.","longDescription":["This is a sample web part that illustrated the use of JQuery and Photopile.Js with the SharePoint Framework."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"jQuery"},{"key":"SPFX-VERSION","value":"drop1"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/jquery-photopile/assets/photopileoverview.gif","alt":"JQuery, Photopile.JS \u0026 Office UI Fabric Client-Side Web Part","slides":null}],"authors":[{"gitHubAccount":"OlivierCC","company":"","pictureUrl":"https://github.com/OlivierCC.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-jquery-photopile",
"source": "pnp",
"title": "JQuery, Photopile.JS \u0026 Office UI Fabric Client-Side Web Part",
"shortDescription": "This is a sample web part that illustrated the use of JQuery and Photopile.Js with the SharePoint Framework.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/jquery-photopile",
"longDescription": [
"This is a sample web part that illustrated the use of JQuery and Photopile.Js with the SharePoint Framework."
],
"creationDateTime": "2016-09-09",
"updateDateTime": "2016-09-09",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "jQuery"
},
{
"key": "SPFX-VERSION",
"value": "drop1"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/jquery-photopile/assets/photopileoverview.gif",
"alt": "JQuery, Photopile.JS \u0026 Office UI Fabric Client-Side Web Part"
},
{
"type": "image",
"order": 101,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/jquery-photopile/assets/tutorial-add-spapp-01.png?raw=true",
"alt": "JQuery, Photopile.JS \u0026 Office UI Fabric Client-Side Web Part"
},
{
"type": "image",
"order": 102,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/jquery-photopile/assets/tutorial-add-spapp-02.png?raw=true",
"alt": "JQuery, Photopile.JS \u0026 Office UI Fabric Client-Side Web Part"
},
{
"type": "image",
"order": 103,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/jquery-photopile/assets/tutorial-add-spapp-03.png?raw=true",
"alt": "JQuery, Photopile.JS \u0026 Office UI Fabric Client-Side Web Part"
},
{
"type": "image",
"order": 104,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/jquery-photopile/assets/tutorial-add-spapp-05.png?raw=true",
"alt": "JQuery, Photopile.JS \u0026 Office UI Fabric Client-Side Web Part"
}
],
"authors": [
{
"gitHubAccount": "OlivierCC",
"company": "Microsoft",
"pictureUrl": "https://github.com/OlivierCC.png",
"name": "Olivier Carpentier"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

57
samples/js-advanced-commenting/assets/sample.json
View File

@ -1 +1,56 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-advanced-commenting","version":null,"source":"pnp","title":"Advanced Comments Box","shortDescription":"This component is developed for the advanced usage of commenting the page or article etc. Page Comments lists will be created to store the comments.","longDescription":["This component is developed for the advanced usage of commenting the page or article etc. Page Comments lists will be created to store the comments."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"jQuery"},{"key":"SPFX-VERSION","value":"1.9.1"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-advanced-commenting/assets/Advanced-Comments-Box.gif","alt":"Advanced Comments Box","slides":null}],"authors":[{"gitHubAccount":"sudharsank","company":"","pictureUrl":"https://github.com/sudharsank.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-js-advanced-commenting",
"source": "pnp",
"title": "Advanced Comments Box",
"shortDescription": "This component is developed for the advanced usage of commenting the page or article etc. Page Comments lists will be created to store the comments.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-advanced-commenting",
"longDescription": [
"This component is developed for the advanced usage of commenting the page or article etc. Page Comments lists will be created to store the comments."
],
"creationDateTime": "2020-02-05",
"updateDateTime": "2020-02-05",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "jQuery"
},
{
"key": "SPFX-VERSION",
"value": "1.9.1"
},
{
"key": "PNPCONTROLS",
"value": "PropertyFieldSliderWithCallout, PropertyFieldToggleWithCallout, PropertyFieldListPicker"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-advanced-commenting/assets/Advanced-Comments-Box.gif",
"alt": "Advanced Comments Box"
}
],
"authors": [
{
"gitHubAccount": "sudharsank",
"company": "NTT Digital Business Solutions",
"pictureUrl": "https://github.com/sudharsank.png",
"name": "Sudharsan Kesavanarayanan",
"twitter": "sudharsank"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

58
samples/js-display-list/assets/sample.json
View File

@ -1 +1,57 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-display-list","version":null,"source":"pnp","title":"Display List JavaScript Client-Side Web Part","shortDescription":"This simplistic sample Web Part demonstrates the use of JavaScript in a SharePoint Framework web part. The properties pane for this web part display a drop down list of lists in the current web. Once the user selects one of the lists, the web part display the contents of the list.","longDescription":["This simplistic sample Web Part demonstrates the use of JavaScript in a SharePoint Framework web part. The properties pane for this web part display a drop down list of lists in the current web. Once the user selects one of the lists, the web part display the contents of the list."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.11.0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-display-list/assets/display-list-preview.png","alt":"Display List JavaScript Client-Side Web Part","slides":null}],"authors":[{"gitHubAccount":"VelinGeorgiev","company":"","pictureUrl":"https://github.com/VelinGeorgiev.png"},{"gitHubAccount":"sharepointknight","company":"","pictureUrl":"https://github.com/sharepointknight.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-js-display-list",
"source": "pnp",
"title": "Display List JavaScript Client-Side Web Part",
"shortDescription": "This simplistic sample Web Part demonstrates the use of JavaScript in a SharePoint Framework web part. The properties pane for this web part display a drop down list of lists in the current web. Once the user selects one of the lists, the web part display the contents of the list.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-display-list",
"longDescription": [
"This simplistic sample Web Part demonstrates the use of JavaScript in a SharePoint Framework web part. The properties pane for this web part display a drop down list of lists in the current web. Once the user selects one of the lists, the web part display the contents of the list."
],
"creationDateTime": "2020-08-29",
"updateDateTime": "2020-08-29",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Javascript"
},
{
"key": "SPFX-VERSION",
"value": "1.11.0"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-display-list/assets/display-list-preview.png",
"alt": "Display List JavaScript Client-Side Web Part"
}
],
"authors": [
{
"gitHubAccount": "VelinGeorgiev",
"company": "",
"pictureUrl": "https://github.com/VelinGeorgiev.png",
"name": "Velin Georgiev"
},
{
"gitHubAccount": "sharepointknight",
"company": "",
"pictureUrl": "https://github.com/sharepointknight.png",
"name": "Ryan Schouten"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

59
samples/js-dynamic-bundling-libraries/assets/sample.json
View File

@ -1 +1,58 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-dynamic-bundling-libraries","version":null,"source":"pnp","title":"Dynamic Bundling \u0026 Loading of SPFx Packages","shortDescription":"This sample illustrates how SPFx functionality and packages can be bundled in multiple \u0027.js\u0027 files then be dynamically \u0026 asynchronously loaded into the page at execution time, such as with a button click.","longDescription":["This sample illustrates how SPFx functionality and packages can be bundled in multiple \u0027.js\u0027 files then be dynamically \u0026 asynchronously loaded into the page at execution time, such as with a button click."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.7.0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-dynamic-bundling-libraries/assets/WebPart-Preview-PostjQueryClick.jpg","alt":"Dynamic Bundling \u0026 Loading of SPFx Packages","slides":null}],"authors":[{"gitHubAccount":"PopWarner","company":"","pictureUrl":"https://github.com/PopWarner.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-js-dynamic-bundling-libraries",
"source": "pnp",
"title": "Dynamic Bundling \u0026 Loading of SPFx Packages",
"shortDescription": "This sample illustrates how SPFx functionality and packages can be bundled in multiple \u0027.js\u0027 files then be dynamically \u0026 asynchronously loaded into the page at execution time, such as with a button click.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-dynamic-bundling-libraries",
"longDescription": [
"This sample illustrates how SPFx functionality and packages can be bundled in multiple \u0027.js\u0027 files then be dynamically \u0026 asynchronously loaded into the page at execution time, such as with a button click."
],
"creationDateTime": "2018-12-03",
"updateDateTime": "2018-12-03",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Javascript"
},
{
"key": "SPFX-VERSION",
"value": "1.7.0"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-dynamic-bundling-libraries/assets/WebPart-Preview-PostjQueryClick.jpg",
"alt": "Dynamic Bundling \u0026 Loading of SPFx Packages"
},
{
"type": "image",
"order": 101,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-dynamic-bundling-libraries/assets/WebPart-Preview-PreClick.jpg?raw=true",
"alt": "Dynamic Bundling \u0026 Loading of SPFx Packages"
}
],
"authors": [
{
"gitHubAccount": "PopWarner",
"company": "Catapult Systems",
"pictureUrl": "https://avatars.githubusercontent.com/u/10676147?s=460\u0026u=9e4e74223c4ffb430fb77c97892a84b286df1921\u0026v=4",
"name": "David Warner II",
"twitter": "PopWarner"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

3
samples/js-employee-spotlight/README.md
View File

@ -61,6 +61,7 @@ Version|Date|Comments
## 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.**
@ -85,7 +86,7 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
- the titles webs in current sitecollection
- titles of the lists in the selected web
- fields of a selected list
* Use of a third party control(sp-client-custom-fields) for selecting webpart foregroud and background colors.
* Use of a third party control(sp-client-custom-fields) for selecting web part foreground and background colors.
* Use of switch, slider controls to configure slider speed and auto scrolling.
* Using a javascript slider.
* Fetching the user details from User Profile service like user designation, user profile image.

58
samples/js-employee-spotlight/assets/sample.json
View File

@ -1 +1,57 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-employee-spotlight","version":null,"source":"pnp","title":"Display Employee Spotlight JavaScript Client-Side Web Part","shortDescription":"Simple Web Part that demonstrates the use of SharePoint Framework for showcasing Employee Spotlight. The web part pulls data from a configured list and User Profile service. The properties pane for this web part has 5 cascading dropdowns.","longDescription":["Simple Web Part that demonstrates the use of SharePoint Framework for showcasing Employee Spotlight. The web part pulls data from a configured list and User Profile service. The properties pane for this web part has 5 cascading dropdowns."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-employee-spotlight/assets/Employee-spotlight-priview.png","alt":"Display Employee Spotlight JavaScript Client-Side Web Part","slides":null}],"authors":[{"gitHubAccount":"brk114","company":"","pictureUrl":"https://github.com/brk114.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-js-employee-spotlight",
"source": "pnp",
"title": "Display Employee Spotlight JavaScript Client-Side Web Part",
"shortDescription": "Simple Web Part that demonstrates the use of SharePoint Framework for showcasing Employee Spotlight. The web part pulls data from a configured list and User Profile service. The properties pane for this web part has 5 cascading dropdowns.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-employee-spotlight",
"longDescription": [
"Simple Web Part that demonstrates the use of SharePoint Framework for showcasing Employee Spotlight. The web part pulls data from a configured list and User Profile service. The properties pane for this web part has 5 cascading dropdowns."
],
"creationDateTime": "2017-06-12",
"updateDateTime": "2017-06-12",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Javascript"
},
{
"key": "SPFX-VERSION",
"value": "GA"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-employee-spotlight/assets/Employee-spotlight-priview.png",
"alt": "Display Employee Spotlight JavaScript Client-Side Web Part"
},
{
"type": "image",
"order": 101,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-employee-spotlight/assets/Employee-spotlight-options.png?raw=true",
"alt": "Display Employee Spotlight JavaScript Client-Side Web Part"
}
],
"authors": [
{
"gitHubAccount": "brk114",
"company": "TechDimension IT Solutions",
"pictureUrl": "https://github.com/brk114.png",
"name": "Ravi Kumar Bomma"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

53
samples/js-extend-gulp/assets/sample.json
View File

@ -1 +1,52 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-extend-gulp","version":null,"source":"pnp","title":"Integrating custom gulp tasks to SharePoint Framwork toolchain","shortDescription":"SharePoint client-side development tools use gulp as the build process task runner to...","longDescription":["SharePoint client-side development tools use gulp as the build process task runner to..."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"rc0"}],"thumbnails":[{"type":"image","order":100,"url":"https://avatars3.githubusercontent.com/u/7882052?s=460\u0026v=4","alt":"Integrating custom gulp tasks to SharePoint Framwork toolchain","slides":null}],"authors":[{"gitHubAccount":"chakkaradeep","company":"","pictureUrl":"https://github.com/chakkaradeep.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-js-extend-gulp",
"source": "pnp",
"title": "Integrating custom gulp tasks to SharePoint Framwork toolchain",
"shortDescription": "SharePoint client-side development tools use gulp as the build process task runner to...",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-extend-gulp",
"longDescription": [
"SharePoint client-side development tools use gulp as the build process task runner to..."
],
"creationDateTime": "2017-01-25",
"updateDateTime": "2017-01-25",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Javascript"
},
{
"key": "SPFX-VERSION",
"value": "rc0"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://avatars3.githubusercontent.com/u/7882052?s=460\u0026v=4",
"alt": "Integrating custom gulp tasks to SharePoint Framwork toolchain"
}
],
"authors": [
{
"gitHubAccount": "chakkaradeep",
"company": "Microsoft",
"pictureUrl": "https://avatars.githubusercontent.com/u/7882052?s=460\u0026u=92d546edfe1e1b374c69f0fd9315186eea700b8f\u0026v=4",
"name": "Chakkaradeep Chandran",
"twitter": "chakkaradeep"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

59
samples/js-extend-webpack/assets/sample.json
View File

@ -1 +1,58 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-extend-webpack","version":null,"source":"pnp","title":"Extending webpack in the SharePoint Framework toolchain","shortDescription":"This sample shows how to use the webpack markdown-loader to preprocess markdown files to HTML string.","longDescription":["This sample shows how to use the webpack markdown-loader to preprocess markdown files to HTML string."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png","alt":"Extending webpack in the SharePoint Framework toolchain","slides":null}],"authors":[{"gitHubAccount":"VelinGeorgiev","company":"","pictureUrl":"https://github.com/VelinGeorgiev.png"},{"gitHubAccount":"chakkaradeep","company":"","pictureUrl":"https://github.com/chakkaradeep.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-js-extend-webpack",
"source": "pnp",
"title": "Extending webpack in the SharePoint Framework toolchain",
"shortDescription": "This sample shows how to use the webpack markdown-loader to preprocess markdown files to HTML string.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-extend-webpack",
"longDescription": [
"This sample shows how to use the webpack markdown-loader to preprocess markdown files to HTML string."
],
"creationDateTime": "2017-01-25",
"updateDateTime": "2017-01-25",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Javascript"
},
{
"key": "SPFX-VERSION",
"value": "GA"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png",
"alt": "Extending webpack in the SharePoint Framework toolchain"
}
],
"authors": [
{
"gitHubAccount": "VelinGeorgiev",
"company": "",
"pictureUrl": "https://github.com/VelinGeorgiev.png",
"name": "Velin Georgiev"
},
{
"gitHubAccount": "chakkaradeep",
"company": "Microsoft",
"pictureUrl": "https://avatars.githubusercontent.com/u/7882052?s=460\u0026u=92d546edfe1e1b374c69f0fd9315186eea700b8f\u0026v=4",
"name": "Chakkaradeep Chandran",
"twitter": "chakkaradeep"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

183
samples/js-extend-webpack/yarn.lock
View File

@ -612,10 +612,6 @@
version "0.4.31"
resolved "https://registry.yarnpkg.com/@types/chalk/-/chalk-0.4.31.tgz#a31d74241a6b1edbb973cf36d97a2896834a51f9"
"@types/color-name@^1.1.1":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
"@types/colors@1.1.1":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@types/colors/-/colors-1.1.1.tgz#49733928fb47cf11254b7611e2f6f85ff6020521"
@ -997,10 +993,6 @@ ansi-regex@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
ansi-regex@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
ansi-styles@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.1.0.tgz#eaecbf66cd706882760b2f4691582b8f55d7a7de"
@ -1015,13 +1007,6 @@ ansi-styles@^3.1.0:
dependencies:
color-convert "^1.0.0"
ansi-styles@^4.0.0:
version "4.2.1"
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
dependencies:
"@types/color-name" "^1.1.1"
color-convert "^2.0.1"
ansi-wrap@0.1.0, ansi-wrap@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
@ -1662,10 +1647,6 @@ camelcase@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
camelcase@^5.0.0:
version "5.3.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
caniuse-api@^1.5.2:
version "1.6.1"
resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
@ -1829,14 +1810,6 @@ cliui@^3.2.0:
strip-ansi "^3.0.1"
wrap-ansi "^2.0.0"
cliui@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
dependencies:
string-width "^4.2.0"
strip-ansi "^6.0.0"
wrap-ansi "^6.2.0"
clone-buffer@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
@ -1896,20 +1869,10 @@ color-convert@^1.0.0, color-convert@^1.3.0:
dependencies:
color-name "^1.1.1"
color-convert@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
dependencies:
color-name "~1.1.4"
color-name@^1.0.0, color-name@^1.1.1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.2.tgz#5c8ab72b64bd2215d617ae9559ebb148475cf98d"
color-name@~1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
color-string@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
@ -1962,10 +1925,6 @@ commander@^2.7.1, commander@^2.9.0, commander@~2.11.0:
version "2.11.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
commander@~2.20.3:
version "2.20.3"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
component-bind@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
@ -2450,7 +2409,7 @@ debug@^3.2.6:
dependencies:
ms "^2.1.1"
decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
version "1.2.0"
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@ -2658,10 +2617,6 @@ elliptic@^6.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.0"
emoji-regex@^8.0.0:
version "8.0.0"
resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
emojis-list@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@ -3297,13 +3252,6 @@ find-up@^2.0.0:
dependencies:
locate-path "^2.0.0"
find-up@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
dependencies:
locate-path "^5.0.0"
path-exists "^4.0.0"
findup-sync@^0.4.2:
version "0.4.3"
resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-0.4.3.tgz#40043929e7bc60adf0b7f4827c4c6e75a0deca12"
@ -3530,10 +3478,6 @@ get-caller-file@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
get-caller-file@^2.0.1:
version "2.0.5"
resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
get-stdin@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
@ -4014,12 +3958,13 @@ gulplog@^1.0.0:
glogg "^1.0.0"
handlebars@^4.0.1:
version "4.7.4"
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.4.tgz#902c579cc97b350bb4bc12e6cabd85b57dcd9975"
version "4.7.7"
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
dependencies:
minimist "^1.2.5"
neo-async "^2.6.0"
source-map "^0.6.1"
yargs "^15.3.1"
wordwrap "^1.0.0"
optionalDependencies:
uglify-js "^3.1.4"
@ -4184,8 +4129,8 @@ homedir-polyfill@^1.0.0, homedir-polyfill@^1.0.1:
parse-passwd "^1.0.0"
hosted-git-info@^2.1.4:
version "2.5.0"
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c"
version "2.8.9"
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
html-comment-regex@^1.1.0:
version "1.1.1"
@ -4493,10 +4438,6 @@ is-fullwidth-code-point@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
is-fullwidth-code-point@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
is-glob@^2.0.0, is-glob@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
@ -5053,12 +4994,6 @@ locate-path@^2.0.0:
p-locate "^2.0.0"
path-exists "^3.0.0"
locate-path@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
dependencies:
p-locate "^4.1.0"
lodash._baseassign@^3.0.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
@ -5670,9 +5605,9 @@ minimist@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.2.0.tgz#4dffe525dae2b864c66c2e23c6271d7afdecefce"
minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
version "1.2.5"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
version "2.9.0"
@ -5820,8 +5755,8 @@ negotiator@0.6.1:
resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
neo-async@^2.5.0, neo-async@^2.6.0:
version "2.6.1"
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
version "2.6.2"
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
next-tick@~1.0.0:
version "1.0.0"
@ -6243,32 +6178,16 @@ p-limit@^1.1.0:
dependencies:
p-try "^1.0.0"
p-limit@^2.2.0:
version "2.2.2"
resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.2.tgz#61279b67721f5287aa1c13a9a7fbbc48c9291b1e"
dependencies:
p-try "^2.0.0"
p-locate@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
dependencies:
p-limit "^1.1.0"
p-locate@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
dependencies:
p-limit "^2.2.0"
p-try@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
p-try@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
package-json@^2.0.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/package-json/-/package-json-2.4.0.tgz#0d15bd67d1cbbddbb2ca222ff2edb86bcb31a8bb"
@ -6378,10 +6297,6 @@ path-exists@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
path-exists@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
path-is-absolute@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
@ -7415,10 +7330,6 @@ require-main-filename@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
require-main-filename@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
requirejs@2.1.20:
version "2.1.20"
resolved "https://registry.yarnpkg.com/requirejs/-/requirejs-2.1.20.tgz#114822c917ec8793450b2daaa1eb9bbf1101e931"
@ -8000,14 +7911,6 @@ string-width@^2.0.0:
is-fullwidth-code-point "^2.0.0"
strip-ansi "^4.0.0"
string-width@^4.1.0, string-width@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5"
dependencies:
emoji-regex "^8.0.0"
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.0"
string_decoder@^1.0.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
@ -8052,12 +7955,6 @@ strip-ansi@^4.0.0:
dependencies:
ansi-regex "^3.0.0"
strip-ansi@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
dependencies:
ansi-regex "^5.0.0"
strip-bom-stream@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/strip-bom-stream/-/strip-bom-stream-1.0.0.tgz#e7144398577d51a6bed0fa1994fa05f43fd988ee"
@ -8473,13 +8370,9 @@ typescript@~2.4.1:
version "2.4.2"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.2.tgz#f8395f85d459276067c988aa41837a8f82870844"
ua-parser-js@^0.7.18:
version "0.7.21"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.21.tgz#853cf9ce93f642f67174273cc34565ae6f308777"
ua-parser-js@^0.7.9:
version "0.7.13"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.13.tgz#cd9dd2f86493b3f44dbeeef3780fda74c5ee14be"
ua-parser-js@^0.7.18, ua-parser-js@^0.7.9:
version "0.7.28"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.28.tgz#8ba04e653f35ce210239c64661685bf9121dec31"
uglify-js@3.0.x:
version "3.0.24"
@ -8498,11 +8391,8 @@ uglify-js@^2.8.29:
uglify-to-browserify "~1.0.0"
uglify-js@^3.1.4:
version "3.8.1"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.8.1.tgz#43bb15ce6f545eaa0a64c49fd29375ea09fa0f93"
dependencies:
commander "~2.20.3"
source-map "~0.6.1"
version "3.13.5"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.5.tgz#5d71d6dbba64cf441f32929b1efce7365bb4f113"
uglify-js@~3.0.28:
version "3.0.28"
@ -9008,14 +8898,6 @@ wrap-ansi@^2.0.0:
string-width "^1.0.1"
strip-ansi "^3.0.1"
wrap-ansi@^6.2.0:
version "6.2.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
dependencies:
ansi-styles "^4.0.0"
string-width "^4.1.0"
strip-ansi "^6.0.0"
wrappy@1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@ -9089,12 +8971,8 @@ xtend@~3.0.0:
resolved "https://registry.yarnpkg.com/xtend/-/xtend-3.0.0.tgz#5cce7407baf642cba7becda568111c493f59665a"
y18n@^3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
y18n@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
version "3.2.2"
resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.2.tgz#85c901bd6470ce71fc4bb723ad209b70f7f28696"
yallist@^2.1.2:
version "2.1.2"
@ -9104,13 +8982,6 @@ yallist@^3.0.0, yallist@^3.0.3:
version "3.1.1"
resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
yargs-parser@^18.1.1:
version "18.1.2"
resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.2.tgz#2f482bea2136dbde0861683abea7756d30b504f1"
dependencies:
camelcase "^5.0.0"
decamelize "^1.2.0"
yargs-parser@^2.4.0:
version "2.4.1"
resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-2.4.1.tgz#85568de3cf150ff49fa51825f03a8c880ddcc5c4"
@ -9130,22 +9001,6 @@ yargs-parser@^7.0.0:
dependencies:
camelcase "^4.1.0"
yargs@^15.3.1:
version "15.3.1"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.3.1.tgz#9505b472763963e54afe60148ad27a330818e98b"
dependencies:
cliui "^6.0.0"
decamelize "^1.2.0"
find-up "^4.1.0"
get-caller-file "^2.0.1"
require-directory "^2.1.1"
require-main-filename "^2.0.0"
set-blocking "^2.0.0"
string-width "^4.2.0"
which-module "^2.0.0"
y18n "^4.0.0"
yargs-parser "^18.1.1"
yargs@^7.0.0:
version "7.1.0"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"

53
samples/js-gitHubBadge/assets/sample.json
View File

@ -1 +1,52 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-gitHubBadge","version":null,"source":"pnp","title":"GitHub Badge","shortDescription":"","longDescription":[""],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.8.0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-gitHubBadge/assets/1.png","alt":"GitHub Badge","slides":null}],"authors":[{"gitHubAccount":"skaggej","company":"","pictureUrl":"https://github.com/skaggej.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-js-gitHubBadge",
"source": "pnp",
"title": "GitHub Badge",
"shortDescription": "",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-gitHubBadge",
"longDescription": [
""
],
"creationDateTime": "2019-04-18",
"updateDateTime": "2019-04-18",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Javascript"
},
{
"key": "SPFX-VERSION",
"value": "1.8.0"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-gitHubBadge/assets/1.png",
"alt": "GitHub Badge"
}
],
"authors": [
{
"gitHubAccount": "skaggej",
"company": "",
"pictureUrl": "https://github.com/skaggej.png",
"name": "Eric Skaggs",
"twitter": "skaggej"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

59
samples/js-modern-calendar/assets/sample.json
View File

@ -1 +1,58 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-modern-calendar","version":null,"source":"pnp","title":"Modern Calendar","shortDescription":"This is a modern web part built on the GA version of the SharePoint Framework demonstrating how to build a custom web part with a calendar capabilities in it.","longDescription":["This is a modern web part built on the GA version of the SharePoint Framework demonstrating how to build a custom web part with a calendar capabilities in it."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.6.0"}],"thumbnails":[{"type":"image","order":100,"url":"https://cloud.githubusercontent.com/assets/13068139/23584808/14c3ec26-0121-11e7-8be8-65fbcca32b62.png","alt":"Modern Calendar","slides":null}],"authors":[{"gitHubAccount":"jcoleman-pcprofessional","company":"","pictureUrl":"https://github.com/jcoleman-pcprofessional.png"},{"gitHubAccount":"nanddeepn","company":"","pictureUrl":"https://github.com/nanddeepn.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-js-modern-calendar",
"source": "pnp",
"title": "Modern Calendar",
"shortDescription": "This is a modern web part built on the GA version of the SharePoint Framework demonstrating how to build a custom web part with a calendar capabilities in it.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-modern-calendar",
"longDescription": [
"This is a modern web part built on the GA version of the SharePoint Framework demonstrating how to build a custom web part with a calendar capabilities in it."
],
"creationDateTime": "2020-06-05",
"updateDateTime": "2020-06-05",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Javascript"
},
{
"key": "SPFX-VERSION",
"value": "1.6.0"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://cloud.githubusercontent.com/assets/13068139/23584808/14c3ec26-0121-11e7-8be8-65fbcca32b62.png",
"alt": "Modern Calendar"
}
],
"authors": [
{
"gitHubAccount": "jcoleman-pcprofessional",
"company": "PC Professional Inc.",
"pictureUrl": "https://github.com/jcoleman-pcprofessional.png",
"name": "Jeremy Coleman"
},
{
"gitHubAccount": "nanddeepn",
"company": "",
"pictureUrl": "https://github.com/nanddeepn.png",
"name": "Nanddeep Nachan",
"twitter": "NanddeepNachan"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

53
samples/js-msgraph-thumbnail/assets/sample.json
View File

@ -1 +1,52 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-msgraph-thumbnail","version":null,"source":"pnp","title":"Thumbnail/preview of pages and files","shortDescription":"A web part showcasing how to call the Microsoft Graph Thumbnails API to generate a preview image for files and pages in SharePoint. The sample illustrates how to craft the preview URL both from a search result as well as from a SharePoint item object.","longDescription":["A web part showcasing how to call the Microsoft Graph Thumbnails API to generate a preview image for files and pages in SharePoint. The sample illustrates how to craft the preview URL both from a search result as well as from a SharePoint item object."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"React"},{"key":"SPFX-VERSION","value":"1.10.0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-msgraph-thumbnail/preview.gif","alt":"Thumbnail/preview of pages and files","slides":null}],"authors":[{"gitHubAccount":"wobba","company":"","pictureUrl":"https://github.com/wobba.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-js-msgraph-thumbnail",
"source": "pnp",
"title": "Thumbnail/preview of pages and files",
"shortDescription": "A web part showcasing how to call the Microsoft Graph Thumbnails API to generate a preview image for files and pages in SharePoint. The sample illustrates how to craft the preview URL both from a search result as well as from a SharePoint item object.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-msgraph-thumbnail",
"longDescription": [
"A web part showcasing how to call the Microsoft Graph Thumbnails API to generate a preview image for files and pages in SharePoint. The sample illustrates how to craft the preview URL both from a search result as well as from a SharePoint item object."
],
"creationDateTime": "2020-01-21",
"updateDateTime": "2020-01-21",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "React"
},
{
"key": "SPFX-VERSION",
"value": "1.10.0"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-msgraph-thumbnail/preview.gif",
"alt": "Thumbnail/preview of pages and files"
}
],
"authors": [
{
"gitHubAccount": "wobba",
"company": "Microsoft",
"pictureUrl": "https://github.com/wobba.png",
"name": "Mikael Svenson",
"twitter": "mikaelsvenson"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

5
samples/js-myflows/README.md
View File

@ -7,6 +7,7 @@
##
![directory](/samples/js-myflows/assets/MyFlows.gif)
@ -22,6 +23,7 @@
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.8.2-green.svg)
## Applies to
@ -31,7 +33,7 @@
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## WebPart Properties
## Web Part Properties
Property |Type|Required| comments
--------------------|----|--------|----------
@ -56,6 +58,7 @@ Version|Date|Comments
## 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.**
---

86
samples/js-myflows/assets/sample.json
View File

@ -1 +1,85 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-myflows","version":null,"source":"pnp","title":"My Flows Web Part","shortDescription":"Manage current user flows in SharePoint or Teams Tab, this web part use the msflowsdk-1.1.js","longDescription":["Manage current user flows in SharePoint or Teams Tab, this web part use the msflowsdk-1.1.js"],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.8.2"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-myflows/assets/Screenshot4.png","alt":"My Flows Web Part","slides":null}],"authors":[{"gitHubAccount":"joaojmendes","company":"","pictureUrl":"https://github.com/joaojmendes.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-js-myflows",
"source": "pnp",
"title": "My Flows Web Part",
"shortDescription": "Manage current user flows in SharePoint or Teams Tab, this web part use the msflowsdk-1.1.js",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-myflows",
"longDescription": [
"Manage current user flows in SharePoint or Teams Tab, this web part use the msflowsdk-1.1.js"
],
"creationDateTime": "2019-08-13",
"updateDateTime": "2019-08-13",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Javascript"
},
{
"key": "SPFX-VERSION",
"value": "1.8.2"
},
{
"key": "SPFX-TEAMSTAB",
"value": "true"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-myflows/assets/Screenshot4.png",
"alt": "My Flows Web Part"
},
{
"type": "image",
"order": 101,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-myflows/assets/MyFlows.gif?raw=true",
"alt": "My Flows Web Part"
},
{
"type": "image",
"order": 102,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-myflows/assets/Screenshot1.png?raw=true",
"alt": "My Flows Web Part"
},
{
"type": "image",
"order": 103,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-myflows/assets/Screenshot2.png?raw=true",
"alt": "My Flows Web Part"
},
{
"type": "image",
"order": 104,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-myflows/assets/Screenshot3.png?raw=true",
"alt": "My Flows Web Part"
}
],
"authors": [
{
"gitHubAccount": "joaojmendes",
"company": "Storm Technology Ltd",
"pictureUrl": "https://github.com/joaojmendes.png",
"name": "Jo\u00E3o Mendes",
"twitter": "joaojmendes"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
},
{
"name": "Building Microsoft Teams Tabs using SharePoint Framework",
"description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/integrate-with-teams-introduction"
}
]
}
]

52
samples/js-powerbi-embedded/assets/sample.json
View File

@ -1 +1,51 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-powerbi-embedded","version":null,"source":"pnp","title":"Embed a PowerBI report in a Client-Side Web Part","shortDescription":"This sample SharePoint Framework client-side web part embedding a PowerBI report using PowerBI Embedded without any server-side code.","longDescription":["This sample SharePoint Framework client-side web part embedding a PowerBI report using PowerBI Embedded without any server-side code."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"drop2"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-powerbi-embedded/assets/screenshot_powerbi_embedded_spfx.png","alt":"Embed a PowerBI report in a Client-Side Web Part","slides":null}],"authors":[{"gitHubAccount":"roldengarm","company":"","pictureUrl":"https://github.com/roldengarm.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-js-powerbi-embedded",
"source": "pnp",
"title": "Embed a PowerBI report in a Client-Side Web Part",
"shortDescription": "This sample SharePoint Framework client-side web part embedding a PowerBI report using PowerBI Embedded without any server-side code.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-powerbi-embedded",
"longDescription": [
"This sample SharePoint Framework client-side web part embedding a PowerBI report using PowerBI Embedded without any server-side code."
],
"creationDateTime": "2016-09-13",
"updateDateTime": "2016-09-13",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Javascript"
},
{
"key": "SPFX-VERSION",
"value": "drop2"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-powerbi-embedded/assets/screenshot_powerbi_embedded_spfx.png",
"alt": "Embed a PowerBI report in a Client-Side Web Part"
}
],
"authors": [
{
"gitHubAccount": "roldengarm",
"company": "",
"pictureUrl": "https://github.com/roldengarm.png",
"name": "Roland Oldengarm"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

12
samples/js-propertycontrols-svg/README.md
View File

@ -1,21 +1,24 @@
# Dynamic Scalable Vector Graphics (SVG) image using propertie
## Summary
An SPFx webpart that displays a Scalable Vector Graphics (SVG) image using properties to customize how it is rendered. The webpart utilizes the PnP SPFx Property Controls package (specifially the SpinButton and ColorPicker) to set these properties.
An SPFx web part that displays a Scalable Vector Graphics (SVG) image using properties to customize how it is rendered. The web part utilizes the PnP SPFx Property Controls package (specifially the SpinButton and ColorPicker) to set these properties.
![picture of the web part in action](./assets/js-propertycontrols-svg.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.3.4-green.svg)
## Which PnP SPFx controls are being used in this sample?
* [PropertyFieldSpinButton](https://github.com/SharePoint/sp-dev-fx-property-controls/wiki/PropertyFieldSpinButton)
* [PropertyFieldColorPicker](https://github.com/SharePoint/sp-dev-fx-property-controls/wiki/PropertyFieldColorPicker)
* [PropertyFieldSpinButton](https://github.com/pnp/sp-dev-fx-property-controls/wiki/PropertyFieldSpinButton)
* [PropertyFieldColorPicker](https://github.com/pnp/sp-dev-fx-property-controls/wiki/PropertyFieldColorPicker)
## Applies to
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [sp-dev-fx-property-controls](https://github.com/SharePoint/sp-dev-fx-property-controls)
* [sp-dev-fx-property-controls](https://github.com/pnp/sp-dev-fx-property-controls)
* [PnP Man](https://github.com/thechriskent/PnPMan)
## Solution
@ -31,6 +34,7 @@ Version|Date|Comments
1.0|November 12, 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.**
---

63
samples/js-propertycontrols-svg/assets/sample.json
View File

@ -1 +1,62 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-propertycontrols-svg","version":null,"source":"pnp","title":"JS Property Controls SVG","shortDescription":"An SPFx web part that displays a Scalable Vector Graphics (SVG) image using properties to customize how it is rendered. The web part utilizes the PnP SPFx Property Controls package (specifially the SpinButton and ColorPicker) to set these properties.","longDescription":["An SPFx web part that displays a Scalable Vector Graphics (SVG) image using properties to customize how it is rendered. The web part utilizes the PnP SPFx Property Controls package (specifially the SpinButton and ColorPicker) to set these properties."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.3.4"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-propertycontrols-svg/assets/js-propertycontrols-svg.gif","alt":"JS Property Controls SVG","slides":null}],"authors":[{"gitHubAccount":"thechriskent","company":"","pictureUrl":"https://github.com/thechriskent.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-js-propertycontrols-svg",
"source": "pnp",
"title": "JS Property Controls SVG",
"shortDescription": "An SPFx web part that displays a Scalable Vector Graphics (SVG) image using properties to customize how it is rendered. The web part utilizes the PnP SPFx Property Controls package (specifially the SpinButton and ColorPicker) to set these properties.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-propertycontrols-svg",
"longDescription": [
"An SPFx web part that displays a Scalable Vector Graphics (SVG) image using properties to customize how it is rendered. The web part utilizes the PnP SPFx Property Controls package (specifially the SpinButton and ColorPicker) to set these properties."
],
"creationDateTime": "2017-11-12",
"updateDateTime": "2017-11-12",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Javascript"
},
{
"key": "SPFX-VERSION",
"value": "1.3.4"
},
{
"key": "PNPCONTROLS",
"value": "PropertyFieldColorPicker, PropertyFieldSpinButton"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-propertycontrols-svg/assets/js-propertycontrols-svg.gif",
"alt": "JS Property Controls SVG"
},
{
"type": "image",
"order": 101,
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-propertycontrols-svg/assets/js-propertycontrols-svg.PNG?raw=true",
"alt": "JS Property Controls SVG"
}
],
"authors": [
{
"gitHubAccount": "thechriskent",
"company": "DMI",
"pictureUrl": "https://avatars.githubusercontent.com/u/8364109?s=460\u0026v=4",
"name": "Chris Kent",
"twitter": "thechriskent"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

53
samples/js-public-unjoined-teams/assets/sample.json
View File

@ -1 +1,52 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-public-unjoined-teams","version":null,"source":"pnp","title":"Public teams I\u0027m not a member of","shortDescription":"This web part lists all the public teams the current user is not yet a member of. They can then join any of those teams by clicking the button right next to the team name. This web part can also be added to Teams as a tab (built with the 1.7.1 plusbeta/preview version).","longDescription":["This web part lists all the public teams the current user is not yet a member of. They can then join any of those teams by clicking the button right next to the team name. This web part can also be added to Teams as a tab (built with the 1.7.1 plusbeta/preview version)."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.7.1"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-public-unjoined-teams/assets/js-public-unjoined-teams.gif","alt":"Public teams I\u0027m not a member of","slides":null}],"authors":[{"gitHubAccount":"LauraKokkarinen","company":"","pictureUrl":"https://github.com/LauraKokkarinen.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-js-public-unjoined-teams",
"source": "pnp",
"title": "Public teams I\u0027m not a member of",
"shortDescription": "This web part lists all the public teams the current user is not yet a member of. They can then join any of those teams by clicking the button right next to the team name. This web part can also be added to Teams as a tab (built with the 1.7.1 plusbeta/preview version).",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-public-unjoined-teams",
"longDescription": [
"This web part lists all the public teams the current user is not yet a member of. They can then join any of those teams by clicking the button right next to the team name. This web part can also be added to Teams as a tab (built with the 1.7.1 plusbeta/preview version)."
],
"creationDateTime": "2019-02-05",
"updateDateTime": "2019-02-05",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Javascript"
},
{
"key": "SPFX-VERSION",
"value": "1.7.1"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-public-unjoined-teams/assets/js-public-unjoined-teams.gif",
"alt": "Public teams I\u0027m not a member of"
}
],
"authors": [
{
"gitHubAccount": "LauraKokkarinen",
"company": "Sulava",
"pictureUrl": "https://github.com/LauraKokkarinen.png",
"name": "Laura Kokkarinen",
"twitter": "LauraKokkarinen"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

7
samples/js-skype-status/README.md
View File

@ -50,12 +50,15 @@ Version|Date|Comments
1.0|December 1, 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
### Authentication
Because the Skype API's are secured, you first need to register an Azure Active Directory application.
To do that go to `portal.azure.com` and sign in as your tenant administrator.
![azure active directory](./images/1.PNG)
@ -77,11 +80,13 @@ Don't forget to click on `Grant permissions` and `yes`.
After copying that sample to your local machine and running `npm install` to install the depenencies, `/src/webparts/skypePresence/services/Constants.ts` open your favorite editor. Make sure you replace the value of `ApplicationIdKey` to the value application id we kept earlier.
### Deploying the application
Start by running `gulp package-solution` and deploy the application to the app catalog. More information on how to do it [here](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page)
**At the end select SkypePresence webpart instead**
**At the end select SkypePresence web part instead**
Don't forget to run `gulp serve --nobrowser` to start the debugging server.
### Additional page required
Because Skype needs to silently redirect the user to a page for the authentication flow, you need to create an additional page called `skypepresence` in your site.
You don't need to add anything on that page.

53
samples/js-skype-status/assets/sample.json
View File

@ -1 +1,52 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-skype-status","version":null,"source":"pnp","title":"JavaScript Skype Status Web Part","shortDescription":"This sample demonstrates how to use the UCWA JS Sdk for skype in the SharePoint Framework. It shows how to subscribe to status change of the different people of the organization but you can get much more information, checkout the documentation","longDescription":["This sample demonstrates how to use the UCWA JS Sdk for skype in the SharePoint Framework. It shows how to subscribe to status change of the different people of the organization but you can get much more information, checkout the documentation"],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.8.0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-skype-status/images/demo.gif","alt":"JavaScript Skype Status Web Part","slides":null}],"authors":[{"gitHubAccount":"baywet","company":"","pictureUrl":"https://github.com/baywet.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-js-skype-status",
"source": "pnp",
"title": "JavaScript Skype Status Web Part",
"shortDescription": "This sample demonstrates how to use the UCWA JS Sdk for skype in the SharePoint Framework. It shows how to subscribe to status change of the different people of the organization but you can get much more information, checkout the documentation",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-skype-status",
"longDescription": [
"This sample demonstrates how to use the UCWA JS Sdk for skype in the SharePoint Framework. It shows how to subscribe to status change of the different people of the organization but you can get much more information, checkout the documentation"
],
"creationDateTime": "2019-03-27",
"updateDateTime": "2019-03-27",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Javascript"
},
{
"key": "SPFX-VERSION",
"value": "1.8.0"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-skype-status/images/demo.gif",
"alt": "JavaScript Skype Status Web Part"
}
],
"authors": [
{
"gitHubAccount": "baywet",
"company": "Microsoft",
"pictureUrl": "https://github.com/baywet.png",
"name": "Vincent Biret",
"twitter": "baywet"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

53
samples/js-solution-editions/assets/sample.json
View File

@ -1 +1,52 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-solution-editions","version":null,"source":"pnp","title":"Handling Multiple Editions of SPFx Solution","shortDescription":"This sample shows possible approach of handling multiple editions (e.g. trial, lite, full) of SharePoint Framework solution.","longDescription":["This sample shows possible approach of handling multiple editions (e.g. trial, lite, full) of SharePoint Framework solution."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://avatars3.githubusercontent.com/u/17036219?s=460\u0026v=4","alt":"Handling Multiple Editions of SPFx Solution","slides":null}],"authors":[{"gitHubAccount":"AJIXuMuK","company":"","pictureUrl":"https://github.com/AJIXuMuK.png"}],"references":[]}
[
{
"name": "pnp-sp-dev-spfx-web-parts-js-solution-editions",
"source": "pnp",
"title": "Handling Multiple Editions of SPFx Solution",
"shortDescription": "This sample shows possible approach of handling multiple editions (e.g. trial, lite, full) of SharePoint Framework solution.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-solution-editions",
"longDescription": [
"This sample shows possible approach of handling multiple editions (e.g. trial, lite, full) of SharePoint Framework solution."
],
"creationDateTime": "2017-08-23",
"updateDateTime": "2017-08-23",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Javascript"
},
{
"key": "SPFX-VERSION",
"value": "GA"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://avatars3.githubusercontent.com/u/17036219?s=460\u0026v=4",
"alt": "Handling Multiple Editions of SPFx Solution"
}
],
"authors": [
{
"gitHubAccount": "AJIXuMuK",
"company": "Sharepointalist",
"pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460\u0026u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f\u0026v=4",
"name": "Alex Terentiev",
"twitter": "alexaterentiev"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

33
samples/js-teams-meeting-app/.gitignore vendored Normal file
View File

@ -0,0 +1,33 @@
# Logs
logs
*.log
npm-debug.log*
# Dependency directories
node_modules
# Build generated files
dist
lib
release
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

12
samples/js-teams-meeting-app/.yo-rc.json Normal file
View File

@ -0,0 +1,12 @@
{
"@microsoft/generator-sharepoint": {
"isCreatingSolution": true,
"environment": "spo",
"version": "1.12.1-rc.3",
"libraryName": "teams-meeting-app",
"libraryId": "a70a8d1d-f76f-4535-bf43-0d1abd0377e6",
"packageManager": "npm",
"isDomainIsolated": false,
"componentType": "webpart"
}
}

68
samples/js-teams-meeting-app/README.md Normal file
View File

@ -0,0 +1,68 @@
# SPFx WebPart in Teams Meetings App
Demo SPFx web part project that demonstrates using as a Microsoft Teams meetings app. This is associated with the SPFx docs tutorial: [Tutorial: Build meeting apps for Microsoft Teams with SPFx](https://docs.microsoft.com/sharepoint/dev//spfx/build-for-teams-meeting-app)
## Summary
This project demonstrates a SPFx web part used as a Microsoft Teams meetings app with minimal functionality.
![picture of the web part in action](assets/preview.png)
## Compatibility
![SPFx 1.12.1](https://img.shields.io/badge/SPFx-1.12.1-green.svg)
![Node.js LTS 14.x](https://img.shields.io/badge/Node.js-LTS%2014.x-green.svg)
![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
![Teams Yes: Designed for Microsoft Teams](https://img.shields.io/badge/Teams-Yes-green.svg "Designed for Microsoft Teams")
![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench")
## Applies to
- [Microsoft Teams](https://aka.ms/microsoftteams)
- [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
- [Microsoft 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites
- Administrative access to MS Teams to deploy the package
## Solution
Solution|Author(s)
--------|---------
js-teams-meeting-app | [Andrew Connell](/andrewconnell) ([@andrewconnell](https://twitter.com/andrewconnell)), [Voitanos, LLC](https://www.voitanos.io)
## Version history
Version | Date | Comments
------- | -------------- | ---------------
1.0 | April 27, 2021 | 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
Refer to the above mentioned SPFx tutorial for full repro instructions.
- Clone this repository
- ZIP the contents of the **./teams** folder, *but not the folder itself*
- rename the ZIP to **TeamsSPFxApp.zip**
- From the command line install all dependencies and create the package:
```console
npm install
gulp bundle -p
gulp package-solution -p
```
- Upload the **.sppkg** to your SPO tenant's app catalog & deploy it
- select the uploaded package, then select the **Sync to Teams** button in the **Files** tab in the ribbon
- In Microsoft Teams, create a new meeting using the **Calendar** app in the leftmost navigation bar
- After creating the meeting, edit it, and select the **+** in the tab bar
- Select the app you deployed to install the app
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-teams-meeting-app" />

BIN
samples/js-teams-meeting-app/assets/preview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

18
samples/js-teams-meeting-app/config/config.json Normal file
View File

@ -0,0 +1,18 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"my-first-teams-meeting-app-web-part": {
"components": [
{
"entrypoint": "./lib/webparts/myFirstTeamsMeetingApp/MyFirstTeamsMeetingAppWebPart.js",
"manifest": "./src/webparts/myFirstTeamsMeetingApp/MyFirstTeamsMeetingAppWebPart.manifest.json"
}
]
}
},
"externals": {},
"localizedResources": {
"MyFirstTeamsMeetingAppWebPartStrings": "lib/webparts/myFirstTeamsMeetingApp/loc/{locale}.js"
}
}

4
samples/js-teams-meeting-app/config/copy-assets.json Normal file
View File

@ -0,0 +1,4 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
"deployCdnPath": "./release/assets/"
}

7
samples/js-teams-meeting-app/config/deploy-azure-storage.json Normal file
View File

@ -0,0 +1,7 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"workingDir": "./release/assets/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "teams-meeting-app",
"accessKey": "<!-- ACCESS KEY -->"
}

21
samples/js-teams-meeting-app/config/package-solution.json Normal file
View File

@ -0,0 +1,21 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "teams-meeting-app-client-side-solution",
"id": "a70a8d1d-f76f-4535-bf43-0d1abd0377e6",
"version": "1.0.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true,
"isDomainIsolated": false,
"developer": {
"name": "Test User",
"websiteUrl": "https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview",
"privacyUrl": "https://microsoft.com/privacy",
"termsOfUseUrl": "https://microsoft.com/terms",
"mpnId": "000000"
}
},
"paths": {
"zippedPackage": "solution/teams-meeting-app.sppkg"
}
}

10
samples/js-teams-meeting-app/config/serve.json Normal file
View File

@ -0,0 +1,10 @@
{
"$schema": "https://developer.microsoft.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/"
}
}

4
samples/js-teams-meeting-app/config/write-manifests.json Normal file
View File

@ -0,0 +1,4 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->"
}

16
samples/js-teams-meeting-app/gulpfile.js Normal file
View File

@ -0,0 +1,16 @@
'use strict';
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
var result = getTasks.call(build.rig);
result.set('serve', result.get('serve-deprecated'));
return result;
};
build.initialize(require('gulp'));

21301
samples/js-teams-meeting-app/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

28
samples/js-teams-meeting-app/package.json Normal file
View File

@ -0,0 +1,28 @@
{
"name": "teams-meeting-app",
"version": "0.0.1",
"private": true,
"main": "lib/index.js",
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"@microsoft/sp-core-library": "1.12.1-rc.3",
"@microsoft/sp-property-pane": "1.12.1-rc.3",
"@microsoft/sp-webpart-base": "1.12.1-rc.3",
"@microsoft/sp-lodash-subset": "1.12.1-rc.3",
"@microsoft/sp-office-ui-fabric-core": "1.12.1-rc.3"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.12.1-rc.3",
"@microsoft/sp-tslint-rules": "1.12.1-rc.3",
"@microsoft/sp-module-interfaces": "1.12.1-rc.3",
"@microsoft/sp-webpart-workbench": "1.12.1-rc.3",
"@microsoft/rush-stack-compiler-3.7": "0.2.3",
"gulp": "~4.0.2",
"ajv": "~5.2.2",
"@types/webpack-env": "1.13.1"
}
}

1
samples/js-teams-meeting-app/src/index.ts Normal file
View File

@ -0,0 +1 @@
// A file is required to be in the root of the /src directory by the TypeScript compiler

27
samples/js-teams-meeting-app/src/webparts/myFirstTeamsMeetingApp/MyFirstTeamsMeetingAppWebPart.manifest.json Normal file
View File

@ -0,0 +1,27 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "ae096643-1ded-479b-a3d8-64dca8669d37",
"alias": "MyFirstTeamsMeetingAppWebPart",
"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,
"supportedHosts": ["SharePointWebPart", "TeamsTab"],
"preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
"group": { "default": "Other" },
"title": { "default": "MyFirstTeamsMeetingApp" },
"description": { "default": "My first Microsoft Teams meeting app" },
"officeFabricIconFontName": "Page",
"properties": {
"description": "MyFirstTeamsMeetingApp"
}
}]
}

74
samples/js-teams-meeting-app/src/webparts/myFirstTeamsMeetingApp/MyFirstTeamsMeetingAppWebPart.module.scss Normal file
View File

@ -0,0 +1,74 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
.myFirstTeamsMeetingApp {
.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 {
@include ms-Grid-row;
@include ms-fontColor-white;
background-color: $ms-color-themeDark;
padding: 20px;
}
.column {
@include ms-Grid-col;
@include ms-lg10;
@include ms-xl8;
@include ms-xlPush2;
@include ms-lgPush1;
}
.title {
@include ms-font-xl;
@include ms-fontColor-white;
}
.subTitle {
@include ms-font-l;
@include ms-fontColor-white;
}
.description {
@include ms-font-l;
@include ms-fontColor-white;
}
.button {
// Our button
text-decoration: none;
height: 32px;
// Primary Button
min-width: 80px;
background-color: $ms-color-themePrimary;
border-color: $ms-color-themePrimary;
color: $ms-color-white;
// 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: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
border-width: 0;
text-align: center;
cursor: pointer;
display: inline-block;
padding: 0 16px;
.label {
font-weight: $ms-font-weight-semibold;
font-size: $ms-font-size-m;
height: 32px;
line-height: 32px;
margin: 0 4px;
vertical-align: top;
display: inline-block;
}
}
}

71
samples/js-teams-meeting-app/src/webparts/myFirstTeamsMeetingApp/MyFirstTeamsMeetingAppWebPart.ts Normal file
View File

@ -0,0 +1,71 @@
import { Version } from '@microsoft/sp-core-library';
import {
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './MyFirstTeamsMeetingAppWebPart.module.scss';
import * as strings from 'MyFirstTeamsMeetingAppWebPartStrings';
export interface IMyFirstTeamsMeetingAppWebPartProps {
description: string;
}
export default class MyFirstTeamsMeetingAppWebPart extends BaseClientSideWebPart<IMyFirstTeamsMeetingAppWebPartProps> {
public render(): void {
let title: string = 'ERR: not in Microsoft Teams';
let subTitle: string = 'ERR: not in Microsoft Teams';
if (this.context.sdks.microsoftTeams) {
if (this.context.sdks.microsoftTeams.context.meetingId) {
title = "Welcome to Microsoft Teams!";
subTitle = "We are in the context of following meeting: " + this.context.sdks.microsoftTeams.context.meetingId;
} else {
title = "Welcome to Microsoft Teams!";
subTitle = "We are in the context of following team: " + this.context.sdks.microsoftTeams.context.teamName;
}
}
this.domElement.innerHTML = `
<div class="${ styles.myFirstTeamsMeetingApp }">
<div class="${ styles.container }">
<div class="${ styles.row }">
<div class="${ styles.column }">
<span class="${ styles.title }">${title}</span>
<p class="${ styles.subTitle }">${subTitle}</p>
</div>
</div>
</div>
</div>`;
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}
}

7
samples/js-teams-meeting-app/src/webparts/myFirstTeamsMeetingApp/loc/en-us.js Normal file
View File

@ -0,0 +1,7 @@
define([], function() {
return {
"PropertyPaneDescription": "Description",
"BasicGroupName": "Group Name",
"DescriptionFieldLabel": "Description Field"
}
});

10
samples/js-teams-meeting-app/src/webparts/myFirstTeamsMeetingApp/loc/mystrings.d.ts vendored Normal file
View File

@ -0,0 +1,10 @@
declare interface IMyFirstTeamsMeetingAppWebPartStrings {
PropertyPaneDescription: string;
BasicGroupName: string;
DescriptionFieldLabel: string;
}
declare module 'MyFirstTeamsMeetingAppWebPartStrings' {
const strings: IMyFirstTeamsMeetingAppWebPartStrings;
export = strings;
}

BIN
samples/js-teams-meeting-app/teams/ae096643-1ded-479b-a3d8-64dca8669d37_color.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

Some files were not shown because too many files have changed in this diff Show More