Merge branch 'master' into master
This commit is contained in:
Hugo Bernier
GitHub
commit
078ded7039
|
|
@ -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.
|
||||
|
|
@ -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
|
||||
|
|
@ -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)_
|
||||
|
|
@ -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)_
|
||||
|
||||
|
||||
|
|
@ -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
|
||||
|
|
@ -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?
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
> By submitting this pull request, you agree to the [contribution guidelines](CONTRIBUTING.md)
|
||||
> By submitting this pull request, you agree to the [contribution guidelines](https://github.com/pnp/sp-dev-fx-webparts/blob/master/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.
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ incomplete-submission:
|
|||
close: true
|
||||
|
||||
# Actions taken when the `incomplete-submission` label is added to issues
|
||||
type:incomplete-submission:
|
||||
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)
|
||||
|
|
|
|||
|
|
@ -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: [ master ]
|
||||
pull_request:
|
||||
# The branches below must be a subset of the branches above
|
||||
branches: [ master ]
|
||||
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
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
name: Greetings
|
||||
name: 'Welcome new contributors'
|
||||
|
||||
on: [pull_request]
|
||||
|
||||
|
|
@ -9,11 +9,11 @@ jobs:
|
|||
- uses: actions/first-interaction@v1
|
||||
with:
|
||||
repo-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
pr-message: >
|
||||
pr-message: |
|
||||
Thank you for submitting your first pull request!
|
||||
|
||||
We love celebrating the awesome work our contributors do on social media and community calls; Make sure that you update your GitHub user profile with your Twitter user name, your company name, and your picture.
|
||||
We love 💖 celebrating the awesome work our contributors do on social media and community calls; Make sure that you update your GitHub user profile with your Twitter user name, your company name, and your picture.
|
||||
|
||||
If you don't use a company name or Twitter account, we will assume that you prefer not to mention you on social media and/or that you do not want your company name listed.
|
||||
|
||||
Thank you for being awesome!
|
||||
Thank you for being awesome 🚀!
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
name: 'Label Actions'
|
||||
name: 'Check for incomplete submissions'
|
||||
|
||||
on:
|
||||
issues:
|
||||
|
|
|
|||
|
|
@ -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: [ master ]
|
||||
pull_request:
|
||||
# The branches below must be a subset of the branches above
|
||||
branches: [ master ]
|
||||
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 }}
|
||||
|
|
@ -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" />
|
||||
|
|
@ -194,4 +194,4 @@ Thank you for your contribution.
|
|||
|
||||
> Sharing is caring.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/.github/CONTRIBUTING.md" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/CONTRIBUTING.md" />
|
||||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
@ -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/master/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" />
|
||||
|
|
@ -25,7 +25,8 @@ Sample web part showing the list of latest orders retrieved from a custom API se
|
|||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## 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,13 @@ 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
|
||||
|
||||
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" />
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ Sample SharePoint Framework client-side web part illustrating communication with
|
|||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## 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,17 @@ 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
|
||||
|
||||
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" />
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
||||
|
||||
|
||||
Final outcome:
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## 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,13 @@ 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
|
||||
|
||||
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" />
|
||||
|
|
|
|||
|
|
@ -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,12 @@ Follow the setup instructions:
|
|||
- [Angular application](./angular-todo/README.md)
|
||||
- [SharePoint Framework client-side web part](./angular-todo-webpart/README.md)
|
||||
|
||||
|
||||
## Support
|
||||
|
||||
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).
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
## 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,18 @@ 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
|
||||
|
||||
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" />
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 35 KiB |
|
|
@ -26,6 +26,7 @@ This sample contains a poll web part allowing users to vote and view the results
|
|||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## 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,12 @@ 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
|
||||
|
||||
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" />
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
|
||||
|
||||
## 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,20 @@ 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
|
||||
|
||||
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" />
|
||||
|
|
|
|||
|
|
@ -26,7 +26,8 @@ You can find a video recording walk-through this sample from [SharePoint PnP You
|
|||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## 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,12 @@ 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
|
||||
|
||||
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" />
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
|
|
@ -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
|
||||
|
||||
|
||||
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
## 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,13 @@ 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
|
||||
|
||||
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" />
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ Sample Web Part illustrating using Angular with the SharePoint Framework.
|
|||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## 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,12 @@ 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
|
||||
|
||||
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" />
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## 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,25 @@ 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
|
||||
|
||||
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" />
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ extensions:
|
|||
Set of sample web parts illustrating how to use Angular Elements in the SharePoint Framework.
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## 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,12 @@ 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
|
||||
|
||||
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" />
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
## 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,13 @@ build.rig.addPostTypescriptTask(tsInlines);
|
|||
//************END: Added to handle Template file url ************/
|
||||
```
|
||||
|
||||
## Support
|
||||
|
||||
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" />
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
||||
|
|
@ -26,6 +27,7 @@ Sample bootstrap slider which pulls the slides from a list inside the SharePoint
|
|||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## 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,15 @@ 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
|
||||
|
||||
- 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
|
||||
|
||||
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" />
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
|
||||
|
||||
##
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -22,6 +23,7 @@
|
|||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,14 +1,17 @@
|
|||
# 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.
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## 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)
|
||||
|
||||
|
|
@ -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.**
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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.
|
||||
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 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" />
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "./release/assets/"
|
||||
}
|
||||
|
|
@ -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 -->"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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/"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
|
|
@ -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'));
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
// A file is required to be in the root of the /src directory by the TypeScript compiler
|
||||
|
|
@ -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"
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -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
10
samples/js-teams-meeting-app/src/webparts/myFirstTeamsMeetingApp/loc/mystrings.d.ts
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
declare interface IMyFirstTeamsMeetingAppWebPartStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
DescriptionFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'MyFirstTeamsMeetingAppWebPartStrings' {
|
||||
const strings: IMyFirstTeamsMeetingAppWebPartStrings;
|
||||
export = strings;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 383 B |
|
|
@ -0,0 +1,52 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
|
||||
"manifestVersion": "1.8",
|
||||
"packageName": "ms365.spfx.teamsmeetingsapp",
|
||||
"id": "ae096643-1ded-479b-a3d8-64dca8669d37",
|
||||
"version": "1.0",
|
||||
"developer": {
|
||||
"name": "Contoso Developer Department",
|
||||
"websiteUrl": "https://contoso.com/spfx-teams-meetings-app",
|
||||
"privacyUrl": "https://contoso.com/privacystatement",
|
||||
"termsOfUseUrl": "https://contoso.com/servicesagreement"
|
||||
},
|
||||
"name": {
|
||||
"short": "SPFx Meetings App",
|
||||
"full": "SPFx Meetings App - Tabs Demo"
|
||||
},
|
||||
"description": {
|
||||
"short": "Demonstration SPFx web part used as MS Teams meeting app tab.",
|
||||
"full": "This demonstration app shows how to create a meetings app using an SPFx web part that's displayed as a tab for the meeting."
|
||||
},
|
||||
"icons": {
|
||||
"outline": "ae096643-1ded-479b-a3d8-64dca8669d37_outline.png",
|
||||
"color": "ae096643-1ded-479b-a3d8-64dca8669d37_color.png"
|
||||
},
|
||||
"accentColor": "#004578",
|
||||
"configurableTabs": [
|
||||
{
|
||||
"configurationUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26componentId=ae096643-1ded-479b-a3d8-64dca8669d37",
|
||||
"canUpdateConfiguration": false,
|
||||
"scopes": [
|
||||
"team",
|
||||
"groupchat"
|
||||
],
|
||||
"context": [
|
||||
"channelTab",
|
||||
"privateChatTab",
|
||||
"meetingSidePanel",
|
||||
"meetingDetailsTab",
|
||||
"meetingChatTab"
|
||||
]
|
||||
}
|
||||
],
|
||||
"validDomains": [
|
||||
"*.login.microsoftonline.com",
|
||||
"*.sharepoint.com",
|
||||
"resourceseng.blob.core.windows.net"
|
||||
],
|
||||
"webApplicationInfo": {
|
||||
"resource": "https://{teamSiteDomain}",
|
||||
"id": "00000003-0000-0ff1-ce00-000000000000"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.7/includes/tsconfig-web.json",
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"experimentalDecorators": true,
|
||||
"skipLibCheck": true,
|
||||
"outDir": "lib",
|
||||
"inlineSources": false,
|
||||
"strictNullChecks": false,
|
||||
"noUnusedLocals": false,
|
||||
"typeRoots": [
|
||||
"./node_modules/@types",
|
||||
"./node_modules/@microsoft"
|
||||
],
|
||||
"types": [
|
||||
"webpack-env"
|
||||
],
|
||||
"lib": [
|
||||
"es5",
|
||||
"dom",
|
||||
"es2015.collection",
|
||||
"es2015.promise"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
|
||||
"rules": {
|
||||
"class-name": false,
|
||||
"export-name": false,
|
||||
"forin": false,
|
||||
"label-position": false,
|
||||
"member-access": true,
|
||||
"no-arg": false,
|
||||
"no-console": false,
|
||||
"no-construct": false,
|
||||
"no-duplicate-variable": true,
|
||||
"no-eval": false,
|
||||
"no-function-expression": true,
|
||||
"no-internal-module": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-unnecessary-semicolons": true,
|
||||
"no-unused-expression": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-with-statement": true,
|
||||
"semicolon": true,
|
||||
"trailing-comma": false,
|
||||
"typedef": false,
|
||||
"typedef-whitespace": false,
|
||||
"use-named-parameter": true,
|
||||
"variable-name": false,
|
||||
"whitespace": false
|
||||
}
|
||||
}
|
||||
|
|
@ -17,11 +17,12 @@ extensions:
|
|||
|
||||
## Summary
|
||||
|
||||
This webpart demonstrates how to integrate the @pnp/sp library into the SharePoint Framework as well as including mock data and simple list I/O.
|
||||
This web part demonstrates how to integrate the @pnp/sp library into the SharePoint Framework as well as including mock data and simple list I/O.
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
|
@ -45,6 +46,7 @@ Version|Date|Comments
|
|||
1.0.0| November 14, 2018| Version Upgrade
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@ This web part will allow users to view/update application customizers properties
|
|||
- We can use properties to pass data to Application customizers to make solution customizable.
|
||||
- To update properties of application customizer there is no UI based solution.
|
||||
- To update the title, details and other information of application customizer we use either PowerShell script or cli tool.
|
||||
- This webpart can be used at a central location where all the users have access and if they require to update title, description and properties.
|
||||
- This web part can be used at a central location where all the users have access and if they require to update title, description and properties.
|
||||
|
||||
## Features
|
||||
|
||||
- Webpart to view/update Application Customizers registered for a selected web
|
||||
- Web part to view/update Application Customizers registered for a selected web
|
||||
- Provides two different UI Accordion or List based(configurable)
|
||||
- Provides a dropdown to select the web from where we would require to fetch application customizers
|
||||
- Allows to update application customizer properties which makes it easy to make re-useable application customizers
|
||||
|
|
|
|||
|
|
@ -47,8 +47,8 @@ Version|Date|Comments
|
|||
| File | Type | Description |
|
||||
|------------------------------|--------------------------------------------------|----------------|
|
||||
| AdaptiveCardViewerWebPart.ts | React Class component (derives from BaseWebPart) | Used to define web part properties and bootstrap the component tree|
|
||||
| RootComponent.tsx | React Function component | Interrogates webpart properties and establishes AppContext and initial state.<br/>Monitors CardService state and dispatches updates to viewer state. |
|
||||
| AppContext.ts | React context provider | Exposes the SPFx webpart context, the webpart instance and the state dispatch to all components via `React.useContext()` |
|
||||
| RootComponent.tsx | React Function component | Interrogates web part properties and establishes AppContext and initial state.<br/>Monitors CardService state and dispatches updates to viewer state. |
|
||||
| AppContext.ts | React context provider | Exposes the SPFx web part context, the web part instance and the state dispatch to all components via `React.useContext()` |
|
||||
| CardService.ts | React Hook | Abstracts the SP HttpClient |
|
||||
| CardServiceReducer.ts | React Reducer | Reducer/state for CardService hook |
|
||||
| AdaptiveCardViewer.tsx | React Function component | Top-level UI component. |
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ This repo is a react based SPFx web part and extension that allows users to add/
|
|||
|
||||
WebPart in Action
|
||||
|
||||
|
||||
|
||||
|
||||
Challenges/Drawback with ONLY using SPFx extension for adding js and css file references.
|
||||
* JS and CSS file references links needs to be hardcoded in solution
|
||||
|
|
@ -32,7 +32,7 @@ To overcome this drawbacks, this solution comes handy. This is reusable componen
|
|||
|
||||
### Features of solution
|
||||
|
||||
* WebPart to configure JS and CSS file reference.
|
||||
* Web part to configure JS and CSS file reference.
|
||||
* Edit functionality if at least one JS or CSS reference is already added via this solution
|
||||
* Completely remove all the references added via this solution
|
||||
* Support for relative url also, if your js and css file is referred from some document library in same site collection.
|
||||
|
|
@ -70,19 +70,19 @@ gulp package-solution --ship
|
|||
- Upload or drag and drop the newly created client-side solution package to the app catalog in your tenant.
|
||||
- Based on your tenant settings, if you would not have CDN enabled in your tenant, and the `includeClientSideAssets` setting would be true in the `package-solution.json`, the loading URL for the assets would be dynamically updated and pointing directly to the `ClientSideAssets` folder located in the app catalog site collection.
|
||||
|
||||
|
||||
### How to Use Solution
|
||||
|
||||
* Once app is deployed to app catalog successfully.
|
||||
* Install app to required site collection
|
||||
* Create new modern page. Add **addJsCssReference** webpart to page. Publish the page.
|
||||
* Create new modern page. Add **addJsCssReference** web part to page. Publish the page.
|
||||
* Use grid to add js and css file references, both are separate sections.
|
||||
* On Success message - Refresh the page and you would see your js and css files will be loaded.
|
||||
* To Edit/Remove, go to same page again and Use **Activate** or **Deactivate**.
|
||||
* Only Users with Manage Web permission will be able to access webpart and add/modify references.
|
||||
* Only Users with Manage Web permission will be able to access web part and add/modify references.
|
||||
|
||||
### High level design of Solution
|
||||
|
||||
* SPFx solution with 2 components 1. SPFx Webpart 2. SPFx Extension Application Customizer
|
||||
* SPFx solution with 2 components 1. SPFx Web part 2. SPFx Extension Application Customizer
|
||||
* Disables Automatic activation of SPFx extension when app is installed.
|
||||
* React based solution
|
||||
* Register Custom action with ClientSideComponentId of Extension component
|
||||
|
|
@ -101,7 +101,6 @@ Version|Date|Comments
|
|||
1.0.0|Apr 24, 2020|Initial release
|
||||
2.0.0|June 09, 2020|Displaying access denied message, added spinner to display on page load, fix edit, delete icons not displaying.
|
||||
|
||||
|
||||
## 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.**
|
||||
|
|
|
|||
|
|
@ -2,13 +2,11 @@
|
|||
|
||||
## Summary
|
||||
|
||||
A SPFx WebPart using [@pnp/sp/appcatalog](https://pnp.github.io/pnpjs/sp/docs/alm/) and [@pnp/spfx-controls-react](https://sharepoint.github.io/sp-dev-fx-controls-react/). It allows to see in a single view all the SiteCollection catalogs and the Apps installed with some useful metadata.
|
||||
It needs Globlal Administrator or SharePoint Online Administrator permissions in order to access Site collection App Catalogs hidden list (https://yourtenant.sharepoint.com/sites/appcatalog/Lists/SiteCollectionAppCatalogs) and each Site Collection App Catalog. This WebPart use [@pnp/spfx-controls-react WebPartTitle](https://sharepoint.github.io/sp-dev-fx-controls-react/controls/WebPartTitle/) and [@pnp/spfx-controls-react ListView](https://sharepoint.github.io/sp-dev-fx-controls-react/controls/ListView/) components.
|
||||
A SPFx web part using [@pnp/sp/appcatalog](https://pnp.github.io/pnpjs/sp/docs/alm/) and [@pnp/spfx-controls-react](https://sharepoint.github.io/sp-dev-fx-controls-react/). It allows to see in a single view all the SiteCollection catalogs and the Apps installed with some useful metadata.
|
||||
It needs Globlal Administrator or SharePoint Online Administrator permissions in order to access Site collection App Catalogs hidden list (https://yourtenant.sharepoint.com/sites/appcatalog/Lists/SiteCollectionAppCatalogs) and each Site Collection App Catalog. This web part use [@pnp/spfx-controls-react WebPartTitle](https://sharepoint.github.io/sp-dev-fx-controls-react/controls/WebPartTitle/) and [@pnp/spfx-controls-react ListView](https://sharepoint.github.io/sp-dev-fx-controls-react/controls/ListView/) components.
|
||||
|
||||
## react-admin-sc-catalog-pnpjs in action
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
|
@ -47,7 +45,7 @@ Version|Date|Comments
|
|||
* locate solution at `.\sharepoint\solution\react-admin-sc-catalog-pnpjs.sppkg`
|
||||
* upload it to your tenant app catalog
|
||||
* add `react-admin-sc-catalog-pnpjs` app to your site
|
||||
* add `react-admin-sc-catalog-pnpjs` webpart to your page to see it in action
|
||||
* add `react-admin-sc-catalog-pnpjs` web part to your page to see it in action
|
||||
|
||||
## Features
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,23 @@
|
|||
# Aggregated Calendar
|
||||
|
||||
## Summary
|
||||
This is a sample webpart developed using React Framework to gather the aggregated events from the multiple calendars from multiple sites using Full Calendar from fullcalendar.io
|
||||
|
||||
This is a sample web part developed using React Framework to gather the aggregated events from the multiple calendars from multiple sites using Full Calendar from fullcalendar.io
|
||||
|
||||
|
||||
|
||||
|
||||
The web part was designed to create an aggregated view of calendar to fetch events from multiple calendars across the sites and site collection.
|
||||
The web part will show the event information using the callout functionality of Office UI Fabric
|
||||
|
||||
|
||||
The webpart was designed to create an aggregated view of calendar to fetch events from multiple calendars across the sites and site collection.
|
||||
The webpart will show the event information using the callout functionality of Office UI Fabric
|
||||
|
||||
Webpart is developed using below technologies
|
||||
Web part is developed using below technologies
|
||||
* React Framework
|
||||
* Full Calendar(fullcalendar.io)
|
||||
* jQuery
|
||||
* Office UI Fabric
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
|
@ -26,11 +25,9 @@ Webpart is developed using below technologies
|
|||
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
|
||||
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
|
||||
|
||||
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before you can use this webpart example, you will need at least one Out of the Box Calendar created.
|
||||
Before you can use this web part example, you will need at least one Out of the Box Calendar created.
|
||||
|
||||
It is required that the users have view access on the calendar.
|
||||
|
||||
|
|
@ -47,6 +44,7 @@ Version|Date|Comments
|
|||
1.0 |July 16, 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.**
|
||||
|
||||
---
|
||||
|
|
@ -60,7 +58,8 @@ Version|Date|Comments
|
|||
|
||||
|
||||
## Features
|
||||
This Web Part displays the events from multiple calendars located in various sites/site collection of sharepoint:
|
||||
|
||||
This Web Part displays the events from multiple calendars located in various sites/site collection of SharePoint:
|
||||
|
||||
- Aggregated events for Calendar
|
||||
- Supports Sub-Sites and Site Collection level
|
||||
|
|
@ -72,8 +71,6 @@ This Web Part displays the events from multiple calendars located in various sit
|
|||
|
||||
## React Aggregated Calendar
|
||||
|
||||
|
||||
|
||||
### Building the code
|
||||
|
||||
```bash
|
||||
|
|
|
|||
|
|
@ -16,16 +16,19 @@ extensions:
|
|||
# Using @pnp/js with Async / Await
|
||||
|
||||
## Summary
|
||||
This webpart demonstrates how to use [PnPJS](https://pnp.github.io/pnpjs/) with Async functions into the SharePoint Framework as well as integrating [PnP JS and SPFx Logging systems](https://blog.josequinto.com/2017/04/30/how-to-integrate-pnp-js-core-and-sharepoint-framework-logging-systems/). Real example querying SharePoint library to show document sizes.
|
||||
|
||||
This web part demonstrates how to use [PnPJS](https://pnp.github.io/pnpjs/) with Async functions into the SharePoint Framework as well as integrating [PnP JS and SPFx Logging systems](https://blog.josequinto.com/2017/04/30/how-to-integrate-pnp-js-core-and-sharepoint-framework-logging-systems/). Real example querying SharePoint library to show document sizes.
|
||||
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
|
||||
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
|
||||
|
|
@ -44,29 +47,35 @@ Version|Date|Comments
|
|||
1.0|May 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
|
||||
|
||||
- clone this repo
|
||||
- `$ npm i`
|
||||
- `$ gulp trust-dev-cert`
|
||||
- `$ gulp serve `
|
||||
|
||||
### Local Mode
|
||||
|
||||
A browser in local mode (localhost) will be opened.
|
||||
https://localhost:4321/temp/workbench.html
|
||||
|
||||
### SharePoint Mode
|
||||
|
||||
If you want to try on a real environment, open:
|
||||
https://your-domain.sharepoint.com/_layouts/15/workbench.aspx
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
- [Async / Await functionality working with PnP JS sample](https://github.com/jquintozamora/spfx-react-async-await-sp-pnp-js/blob/master/src/webparts/asyncAwaitPnPJs/components/AsyncAwaitPnPJs.tsx#L93)
|
||||
- Tested and working on IE11 (as TypeScript config provides Promise polyfill)
|
||||
- React Container for the initial load. [Smart Component](https://github.com/jquintozamora/spfx-react-async-await-sp-pnp-js/blob/master/src/webparts/asyncAwaitPnPJs/components/IAsyncAwaitPnPJsState.ts)
|
||||
|
|
@ -74,6 +83,4 @@ https://your-domain.sharepoint.com/_layouts/15/workbench.aspx
|
|||
- [PnP JS and SPFx Logging systems integration](https://blog.josequinto.com/2017/04/30/how-to-integrate-pnp-js-core-and-sharepoint-framework-logging-systems)
|
||||
|
||||
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-async-await-sp-pnp-js" />
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
|
|||
* Usage of [avataaars](https://getavataaars.com/)
|
||||
|
||||
|
||||
## WebPart Properties
|
||||
## Web Part Properties
|
||||
|
||||
Property |Type|Required| comments
|
||||
--------------------|----|--------|----------
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ This web part provides you the ability to add a variable height image banner wit
|
|||
|
||||
## Configurable Properties
|
||||
|
||||
The `Banner` webpart can be configured with the following properties:
|
||||
The `Banner` web part can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
|
|
@ -26,21 +26,21 @@ The `Banner` webpart can be configured with the following properties:
|
|||
| Enable parallax effect | useParallax | toggle | no | Enable if you want to include parallax effect on vertical scrolling |
|
||||
|
||||
|
||||
# Installing the web part
|
||||
## Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part does not have external dependencies.
|
||||
|
||||
# Screenshots
|
||||
## Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
## Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/banner
|
||||
|
||||
# Minimal Path to Awesome
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
|
|
@ -48,7 +48,7 @@ https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/b
|
|||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
# SharePoint webpart sample with SSO
|
||||
# SharePoint web part sample with SSO
|
||||
|
||||
## Summary
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ This demo does not include any threat models and is designed for educational pur
|
|||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
webpart | Bot Framework Discussions (msbots@service.microsoft.com) <br/> Stephan Bisser (@stephanbisser, bisser.io)
|
||||
web part | Bot Framework Discussions (msbots@service.microsoft.com) <br/> Stephan Bisser (@stephanbisser, bisser.io)
|
||||
bot | Bot Framework Discussions (msbots@service.microsoft.com)
|
||||
|
||||
## Version history
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ The Web Part checks the user's permissions for the View, Add, Edit, and Delete e
|
|||
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
|
||||
|
||||
|
||||
## WebPart Properties
|
||||
## Web Part Properties
|
||||
|
||||
Property |Type|Required| comments
|
||||
--------------------|----|--------|----------
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ It uses Microsoft Graph API to get image/video url and use PnPjs to load files f
|
|||
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
|
||||
|
||||
|
||||
## WebPart Properties
|
||||
## Web Part Properties
|
||||
|
||||
Property |Type|Required| comments
|
||||
--------------------|----|--------|----------
|
||||
|
|
@ -72,6 +72,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.**
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -170,16 +170,7 @@ This sample shows how to use X and Y coordinate data elements in a scatter chart
|
|||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
    
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -234,4 +225,12 @@ This Web Part sample pack illustrates the following concepts on top of the Share
|
|||
* Rendering conditional property pane fields
|
||||
* Creating custom property pane controls
|
||||
|
||||
## Support
|
||||
|
||||
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=react-chartcontrol&authors=@hugoabernier&title=react-chartcontrol%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=react-chartcontrol&authors=@hugoabernier&title=react-chartcontrol%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=react-chartcontrol&authors=@hugoabernier&title=react-chartcontrol%20-%20).
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-chartcontrol" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## Summary
|
||||
|
||||
This webpart allows you to add images to a SharePoint List, and renders them with a UX very similar to Instagram Stories (or Twitter Reels, or [Place your Social network here]). It is a way to engage employees, showing relevant content in a well-known visual appearance.
|
||||
This web part allows you to add images to a SharePoint List, and renders them with a UX very similar to Instagram Stories (or Twitter Reels, or [Place your Social network here]). It is a way to engage employees, showing relevant content in a well-known visual appearance.
|
||||
|
||||
|
||||
|
||||
|
|
@ -52,11 +52,11 @@ Version|Date|Comments
|
|||
- In the command-line run:
|
||||
- **npm install**
|
||||
- **gulp serve --nobrowser**
|
||||
- Add the webpart to the SharePoint Workbench (same Site where the List was created)
|
||||
- Add the web part to the SharePoint Workbench (same Site where the List was created)
|
||||
|
||||
## Features
|
||||
|
||||
This webpart illustrates the following concepts:
|
||||
This web part illustrates the following concepts:
|
||||
|
||||
- Using the Microsoft Graph Toolkit react components: [Person component](https://docs.microsoft.com/en-us/graph/toolkit/components/person)
|
||||
- Using FluentUI components
|
||||
|
|
|
|||
|
|
@ -13,17 +13,18 @@ extensions:
|
|||
- react
|
||||
createdDate: 8/1/2017 12:00:00 AM
|
||||
---
|
||||
# Content Query WebPart (Compatible with On-Premises SharePoint versions)
|
||||
# Content Query Web Part (Compatible with On-Premises SharePoint versions)
|
||||
|
||||
## Summary
|
||||
|
||||
> NOTE: This web part was built with an earlier version of SPFx which is compatible with on-premises versions of SharePoint. If you wish, you can use the [newer version of this web part](../react-content-query-online/README.md) which is compatible with SharePoint Online only.
|
||||
|
||||
The `React Content Query WebPart` is a modern version of the good old `Content by Query WebPart` that was introduced in SharePoint 2007. Built for *SharePoint 2016* and *Office 365*, this modern version is built against the new **SharePoint Framework (SPFx)** and uses the latest *Web Stack* practices. While the original WebPart was based on a `XSLT` templating engine, this *React* WebPart is based on the well known [Handlebars templating engine](http://handlebarsjs.com), which empowers users to create simple, yet powerfull `HTML` templates for rendering the queried content. This new version also lets the user query `any site collections` which resides on the same domain url, add `unlimited filters`, query *DateTime* fields to the `nearest minute` rather than being limited to a day, and much more.
|
||||
The `React Content Query Web Part` is a modern version of the good old `Content by Query Web Part` that was introduced in SharePoint 2007. Built for *SharePoint 2016* and *Office 365*, this modern version is built against the new **SharePoint Framework (SPFx)** and uses the latest *Web Stack* practices. While the original Web Part was based on a `XSLT` templating engine, this *React* Web Part is based on the well known [Handlebars templating engine](http://handlebarsjs.com), which empowers users to create simple, yet powerful `HTML` templates for rendering the queried content. This new version also lets the user query `any site collections` which resides on the same domain url, add `unlimited filters`, query *DateTime* fields to the `nearest minute` rather than being limited to a day, and much more.
|
||||
|
||||
<img src="Misc/toolpart.gif" />
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
|
@ -43,24 +44,25 @@ Version|Date|Comments
|
|||
-------|----|--------
|
||||
1.0.0|May 04, 2017|Initial release
|
||||
1.0.1|July 23rd 15, 2017|Updated to GA Version
|
||||
1.0.3|August 12, 2017|Added external scripts functionnality
|
||||
1.0.3|August 12, 2017|Added external scripts functionality
|
||||
1.0.4|August 31, 2017|Fixed a bug where tenant sites/subsites were missing from the **Web Url** dropdown
|
||||
1.0.5|September 1st, 2017|Added a **Site Url** parameter next to the **Web Url** parameter in order to narrow down the results
|
||||
1.0.6|September 19, 2017|Upgraded to SharePoint drop 1.2.0 and added the site url and web url preselection when adding the WebPart for the first time on a page. Also fixed a bug with fields that had spaces in their internal names (automatically replaced with `_x0020_` by SharePoint).
|
||||
1.0.6|September 19, 2017|Upgraded to SharePoint drop 1.2.0 and added the site url and web url pre-selection when adding the web part for the first time on a page. Also fixed a bug with fields that had spaces in their internal names (automatically replaced with `_x0020_` by SharePoint).
|
||||
1.0.7|November 17, 2017|Reverted to drop 1.1.0 in order to keep compatibility for SP2016 on-premise
|
||||
1.0.8|March 17, 2018|Updated to store the selected list using its ID instead of its title, so the webpart keeps working if the list title gets updated.
|
||||
1.0.9|March 28, 2018|Added a switch to enable the WebPart to apply it's query recursively within folders, and fixed a bug where webs could sometimes not appear under the web url dropdown
|
||||
1.0.8|March 17, 2018|Updated to store the selected list using its ID instead of its title, so the web part keeps working if the list title gets updated.
|
||||
1.0.9|March 28, 2018|Added a switch to enable the web part to apply it's query recursively within folders, and fixed a bug where webs could sometimes not appear under the web url dropdown
|
||||
1.0.10|April 5, 2018|Fixed a bug where the webs of the selected site collection were not being loaded correctly for particular tenants
|
||||
1.0.11|May 22, 2018|Fixed a bug causing filters to loose their sort order in IE
|
||||
|
||||
## 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.**
|
||||
|
||||
## Features
|
||||
|
||||
### Cross site collection
|
||||
|
||||
The WebPart uses the search in order to get all sites under the current domain, which makes it possible to query not only subsites but other site collections and their subsites as well. By default, the current site collection and the current web on which the user is adding the WebPart will be pre-selected automatically.
|
||||
The web part uses the search in order to get all sites under the current domain, which makes it possible to query not only sub-sites but other site collections and their sub-sites as well. By default, the current site collection and the current web on which the user is adding the web part will be pre-selected automatically.
|
||||
|
||||
<img src="Misc/allsites_v2.gif" />
|
||||
<br>
|
||||
|
|
@ -81,7 +83,7 @@ It is now possible to include time validation when querying date fields, giving
|
|||
|
||||
### Handlebars templating engine
|
||||
|
||||
Enjoy a simple, yet powerfull html-based templating engine for rendering your results. The WebPart even generates a default Handlebars template for you based on the view fields you have selected during the configuration!
|
||||
Enjoy a simple, yet powerfull html-based templating engine for rendering your results. The web part even generates a default Handlebars template for you based on the view fields you have selected during the configuration!
|
||||
|
||||
For advanced users, more than 150 Handlebars block helpers are available by default within the user defined template. For a list of all block helpers, see [handlebars-helpers](https://github.com/helpers/handlebars-helpers#helpers)
|
||||
<br>
|
||||
|
|
@ -103,7 +105,7 @@ External scripts can be used to include either libraries such as *jQuery*, or ev
|
|||
|
||||
## Getting Started
|
||||
|
||||
### Adding the WebPart to your page
|
||||
### Adding the web part to your page
|
||||
|
||||
To add the `React Content Query WebPart` to your site page you have two options :
|
||||
- Either clone this repository, build the project yourself and connect it to SharePoint (see [officedev documentation](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint))
|
||||
|
|
@ -113,7 +115,7 @@ Note : The second method will only work for Office 365 sites, since the **.ppkg*
|
|||
|
||||
### Configuring the WebPart
|
||||
|
||||
As seen in the [User friendly configuration](#user-friendly-configuration) section, configuring the WebPart is quite straight forward. However, here's a list of *gotchas* that could save you some time :
|
||||
As seen in the [User friendly configuration](#user-friendly-configuration) section, configuring the web part is quite straight forward. However, here's a list of *gotchas* that could save you some time :
|
||||
|
||||
- The `Web Url` property uses the search to find all sites that are under the current domain. That being said, newly created sites can take a while to appear within the dropdown options, based on the search crawl schedule.
|
||||
- The `Filters` property still supports query string expressions like *[PageQueryString:ParamName]* for text fields, and date expressions such as *[Today]* or *[Today] + 4* for date fields.
|
||||
|
|
@ -187,7 +189,7 @@ Once we can loop within the items, we can render any field, as long as the field
|
|||
<div class="item">[object]</div>
|
||||
```
|
||||
|
||||
We are almost there, the above code is rendering a *[object]* because the Content Query Webpart offers 3 different ways to render a field value:
|
||||
We are almost there, the above code is rendering a *[object]* because the Content Query Web Part offers 3 different ways to render a field value:
|
||||
|
||||
Property | Description
|
||||
---------|---------------
|
||||
|
|
@ -221,15 +223,15 @@ Property | Description
|
|||
|
||||
#### Including basic library files
|
||||
|
||||
For including JavaScript files within the WebPart, file URLs must be added to the **External Scripts** parameter available in the toolpart.
|
||||
For including JavaScript files within the web part, file URLs must be added to the **External Scripts** parameter available in the toolpart.
|
||||
|
||||
<img src="Misc/externalScripts.png" />
|
||||
|
||||
Each file URL must be on its own line, and placed in the desired order. The scripts will be loaded asynchronously, but in a sequential fashion, which means that the WebPart will wait until a script is completely loaded before proceeding to load the next one.
|
||||
Each file URL must be on its own line, and placed in the desired order. The scripts will be loaded asynchronously, but in a sequential fashion, which means that the web part will wait until a script is completely loaded before proceeding to load the next one.
|
||||
|
||||
#### Including custom logic files
|
||||
|
||||
If you need custom logic files that can interact precisely **before** or **after** the rendering of the HTML generated by the *Handlebars* template, you must follow the patern below in order for the WebPart to recognize the endpoints and call them when needed :
|
||||
If you need custom logic files that can interact precisely **before** or **after** the rendering of the HTML generated by the *Handlebars* template, you must follow the pattern below in order for the web part to recognize the endpoints and call them when needed :
|
||||
|
||||
```javascript
|
||||
ReactContentQuery.ExternalScripts.MyScriptFile = {
|
||||
|
|
@ -250,7 +252,7 @@ Looking at this example, here are the key things that needs to be respected in o
|
|||
_Namespace_
|
||||
|
||||
- [x] The script uses a namespace which starts by **ReactContentQuery.ExternalScripts.**, followed by the name of its own file
|
||||
- [x] The name of the file has to be written without its **.js** extension, and without any caracters that aren't letters or numbers
|
||||
- [x] The name of the file has to be written without its **.js** extension, and without any characters that aren't letters or numbers
|
||||
- [x] The name of the file needs to respect the same casing as in it's URL
|
||||
|
||||
Examples :
|
||||
|
|
@ -278,8 +280,8 @@ Both functions provide the following parameters :
|
|||
|
||||
Parameter | Description
|
||||
----------------------|-------------
|
||||
**wpContext** | Represents the context of the WebPart who called the function, which exposes all kinds of useful informations such as **wpContext.domElement** which represents the HTML element on which the current WebPart is being rendered.
|
||||
**handlebarsContext** | Represents the handlebars context used for generating the template of the current WebPart. Can be used for adding handlebar block helpers in the **onPreRender** function for example.
|
||||
**wpContext** | Represents the context of the web part which called the function, which exposes all kinds of useful information such as **wpContext.domElement** which represents the HTML element on which the current web part is being rendered.
|
||||
**handlebarsContext** | Represents the handlebars context used for generating the template of the current web part. Can be used for adding handlebar block helpers in the **onPreRender** function for example.
|
||||
|
||||
|
||||
#### Including custom block helpers
|
||||
|
|
|
|||
|
|
@ -41,8 +41,8 @@ Version|Date|Comments
|
|||
* `gulp build`
|
||||
* `gulp bundle --ship`
|
||||
* `gulp package-solution --ship`
|
||||
* add the webpart to your tenant app store
|
||||
* add the app to a SharePoint site and then add the webpart to the page
|
||||
* add the web part to your tenant app store
|
||||
* add the app to a SharePoint site and then add the web part to the page
|
||||
|
||||
|
||||
## Features
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ Version|Date|Comments
|
|||
1.0|May 15, 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.**
|
||||
|
||||
---
|
||||
|
|
@ -39,16 +40,18 @@ Version|Date|Comments
|
|||
|
||||
A very good real life scenario where this pattern can be used is in Data Application Layers scenario, more than often developers and architects are faced with requirements where an application needs to be able to access different databases or event different database servers which have different drivers, but the users want to to that without changing a lot of code, something that can be switched from an easy parameter somewhere.
|
||||
|
||||
For the sake of simplicity lets suppose you work at Company A, and company A acquired company B, at company A you have a webpart developed that brings Customer Information from SharePoint List, but at Company B which was acquired and in the process of merging, they have Product Information in their own CRM which exposes data via REST APIs or just a JSON file.
|
||||
For the sake of simplicity lets suppose you work at Company A, and company A acquired company B, at company A you have a web part developed that brings Customer Information from SharePoint List, but at Company B which was acquired and in the process of merging, they have Product Information in their own CRM which exposes data via REST APIs or just a JSON file.
|
||||
|
||||
The users wants to see their products in the same SharePoint page using the same webpart, meaning that the webpart needs to be added twice with different parameters to the same page and users can search for customers information on both data sources, with the same source code.
|
||||
The users wants to see their products in the same SharePoint page using the same web part, meaning that the web part needs to be added twice with different parameters to the same page and users can search for customers information on both data sources, with the same source code.
|
||||
|
||||
### Project Structure
|
||||
|
||||
|
||||
|
||||
As seen above we have a Factory component and in there we have all files that our project needs, lets discuss them one by one.
|
||||
|
||||
##### Customer.ts
|
||||
|
||||
Our model or data access object, nothing to fancy, the idea is to show the pattern, not complex Data Transfer Objects.
|
||||
|
||||
```typescript
|
||||
|
|
@ -78,6 +81,7 @@ export default DataSources;
|
|||
```
|
||||
|
||||
##### DaoFactory.ts
|
||||
|
||||
This is the abstract class DAO Factory that would need to be implemented, for the ease of sake, I am doing only one DAO, Customers, but you can use the same pattern for many different DTOs as well on the same class.
|
||||
|
||||
```typescript
|
||||
|
|
@ -108,7 +112,9 @@ import JsonDAOFactory from "./JsonDAOFactory";
|
|||
```
|
||||
|
||||
##### JsoDAOFactory.ts
|
||||
|
||||
This class is just the implementation of the factory method
|
||||
|
||||
```typescript
|
||||
import DAOFactory from "./DaoFactory";
|
||||
import JsonCustomerDAO from "./JsonCustomerDAO";
|
||||
|
|
@ -124,7 +130,9 @@ export default JsonDAOFactory;
|
|||
```
|
||||
|
||||
##### SharepointListDAOFactory.ts
|
||||
|
||||
This class is just the implementation of the factory method
|
||||
|
||||
```typescript
|
||||
import DaoFactory from "./DaoFactory";
|
||||
import ICustomerDao from "./ICustomerDao";
|
||||
|
|
@ -142,6 +150,7 @@ export default SharepointListDAOFactory;
|
|||
|
||||
|
||||
##### ICustomerDao.ts
|
||||
|
||||
Now, this is the customer interface which defines the methods that would need to be implemented and that depends on the data source endpoint, database or driver, or whatever.
|
||||
|
||||
```typescript
|
||||
|
|
@ -160,7 +169,7 @@ export default ICustomerDao;
|
|||
|
||||
##### JsonCustomerDAO.ts
|
||||
|
||||
Implementation on these methods are left to the reader, but the main idea here is to implement based on the datasource the Data Access Logic here and return the strongly typed objects where needed.
|
||||
Implementation on these methods are left to the reader, but the main idea here is to implement based on the data source the Data Access Logic here and return the strongly typed objects where needed.
|
||||
|
||||
```typescript
|
||||
import ICustomerDao from "./ICustomerDao";
|
||||
|
|
@ -198,9 +207,10 @@ import Customer from "./Customer";
|
|||
|
||||
export default JsonCustomerDAO;
|
||||
```
|
||||
|
||||
##### SharepointCustomerDAO.ts
|
||||
|
||||
Implementation on these methods are left to the reader, but the main idea here is to implement based on the datasource the Data Access Logic here and return the strongly typed objects where needed.
|
||||
Implementation on these methods are left to the reader, but the main idea here is to implement based on the data source the Data Access Logic here and return the strongly typed objects where needed.
|
||||
|
||||
```typescript
|
||||
import ICustomerDao from "./ICustomerDao";
|
||||
|
|
@ -239,12 +249,13 @@ import Customer from "./Customer";
|
|||
export default SharepointCustomerDao;
|
||||
```
|
||||
|
||||
##### The component
|
||||
##### The component
|
||||
|
||||
This is where we actually see the entire benefit of the abstract factory pattern, as you can see the code is really short here and easy to read, no custom business logic, and everything so easy to maintain.
|
||||
|
||||
We create a private property of type ICustomerDao to be instantiated on the setDaos method based on the input of the user in the property pane. This method is only called in the constructor once.
|
||||
|
||||
And then in the render method we just get the Customer items from the datasource, and as you can see, its totally generic, no custom logic based on the datasource selected.
|
||||
And then in the render method we just get the Customer items from the data source, and as you can see, its totally generic, no custom logic based on the data source selected.
|
||||
|
||||
```typescript
|
||||
import * as React from 'react';
|
||||
|
|
@ -291,6 +302,7 @@ export default class Abstractfactory extends React.Component<IAbstractfactoryPro
|
|||
And just for your understanding, I show below the props and states clases
|
||||
|
||||
##### IAbstractfactoryProps.ts
|
||||
|
||||
```typescript
|
||||
export interface IAbstractfactoryProps {
|
||||
datasource: string;
|
||||
|
|
@ -298,7 +310,9 @@ export interface IAbstractfactoryProps {
|
|||
|
||||
|
||||
```
|
||||
|
||||
##### IAbstractFactoryState.ts
|
||||
|
||||
```typescript
|
||||
import Customer from "./Customer";
|
||||
|
||||
|
|
@ -307,8 +321,10 @@ export interface IAbstractFactoryState {
|
|||
}
|
||||
```
|
||||
|
||||
And finally the webpart code
|
||||
And finally the web part code
|
||||
|
||||
##### AbstractFactoryWebPart.ts
|
||||
|
||||
```typescript
|
||||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
|
|
@ -376,6 +392,6 @@ export default class AbstractfactoryWebPart extends BaseClientSideWebPart<IAbstr
|
|||
```
|
||||
|
||||
>Conclusion:
|
||||
We all know that SharePoint Framework Projects are transpiled and bundled into one single JS file, however regardless of that for those of us who have worked in huge projects and are only User Interface Developers, we know that we can do better than what the standard samples show us in the standard documentation, with the above post I wanted to show you how simple is to create maintenable code, code that anyone can read, and later modify.
|
||||
We all know that SharePoint Framework Projects are transpiled and bundled into one single JS file, however regardless of that for those of us who have worked in huge projects and are only User Interface Developers, we know that we can do better than what the standard samples show us in the standard documentation, with the above post I wanted to show you how simple is to create maintainable code, code that anyone can read, and later modify.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/designpatterns-typescript/abstractfactory" />
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ Version|Date|Comments
|
|||
1.0|May 15, 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.**
|
||||
|
||||
---
|
||||
|
|
@ -54,7 +55,7 @@ It promotes the loose-coupling by eliminating the need to bind application-speci
|
|||
|
||||
So lets start this journey explaining how I saw this factory method pattern could be applied.
|
||||
|
||||
In a SharePoint Site we can have multiple lists and all those lists could have different columns or fields, why not create a generic way to build the list item objets depending on the selected list? well in plain english, a webpart where you can select the list, and based on the selected list it will render all the columns, sure you can do this in many ways and probably with lots of switches/if statements, etc, but I wanted a more elegant solution and I believe this sample will do just that.
|
||||
In a SharePoint Site we can have multiple lists and all those lists could have different columns or fields, why not create a generic way to build the list item objets depending on the selected list? well in plain english, a web part where you can select the list, and based on the selected list it will render all the columns, sure you can do this in many ways and probably with lots of switches/if statements, etc, but I wanted a more elegant solution and I believe this sample will do just that.
|
||||
|
||||
|
||||
##### Diagram
|
||||
|
|
@ -255,7 +256,7 @@ export class ListItemFactory implements IFactory {
|
|||
|
||||
###### Props and states
|
||||
|
||||
Properties we pass from the main webpart to the component are defined in the props interface, things like SPHttpclient are important here, state is where we actually store our returned information from the server, because listitems could be of different types, I created a wrapper Interface and depending on the type of list, then the state would be read from a different state property DetailsListItemState, DetailsNewsListItemState, etc.
|
||||
Properties we pass from the main web part to the component are defined in the props interface, things like SPHttpclient are important here, state is where we actually store our returned information from the server, because listitems could be of different types, I created a wrapper Interface and depending on the type of list, then the state would be read from a different state property DetailsListItemState, DetailsNewsListItemState, etc.
|
||||
|
||||
We will see later in the series how could achieve this with shorter code, but for this pattern its what I need so far.
|
||||
|
||||
|
|
@ -498,9 +499,10 @@ export default class FactoryMethod extends React.Component<IFactoryMethodProps,
|
|||
//#endregion
|
||||
}
|
||||
```
|
||||
###### The webpart
|
||||
|
||||
And finally the webpart code is below, with self explanatory comments for the reader to understand the events lifecycle.
|
||||
###### The web part
|
||||
|
||||
And finally the web part code is below, with self explanatory comments for the reader to understand the events lifecycle.
|
||||
|
||||
|
||||
```Typescript
|
||||
|
|
|
|||
|
|
@ -1,137 +1,139 @@
|
|||
# Singleton Design Pattern
|
||||
|
||||
## Summary
|
||||
A singleton is a pattern that guarantees there is a single instance of an object in the system. A singleton can maintain a state which is shared across the entire system. Singletons abstract their internal workings from the rest of the system
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
|
||||
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
|
||||
|
||||
|
||||
## Prerequisites
|
||||
|
||||
> N/A
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
designpatterns-typescript\singleton | [@levalencia](https://www.twitter.com/levalencia)
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 15, 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.**
|
||||
|
||||
---
|
||||
|
||||
|
||||
### Singleton pattern
|
||||
|
||||
Singletons are common in business applications. They help model real-life business processes that involve shared resources.
|
||||
|
||||
Even when I started my career in 2002 and started developing with VB.NET and then C#, at that time design patterns were popular and probably the most widely used was the Singleton Pattern, why, is this so important, because if not used correctly it can lead to Memory leaks, bad use of memory because instantiating objects too many times that are not needed.
|
||||
|
||||
So Software Designers, Architects and Developers should have at the very least this design pattern very well wood understood in their own arsenal and use it on a daily basis.
|
||||
|
||||
Some people might say, well but its only 4kb of memory, and 100 users, well I have seen by experience how even small applications which are poorly developed get this memory leaks and by a simple refactoring with a few Singletons here and there, the problem goes away.
|
||||
|
||||
### Scenario:
|
||||
|
||||
Any application at some point will need to read configuration variables from somewhere, imagine a SPFx webpart which is a complex SPA with many screens and forms where you need to rely on a configuration Sharepoint List, where you store information like: Number of Items per page, Max Number of Connections, Timeouts, Max Number of devices allowd, and things like that.
|
||||
|
||||
In this scenario it makes sense to build a class that will allow you easy retrieval of those values without you having to write code to retrieve the values in all screens or forms on the SPA.
|
||||
|
||||
It is a poor practice to repeat configuration access code everywhere in the system. If the physical location of configuration ever changes one would have to update many different files and lines of code. To solve this, developers implement a singleton for managing configuration.
|
||||
|
||||
For this sample only one file need to be added and the .tsx file modified to use the Singleton Pattern.
|
||||
|
||||
### ConfigurationManager.ts
|
||||
```typescript
|
||||
class ConfigurationManager {
|
||||
private static instance: ConfigurationManager;
|
||||
public constructor() {
|
||||
// do something construct...
|
||||
}
|
||||
static getInstance(): ConfigurationManager {
|
||||
if (!ConfigurationManager.instance) {
|
||||
ConfigurationManager.instance = new ConfigurationManager();
|
||||
// ... any one time initialization goes here ...
|
||||
}
|
||||
return ConfigurationManager.instance;
|
||||
}
|
||||
|
||||
// excercise for the reader to get data from an external data source.
|
||||
numberOfItemsPerPage(): number {
|
||||
return 10;
|
||||
}
|
||||
|
||||
maxNumberOfConnections(): number {
|
||||
return 10;
|
||||
}
|
||||
|
||||
restTimeout(): number {
|
||||
return 1000;
|
||||
}
|
||||
}
|
||||
|
||||
export default ConfigurationManager;
|
||||
```
|
||||
|
||||
And finally the component TSX where we use the singleton pattern from the Constructor.
|
||||
|
||||
```typescript
|
||||
import * as React from "react";
|
||||
import styles from "./Singleton.module.scss";
|
||||
import { ISingletonProps } from "./ISingletonProps";
|
||||
import { escape } from "@microsoft/sp-lodash-subset";
|
||||
import ConfigurationManager from "./ConfigurationManager";
|
||||
|
||||
export default class Singleton extends React.Component<ISingletonProps, {}> {
|
||||
private numberOfItemsPerPage: number;
|
||||
private maxNumberOfConnections: number;
|
||||
private restTimeout: number;
|
||||
|
||||
constructor(props: ISingletonProps, state: any) {
|
||||
super(props);
|
||||
let config:ConfigurationManager = ConfigurationManager.getInstance();
|
||||
this.numberOfItemsPerPage = config.numberOfItemsPerPage();
|
||||
this.maxNumberOfConnections = config.numberOfItemsPerPage();
|
||||
this.restTimeout = config.restTimeout();
|
||||
}
|
||||
|
||||
|
||||
|
||||
public render(): React.ReactElement<ISingletonProps> {
|
||||
return (
|
||||
<div className={ styles.singleton }>
|
||||
<div className={ styles.container }>
|
||||
<div className={ styles.row }>
|
||||
<div className={ styles.column }>
|
||||
<span className={ styles.title }>Welcome to SharePoint!</span>
|
||||
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
|
||||
<p className={ styles.description }>{escape(this.props.description)}</p>
|
||||
<a href="https://aka.ms/spfx" className={ styles.button }>
|
||||
<span className={ styles.label }>Learn more</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
As you can see this clearly shows how to use the singleton pattern in a real life situation and I hope its clear to the reader and start using in your own projects
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/designpatterns-typescript/singleton" />
|
||||
# Singleton Design Pattern
|
||||
|
||||
## Summary
|
||||
A singleton is a pattern that guarantees there is a single instance of an object in the system. A singleton can maintain a state which is shared across the entire system. Singletons abstract their internal workings from the rest of the system
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
|
||||
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
|
||||
|
||||
|
||||
## Prerequisites
|
||||
|
||||
> N/A
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
designpatterns-typescript\singleton | [@levalencia](https://www.twitter.com/levalencia)
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 15, 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.**
|
||||
|
||||
---
|
||||
|
||||
|
||||
### Singleton pattern
|
||||
|
||||
Singletons are common in business applications. They help model real-life business processes that involve shared resources.
|
||||
|
||||
Even when I started my career in 2002 and started developing with VB.NET and then C#, at that time design patterns were popular and probably the most widely used was the Singleton Pattern, why, is this so important, because if not used correctly it can lead to Memory leaks, bad use of memory because instantiating objects too many times that are not needed.
|
||||
|
||||
So Software Designers, Architects and Developers should have at the very least this design pattern very well wood understood in their own arsenal and use it on a daily basis.
|
||||
|
||||
Some people might say, well but its only 4kb of memory, and 100 users, well I have seen by experience how even small applications which are poorly developed get this memory leaks and by a simple refactoring with a few Singletons here and there, the problem goes away.
|
||||
|
||||
### Scenario:
|
||||
|
||||
Any application at some point will need to read configuration variables from somewhere, imagine a SPFx web part which is a complex SPA with many screens and forms where you need to rely on a configuration SharePoint List, where you store information like: Number of Items per page, Max Number of Connections, Timeouts, Max Number of devices allowd, and things like that.
|
||||
|
||||
In this scenario it makes sense to build a class that will allow you easy retrieval of those values without you having to write code to retrieve the values in all screens or forms on the SPA.
|
||||
|
||||
It is a poor practice to repeat configuration access code everywhere in the system. If the physical location of configuration ever changes one would have to update many different files and lines of code. To solve this, developers implement a singleton for managing configuration.
|
||||
|
||||
For this sample only one file need to be added and the .tsx file modified to use the Singleton Pattern.
|
||||
|
||||
### ConfigurationManager.ts
|
||||
|
||||
```typescript
|
||||
class ConfigurationManager {
|
||||
private static instance: ConfigurationManager;
|
||||
public constructor() {
|
||||
// do something construct...
|
||||
}
|
||||
static getInstance(): ConfigurationManager {
|
||||
if (!ConfigurationManager.instance) {
|
||||
ConfigurationManager.instance = new ConfigurationManager();
|
||||
// ... any one time initialization goes here ...
|
||||
}
|
||||
return ConfigurationManager.instance;
|
||||
}
|
||||
|
||||
// excercise for the reader to get data from an external data source.
|
||||
numberOfItemsPerPage(): number {
|
||||
return 10;
|
||||
}
|
||||
|
||||
maxNumberOfConnections(): number {
|
||||
return 10;
|
||||
}
|
||||
|
||||
restTimeout(): number {
|
||||
return 1000;
|
||||
}
|
||||
}
|
||||
|
||||
export default ConfigurationManager;
|
||||
```
|
||||
|
||||
And finally the component TSX where we use the singleton pattern from the Constructor.
|
||||
|
||||
```typescript
|
||||
import * as React from "react";
|
||||
import styles from "./Singleton.module.scss";
|
||||
import { ISingletonProps } from "./ISingletonProps";
|
||||
import { escape } from "@microsoft/sp-lodash-subset";
|
||||
import ConfigurationManager from "./ConfigurationManager";
|
||||
|
||||
export default class Singleton extends React.Component<ISingletonProps, {}> {
|
||||
private numberOfItemsPerPage: number;
|
||||
private maxNumberOfConnections: number;
|
||||
private restTimeout: number;
|
||||
|
||||
constructor(props: ISingletonProps, state: any) {
|
||||
super(props);
|
||||
let config:ConfigurationManager = ConfigurationManager.getInstance();
|
||||
this.numberOfItemsPerPage = config.numberOfItemsPerPage();
|
||||
this.maxNumberOfConnections = config.numberOfItemsPerPage();
|
||||
this.restTimeout = config.restTimeout();
|
||||
}
|
||||
|
||||
|
||||
|
||||
public render(): React.ReactElement<ISingletonProps> {
|
||||
return (
|
||||
<div className={ styles.singleton }>
|
||||
<div className={ styles.container }>
|
||||
<div className={ styles.row }>
|
||||
<div className={ styles.column }>
|
||||
<span className={ styles.title }>Welcome to SharePoint!</span>
|
||||
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
|
||||
<p className={ styles.description }>{escape(this.props.description)}</p>
|
||||
<a href="https://aka.ms/spfx" className={ styles.button }>
|
||||
<span className={ styles.label }>Learn more</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
As you can see this clearly shows how to use the singleton pattern in a real life situation and I hope its clear to the reader and start using in your own projects
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/designpatterns-typescript/singleton" />
|
||||
|
|
|
|||
|
|
@ -46,11 +46,11 @@
|
|||
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
|
||||
|
||||
|
||||
## WebPart Properties
|
||||
## Web Part Properties
|
||||
|
||||
Property |Type|Required| comments
|
||||
--------------------|----|--------|----------
|
||||
Title | Text| No|WebPart Title
|
||||
Title | Text| No|Web Part Title
|
||||
searchFirstName | boolean|No| Lastname or Firstname search query
|
||||
Properties to search | text | No | By default **FirstName,LastName,WorkEmail,Department** are used for search. You can add custom properties separated by comma.
|
||||
Properties to sent as clear text | text | No | By default if the search key has empty spaces, its replaced with **+** before sending it to the search query. The search properties mentioned here will be sent without the empty space replacemnt.
|
||||
|
|
@ -79,6 +79,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.**
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ Following issue [#659](https://github.com/SharePoint/sp-dev-fx-webparts/issues/6
|
|||
|
||||
## Summary
|
||||
|
||||
This sample shows how we can use the SPFx Event Aggregator to communicate between web parts through broadcasting events utilizing the [Publish–subscribe pattern](https://en.wikipedia.org/wiki/Publish–subscribe_pattern). It enables a webpart or component to raise event (broadcast message) through the SPFx event aggregator and that event is received by other web parts or components that have been subscribed to receive it.
|
||||
This sample shows how we can use the SPFx Event Aggregator to communicate between web parts through broadcasting events utilizing the [Publish–subscribe pattern](https://en.wikipedia.org/wiki/Publish–subscribe_pattern). It enables a web part or component to raise event (broadcast message) through the SPFx event aggregator and that event is received by other web parts or components that have been subscribed to receive it.
|
||||
|
||||
> Please note the SPFx Event Aggregator is still in Alpha and **NOT SUPPORTED IN PRODUCTION USE**, but this sample will be updated in future when there are changes from the Alpha version to GA.
|
||||
|
||||
|
|
@ -43,6 +43,7 @@ Version|Date|Comments
|
|||
0.0.3|November 18, 2018 | Sample deprecated
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -17,12 +17,13 @@ extensions:
|
|||
|
||||
## Summary
|
||||
- This Web Part allows users to create Frequently Asked Questions(Faq App) in modern and classic SharePoint pages.
|
||||
- This webpart allows to search within questions and answers which are stored in a SharePoint FAQ list.
|
||||
- This web part allows to search within questions and answers which are stored in a SharePoint FAQ list.
|
||||
- "React-autosuggest and react-accessible-accordion" react packages are used for the search and accordion control.
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
|
@ -90,7 +91,7 @@ Column Name|Field Type
|
|||
- Expand answers to your most frequent questions.
|
||||
- Include text, links, images in your answers.
|
||||
- A search bar to make your FAQ accordion searchable.
|
||||
- This webpart allows to search within questions and answers which are stored in a SharePoint FAQ list.
|
||||
- This web part allows to search within questions and answers which are stored in a SharePoint FAQ list.
|
||||
- Sorting is enabled on both the category & Question
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-FAQApp" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/pnp/sp-starter-kit/tree/master/solution/src/webparts/followedSites.
|
||||
|
||||
|
||||
This web part provides you the ability to display a list of site administrator defined number of sites that a given user is following, with paging as well as inline filtering of sites by keyword or phrase. Currently the list of followed sites includes classic as well as modern communication sites but does not include group enabled (modern) team sites.
|
||||
|
||||
|
||||
|
|
@ -15,29 +14,29 @@ This web part provides you the ability to display a list of site administrator d
|
|||
|
||||
## Configurable Properties
|
||||
|
||||
The `Followed Sites` webpart can be configured with the following properties:
|
||||
The `Followed Sites` web part can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Followed Sites | title | string | no | The webpart title, editable inline with the webpart itself |
|
||||
| Followed Sites | title | string | no | The web part title, editable inline with the web part itself |
|
||||
| Number of followed sites to retrieve | nrOfItems | number | no | The number of sites to show per page, default = 10 |
|
||||
| Specify the sort order of the retrieved sites | sortOrder | number | no | Preferred site sort order. Default sort order driven by SharePoint, or by site name |
|
||||
|
||||
# Installing the web part
|
||||
## Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part utilizes the SharePoint Rest API, `/_api/social.following/my/followed(types=4)`, endpoint.
|
||||
|
||||
# Screenshots
|
||||
## Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
## Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/followedSites
|
||||
|
||||
# Minimal Path to Awesome
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
|
|
@ -45,7 +44,7 @@ https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/f
|
|||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ Version|Date|Comments
|
|||
|
||||
This sample illustrates how to convert an existing Javascript-only SPFx web part to a React SPFx web part while keeping the same look and feel. Please refer to the [js-GitHubBadge](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/js-gitHubBadge) sample for the original Javascript-only web part.
|
||||
|
||||
A second webpart (called `GitHub Badge v2`) demonstrates how to render the same data using a Fabric UI persona card.
|
||||
A second web part (called `GitHub Badge v2`) demonstrates how to render the same data using a Fabric UI persona card.
|
||||
|
||||
For more information about the conversion process, refer to this [blog article](https://tahoeninjas.blog/2019/04/19/converting-spfx-from-javascript-to-react/).
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# Using PnPJS with Microsoft Graph
|
||||
|
||||
## Summary
|
||||
This webpart demonstrates how to use [PnPJS](https://pnp.github.io/pnpjs/) with SharePoint Framework and how to query [Microsoft Graph](https://docs.microsoft.com/en-us/graph/overview) with PnPJS.
|
||||
This web part demonstrates how to use [PnPJS](https://pnp.github.io/pnpjs/) with SharePoint Framework and how to query [Microsoft Graph](https://docs.microsoft.com/en-us/graph/overview) with PnPJS.
|
||||
It requests a list of Azure AD [groups](https://docs.microsoft.com/en-us/graph/api/group-list?view=graph-rest-1.0) at your tenant and shows them using [Office UI Fabric React](https://developer.microsoft.com/en-us/fabric#/components) list.
|
||||
|
||||
|
||||
|
|
@ -28,6 +28,7 @@ Version|Date|Comments
|
|||
1.0|Jan 09, 2019|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,7 +67,7 @@ Description of the web part with possible additional details than in short summa
|
|||
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
||||
|
||||
* Detail List control from Fluent UI
|
||||
* Webpart Title control from PnP React
|
||||
* Web part Title control from PnP React
|
||||
* Microsoft Graph API
|
||||
* External API Integration with SharePoint Framework
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# React Hooks Form WebPart
|
||||
|
||||
## Summary
|
||||
The `React Hooks web part` is an example of how to implement Hooks in Spfx.
|
||||
The `React Hooks web part` is an example of how to implement Hooks in SPFx.
|
||||
Hooks is a new feature included in React version 16.8, with the new version of **SharePoint Framework (SPFx) version 1.9.1** we can use them in our developments. In this example we are going to see the different types of hooks that are available and with the comparison of how this implementation can be done without the Hooks to be able to observe the benefits of using it.
|
||||
|
||||
|
||||
|
|
@ -54,4 +54,4 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
|
|||
- Using React Hooks for building SharePoint Framework client-side web parts.
|
||||
- Using @PnP/PnPjs to read items ...
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-hooks" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-hooks" />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# Image Slider from Photo Gallery using Taxonomy Filter
|
||||
|
||||
## Summary
|
||||
This webpart display the image in slider based on the filter of Taxonomy from Property panel. Images are stored in PhotoGallery and tagged with Taxonomy. This web part showcase 3 important implementation.
|
||||
This web part display the image in slider based on the filter of Taxonomy from Property panel. Images are stored in PhotoGallery and tagged with Taxonomy. This web part showcase 3 important implementation.
|
||||
|
||||
- How to add the Terms in the propertypage and pass the values to react component
|
||||
- How to filter the list based on Taxonomy and extract the Image URL
|
||||
|
|
@ -35,6 +35,7 @@ Version|Date|Comments
|
|||
1.0|March 1, 2019 |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.**
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@ extensions:
|
|||
## Summary
|
||||
|
||||
|
||||
This solution contains an SPFx webpart that shows a kanban board using Office UI Fabric components ([Office UI Fabric](https://developer.microsoft.com/fluentui/)).
|
||||
The webpart uses the default columns of the SharePoint Tasks list for showing the board's columns and the tasks.
|
||||
This solution contains an SPFx web part that shows a kanban board using Office UI Fabric components ([Office UI Fabric](https://developer.microsoft.com/fluentui/)).
|
||||
The web part uses the default columns of the SharePoint Tasks list for showing the board's columns and the tasks.
|
||||
|
||||
|
||||
|
||||
|
|
@ -35,7 +35,7 @@ The webpart uses the default columns of the SharePoint Tasks list for showing th
|
|||
|
||||
## Prerequisites
|
||||
|
||||
This webpart reads the information from a Tasks list and uses the following OOB columns
|
||||
This web part reads the information from a Tasks list and uses the following OOB columns
|
||||
* Task Name
|
||||
* Assigned To
|
||||
* % Complete
|
||||
|
|
@ -43,7 +43,7 @@ This webpart reads the information from a Tasks list and uses the following OOB
|
|||
* Priority
|
||||
* Task Status
|
||||
|
||||
The Task list can be chosen using the webpart properties (BaseTemplate 171 or 107)
|
||||
The Task list can be chosen using the web part properties (BaseTemplate 171 or 107)
|
||||
|
||||
## Solution
|
||||
|
||||
|
|
|
|||
|
|
@ -13,15 +13,15 @@ Links and groups are both customizable.
|
|||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **Links** web part.
|
||||
3. Configure the webpart to update its properties.
|
||||
3. Configure the web part to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `Links` webpart can be configured with the following properties:
|
||||
The `Links` web part can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Useful links | title | string | no | The webpart title, editable inline with the webpart itself |
|
||||
| Useful links | title | string | no | The web part title, editable inline with the web part itself |
|
||||
| Group names for the links | groupData | collection | no | Collection of group names for grouping links into sets |
|
||||
| Link data | collectionData | collection | no | Collection of links |
|
||||
|
||||
|
|
|
|||
|
|
@ -53,11 +53,11 @@ Grant-PnPTenantServicePrincipalPermission -Resource "SPFx-LOB-Function" -Scope "
|
|||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **LobIntegration** web part.
|
||||
3. Configure the webpart to update its properties.
|
||||
3. Configure the web part to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `LobIntegration` webpart can be configured with the following properties:
|
||||
The `LobIntegration` web part can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ This web part acts as a centralized place where admin can manage SPFx solutions
|
|||
|
||||
|
||||
**Note:**
|
||||
This webpart is mainly build for tenant and SharePoint admins, since most of the operation requires administrator privileges.
|
||||
This web part is mainly build for tenant and SharePoint admins, since most of the operation requires administrator privileges.
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue