Samples updated.

README.md

@@ -35,6 +35,7 @@ React-Cherry-Picked-Content | [Christophe Humbert](https://github.com/PathToShar
 
 Version|Date|Comments
 -------|----|--------
+0.3.0|March 9, 2022|4 samples added
 0.2.0|March 6, 2022|Refactoring
 0.1.0|February 21, 2022|Initial draft
 
@@ -61,8 +62,8 @@ This Web Part illustrates the following concepts:
 - Cascading dropdown and conditional display in the Property Pane
 - Use of SPHttpClient and the SharePoint REST API to query SharePoint content
 - React function component with useState and useEffect hooks
-- React Portal in combination with iframe
-- Various examples of client-side code in the samples: Microsoft Graph Toolkit (people, email, agenda), charts, widgets (map, stock, countdown, clock, video).
+- React Portal in combination with an iframe
+- Various examples of client-side code in the samples: Microsoft Graph (teams), Microsoft Graph Toolkit (people, email, agenda), charts (Chart.js, Chartist), widgets (map, stock, countdown, clock, video, game), SharePoint SOAP and REST APIs.
 
 ## References
 
@@ -72,4 +73,26 @@ This Web Part illustrates the following concepts:
 - [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
 - [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
 
+
+## Help
+
+We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for  community members to volunteer their time and help resolve issues.
+
+If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
+
+You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20react-ppw-html%22) to see if anybody else is having the same issues.
+
+You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-ppw-html) and see what the community is saying.
+
+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%2Csample%3A%20react-ppw-html&template=bug-report.yml&sample=react-ppw-html&authors=@PathToSharePoint&title=react-ppw-html%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%3Aquestion%2Csample%3A%20react-ppw-html&template=question.yml&sample=react-ppw-html&authors=@PathToSharePoint&title=react-ppw-html%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%3Aenhancement%2Csample%3A%20react-ppw-html&template=suggestion.yml&sample=react-ppw-html&authors=@PathToSharePoint&title=react-ppw-html%20-%20).
+
+
+## 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.**
+
 <img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-cherry-picked-content" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cherry-picked-content",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": true,
   "main": "lib/index.js",
   "scripts": {

samples/Isolated-MyTeams.html

@@ -0,0 +1,23 @@
+<div style="background-color: CadetBlue; padding: 20px;">
+<h3>My Teams - MS Graph Client</h3>
+<p>Isolated mode: &#9888; mandatory. This sample leverages the SPFx built-in Microsoft Graph client.</p>
+<script>
+	var logoURL = "https://static2.sharepointonline.com/files/fabric-cdn-prod_20200430.002/assets/brand-icons/product/svg/teams_48x1.svg";
+    var currentScript = document.currentScript;
+    props.context.msGraphClientFactory
+        .getClient()
+        .then((client) => {
+            client
+                .api("me/joinedTeams")
+                .version("v1.0")
+                .get((err, res) => {
+                    if (res) {
+                        let items = res.value.map(team => `<li><img src="${logoURL}" style="width:24px;"/> ${team.displayName}</li>`);
+                        const newDiv = document.createElement('div');
+                        newDiv.innerHTML = `<div>You are a member of ${items.length} teams:</div><ul style="list-style-type: none; columns: 3;">${items.join("")}</ul>`;
+                        currentScript.insertAdjacentElement('afterend', newDiv);
+                    }
+                });
+        });
+</script>
+</div>

samples/Isolated-SharePoint-REST-API.html

@@ -0,0 +1,16 @@
+<div style="background-color: CadetBlue; padding: 20px;">
+<h3>Site Lists - SharePoint REST API</h3>
+<p>Isolated mode: &#9888; mandatory. This sample uses the JavaScript fetch method to query the SharePoint REST API.</p>
+<script>
+    var currentScript = document.currentScript;
+	fetch(props.context.pageContext.web.absoluteUrl + "/_api/web/lists?$select=Title,ImageUrl", {headers: {'Accept': 'application/json'}})
+    .then(response => response.json())
+    .then(result => result.value)
+    .then(lists => lists.map(list => `<li><img src="${list.ImageUrl}"/> ${list.Title}</li>`))
+    .then(items => {
+        const newDiv = document.createElement('div');
+        newDiv.innerHTML = `<div>${items.length} lists found on this site:</div><ul style="list-style-type: none; columns: 2;">${items.join("")}</ul>`;
+        currentScript.insertAdjacentElement('afterend', newDiv);
+    });
+</script>
+</div>

samples/Isolated-pocketSOAP.html

@@ -0,0 +1,92 @@
+<div style="background-color: CadetBlue; padding: 20px;">
+<h3>Site Lists - pocketSOAP</h3>
+<p>Isolated mode: &#9888; mandatory. Just for fun, a minimal implementation of the deprecated SharePoint SOAP API. Do not use in production!</p>
+<script type="text/javascript">
+
+    /********************************************************************************
+    
+        pocketSOAP
+    	
+        Copyright (c) 2009-2022 Christophe Humbert
+    
+    ********************************************************************************/
+
+    pS = {};
+
+    pS.cleanSpaces = function (string) { return string.replace(/^\s+|\s+$/g, "").replace(/\s+/g, " "); };
+    pS.cleanBreaks = function (string) { return string.replace(/[\r\n\t]/g, ""); };
+    pS.trim = function (string) { return string.replace(/^\s+|\s+$/g, ""); };
+    pS.htmlUnescape = function (str) {
+        return String(str)
+            .replace(/&quot;/g, '"')
+            .replace(/&#39;/g, '\'')
+            .replace(/&lt;/g, '<')
+            .replace(/&gt;/g, '>')
+            .replace(/&amp;/g, '&');
+    };
+
+    pS.getWSProperties = function (site, service, operation) {
+        return fetch(site + "/" + '_vti_bin/' + service + '.asmx' + '?op=' + operation + '&_ts=' + new Date().getTime())
+            .then(result => result.text())
+            .then(text => {
+                var regexp = /Content-Type:([\s\S]*?)Content-Length:[\s\S]*?SOAPAction:\s*"(\S*?)"([\s\S]*?)\<\/pre\>/;
+                var results = regexp.exec(text);
+
+                let dv = document.createElement("div");
+
+                var spWS = {};
+
+                spWS.headers = {};
+                spWS.headers['Content-Type'] = pS.trim(results[1]).replace(/[\r\n]/g, "");
+                spWS.headers.SOAPAction = pS.trim(results[2]).replace(/[\r\n]/g, "");
+
+                spWS.soapEnvelope = results[3].replace(/&lt;xsd:schema&gt;[\s\S]+?&lt;\/xsd:schema&gt;/g, "");
+                spWS.soapEnvelope = spWS.soapEnvelope.replace(/&lt;([\S]+)&gt;[^;]+&lt;\/\1&gt;/g, '<$1/>');
+                spWS.soapEnvelope = pS.htmlUnescape(spWS.soapEnvelope);
+                // Trim and remove line breaks (\n,\r), tabs (\t), etc.
+                spWS.soapEnvelope = pS.trim(spWS.soapEnvelope).replace(/>\s+?</g, "><");
+
+                return spWS;
+            }); // end then
+    };
+
+    pS.soap = function (options) {
+        return pS.getWSProperties(options.site, options.service, options.operation)
+            .then(function (wsProperties) {
+                var wsURL = options.site + '/_vti_bin/' + options.service + '.asmx';
+
+                var wsData = wsProperties.soapEnvelope.replace(/<([\S]+?)\/>/g, function (m, key) {
+                    if (options[key]) { return ('<' + key + '>' + options[key] + '</' + key + '>') }
+                    else { return ""; }
+                });
+
+                options.method = 'POST'; // always POST for Web services
+                options.headers = wsProperties.headers;
+                options.body = wsData;
+
+                return fetch(wsURL, options);
+            }); // end then
+    }; // end pS.soap
+
+</script>
+
+<script type="text/javascript">
+    var currentScript = document.currentScript;
+    pS.soap({
+        // Service info
+        site: props.context.pageContext.web.absoluteUrl,
+        service: "Lists",
+        operation: "GetListCollection",
+        // Service parameters
+        viewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='ImageURL' /></ViewFields>"
+    })
+        .then(response => response.text())
+        .then(data => new DOMParser().parseFromString(data, "application/xml"))
+        .then(xml => {
+            const newDiv = document.createElement('div');
+            const items = [...xml.getElementsByTagName("List")].map(child => `<li><img src="${child.getAttribute("ImageUrl")}"/> ${child.getAttribute("Title")}</li>`);
+            newDiv.innerHTML = `<div>${items.length} lists found on this site:</div><ul style="list-style-type: none; columns: 2;">${items.join("")}</ul>`;
+            currentScript.insertAdjacentElement('afterend', newDiv);
+        });
+</script>
+</div>