{
+ this.domElement.setAttribute("Id", `"${this._guid}"`);
+ this.domElement.setAttribute("class", `"${styles.sdk}"`);
+ const classColor = await this.getContext();
+ this.domElement.innerHTML = ``;
+
+ //
+ this._services = new service(this.context);
+ try {
+ const token: string = await this._services.getAccessToken();
+ const flowSDK = new this._msFlowSdk({
+ hostName: "https://flow.microsoft.com",
+ locale: this.context.pageContext.cultureInfo.currentCultureName
+ });
+ // Render Flow widget
+ let widget: any = flowSDK.renderWidget("flows", {
+ container: `"${this._guid}"`,
+ sdkVersion: "1.1",
+ enableOnBehalfOfTokens: true,
+ debugMode: false,
+ allowOptionalEvents: true,
+ flowsSettings: {
+ createFromBlankTemplateId: "05ed784f63df4ac7b8cbb465005d6068",
+ encodedFlowsFilter: "",
+ isMini: false,
+ enableBusinessProcessFlow: true
+ },
+ templatesSettings: {
+ defaultParams: "",
+ category: "PowerAppsButton",
+ destination: "new",
+ metadataSortProperty: "",
+ pageSize: 6,
+ searchTerm: "",
+ useServerSideProvisioning: false,
+ showGoBack: true,
+ enableWidgetCloseOnFlowSave: false,
+ showCreateFromBlank: false,
+ enableDietDesigner: false,
+ showHiddenTemplates: false,
+ allowCustomFlowName: false,
+ oneClickCategory: "",
+ dietCategory: ""
+ },
+ widgetStyleSettings: {
+ backgroundColor: "",
+ themeName: ""
+ }
+ });
+ // Register handler
+ widget.listen("GET_ACCESS_TOKEN", (requestParam, widgetDoneCallback) => {
+ widgetDoneCallback(null, { token: token });
+ });
+ // Register handler
+ widget.listen("WIDGET_READY", () => {
+ console.log("The flow widget is now ready.");
+ });
+ } catch (error) {
+ // error
+ this.domElement.innerHTML = `
+
+ `;
+ }
+ }
+
+ protected get dataVersion(): Version {
+ return Version.parse("1.0");
+ }
+
+ protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+ return {
+ pages: [
+ {
+ header: {
+ description: strings.PropertyPaneDescription
+ },
+ groups: [
+ {
+ groupName: strings.BasicGroupName,
+ groupFields: [
+ PropertyPaneTextField("title", {
+ label: strings.DescriptionFieldLabel
+ })
+ ]
+ }
+ ]
+ }
+ ]
+ };
+ }
+}
diff --git a/samples/js-myflows/src/webparts/myFlows/loc/en-us.js b/samples/js-myflows/src/webparts/myFlows/loc/en-us.js
new file mode 100644
index 000000000..84b54f053
--- /dev/null
+++ b/samples/js-myflows/src/webparts/myFlows/loc/en-us.js
@@ -0,0 +1,7 @@
+define([], function() {
+ return {
+ "PropertyPaneDescription": "Manage My Flows in SharePoint ",
+ "BasicGroupName": "Properties",
+ "DescriptionFieldLabel": "Title"
+ }
+});
diff --git a/samples/js-myflows/src/webparts/myFlows/loc/mystrings.d.ts b/samples/js-myflows/src/webparts/myFlows/loc/mystrings.d.ts
new file mode 100644
index 000000000..209e03af3
--- /dev/null
+++ b/samples/js-myflows/src/webparts/myFlows/loc/mystrings.d.ts
@@ -0,0 +1,10 @@
+declare interface IMyFlowsWebPartStrings {
+ PropertyPaneDescription: string;
+ BasicGroupName: string;
+ DescriptionFieldLabel: string;
+}
+
+declare module 'MyFlowsWebPartStrings' {
+ const strings: IMyFlowsWebPartStrings;
+ export = strings;
+}
diff --git a/samples/js-myflows/teams/69105900-a016-43cb-9e28-9a16bb92cb87_color.png b/samples/js-myflows/teams/69105900-a016-43cb-9e28-9a16bb92cb87_color.png
new file mode 100644
index 000000000..a8d279707
Binary files /dev/null and b/samples/js-myflows/teams/69105900-a016-43cb-9e28-9a16bb92cb87_color.png differ
diff --git a/samples/js-myflows/teams/69105900-a016-43cb-9e28-9a16bb92cb87_outline.png b/samples/js-myflows/teams/69105900-a016-43cb-9e28-9a16bb92cb87_outline.png
new file mode 100644
index 000000000..6df4a038d
Binary files /dev/null and b/samples/js-myflows/teams/69105900-a016-43cb-9e28-9a16bb92cb87_outline.png differ
diff --git a/samples/js-myflows/tsconfig.json b/samples/js-myflows/tsconfig.json
new file mode 100644
index 000000000..85a5981f0
--- /dev/null
+++ b/samples/js-myflows/tsconfig.json
@@ -0,0 +1,38 @@
+{
+ "extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/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": [
+ "es6-promise",
+ "webpack-env"
+ ],
+ "lib": [
+ "es5",
+ "dom",
+ "es2015.collection"
+ ]
+ },
+ "include": [
+ "src/**/*.ts"
+ ],
+ "exclude": [
+ "node_modules",
+ "lib"
+ ]
+}
diff --git a/samples/js-myflows/tslint.json b/samples/js-myflows/tslint.json
new file mode 100644
index 000000000..6bfc75a4c
--- /dev/null
+++ b/samples/js-myflows/tslint.json
@@ -0,0 +1,30 @@
+{
+ "extends": "@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
+ }
+}
\ No newline at end of file