melamriD365/FlowWidgetSPA.html

## FlowWidgetSPA.html
<html>

<head>
    <title>Flow JS SDK Sample</title>
    <style>
        .flowContainer iframe {
            border: none;
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="https://alcdn.msauth.net/browser/2.3.0/js/msal-browser.js"></script>
    <script src="https://flow.microsoft.com/Content/msflowsdk-1.1.js"></script>
</head>

<body onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;">
    <!--<button id="signOut" onclick="signOut()">SignOut</button>-->
    <div id="flowsDiv" class="flowContainer"></div>
    <script>
        const msalConfig = {
            auth: {
                clientId: "e7c3a75a-a8ef-4406-b235-eb794e0d2c1c",
                authority: "https://login.microsoftonline.com/4b63d104-ee12-4f0a-bb30-7a94a90f3103",
                redirectUri: "https://yourOrg.crm4.dynamics.com/WebResources/mea_/Pages/FlowWidgetSPA.html",
            },
            cache: {
                cacheLocation: "sessionStorage",
                storeAuthStateInCookie: true
            },
            flowScopes: ["https://service.flow.microsoft.com//Flows.Read.All", "https://service.flow.microsoft.com//Flows.Manage.All", "https://service.flow.microsoft.com//Approvals.Manage.All", "https://service.flow.microsoft.com//Approvals.Read.All"]
        };
        var flowAccessToken;
        var currentAccount;

        const msalInstance = new msal.PublicClientApplication(msalConfig);
        msalInstance.handleRedirectPromise().then(handleResponse).catch(err => {
            console.error(err);
        });

        function handleResponse(resp) {
            if (resp !== null) {
                username = resp.account.username;
                currentAccount = resp.account;
                acquireTokenPopupAndLoadFlowsWidget();
            } else {
                const currentAccounts = msalInstance.getAllAccounts();
                if (currentAccounts.length == 0) {
                    signIn();
                } else if (currentAccounts.length > 1) {
                    // Add choose account code here
                    console.warn("Multiple accounts detected.");
                } else if (currentAccounts.length === 1) {
                    username = currentAccounts[0].username;
                    console.log(currentAccounts[0]);
                    currentAccount = currentAccounts[0]
                    acquireTokenPopupAndLoadFlowsWidget();
                }
            }
        }

        function signIn() {
            var loginRequest = {
                scopes: msalConfig.flowScopes
            }
            msalInstance.loginPopup(loginRequest).then(handleResponse).catch(error => {
                console.error(error);
            });
        }

        function signOut() {
            msalInstance.logout();
        }

        function acquireTokenPopupAndLoadFlowsWidget() {
            const accessTokenRequest = {
                scopes: msalConfig.flowScopes,
                account: currentAccount
            }
            msalInstance.acquireTokenSilent(accessTokenRequest).then(function (accessToken) {
                flowAccessTokenAcquired(accessToken);
            }, function (error) {
                console.log(error);
                if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1 || error.indexOf("login_required") !== -1) {
                    msalInstance.acquireTokenPopup(msalConfig.flowScopes).then(function (accessToken) {
                        flowAccessTokenAcquired(accessToken);
                    }, function (error) {
                        console.log(error);
                    });
                }
            });
        }

        function flowAccessTokenAcquired(accessToken) {
            flowAccessToken = accessToken.accessToken;
            console.log(accessToken.accessToken);
            loadApprovalsWidget();
        }

        function loadApprovalsWidget(accessToken) {
            resetWidgetContainer();
            var sdk = new window.MsFlowSdk({ hostName: window.location.origin, locale: 'en-us', hostId: window.WellKnownHostIds.WIDGETTEST });
            var widget = sdk.renderWidget('approvalCenter', {
                container: 'flowsDiv',
                enableRegionalPortal: true,
                enableOnBehalfOfTokens: true,
                environmentId: '43391dad-6733-4eff-9765-027bedf0b244',
                approvalCenterSettings: {
                    autoNavigateToDetails: true,
                    hideFlowCreation: true,
                    hideInfoPaneCloseButton: true,
                    hideLink: true,
                    showSimpleEmptyPage: true
                }
            });
            widget.listen("GET_ACCESS_TOKEN", function (requestParam, widgetDoneCallback) {
                widgetDoneCallback(null, {
                    token: flowAccessToken
                });
            });
            widget.listen("WIDGET_READY", function () {
                console.log("The flow widget is now ready.");
            });
        }

        function resetWidgetContainer() {
            var container = document.getElementById("flowsDiv");
            while (container.firstChild) {
                container.removeChild(container.firstChild);
            }
        }
    </script>
</body>

</html>
	<html>

	<head>
	<title>Flow JS SDK Sample</title>
	<style>
	.flowContainer iframe {
	border: none;
	width: 100%;
	height: 100%;
	}
	</style>
	<script type="text/javascript" src="https://alcdn.msauth.net/browser/2.3.0/js/msal-browser.js"></script>
	<script src="https://flow.microsoft.com/Content/msflowsdk-1.1.js"></script>
	</head>

	<body onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;">
	<!--<button id="signOut" onclick="signOut()">SignOut</button>-->
	<div id="flowsDiv" class="flowContainer"></div>
	<script>
	const msalConfig = {
	auth: {
	clientId: "e7c3a75a-a8ef-4406-b235-eb794e0d2c1c",
	authority: "https://login.microsoftonline.com/4b63d104-ee12-4f0a-bb30-7a94a90f3103",
	redirectUri: "https://yourOrg.crm4.dynamics.com/WebResources/mea_/Pages/FlowWidgetSPA.html",
	},
	cache: {
	cacheLocation: "sessionStorage",
	storeAuthStateInCookie: true
	},
	flowScopes: ["https://service.flow.microsoft.com//Flows.Read.All", "https://service.flow.microsoft.com//Flows.Manage.All", "https://service.flow.microsoft.com//Approvals.Manage.All", "https://service.flow.microsoft.com//Approvals.Read.All"]
	};
	var flowAccessToken;
	var currentAccount;

	const msalInstance = new msal.PublicClientApplication(msalConfig);
	msalInstance.handleRedirectPromise().then(handleResponse).catch(err => {
	console.error(err);
	});

	function handleResponse(resp) {
	if (resp !== null) {
	username = resp.account.username;
	currentAccount = resp.account;
	acquireTokenPopupAndLoadFlowsWidget();
	} else {
	const currentAccounts = msalInstance.getAllAccounts();
	if (currentAccounts.length == 0) {
	signIn();
	} else if (currentAccounts.length > 1) {
	// Add choose account code here
	console.warn("Multiple accounts detected.");
	} else if (currentAccounts.length === 1) {
	username = currentAccounts[0].username;
	console.log(currentAccounts[0]);
	currentAccount = currentAccounts[0]
	acquireTokenPopupAndLoadFlowsWidget();
	}
	}
	}

	function signIn() {
	var loginRequest = {
	scopes: msalConfig.flowScopes
	}
	msalInstance.loginPopup(loginRequest).then(handleResponse).catch(error => {
	console.error(error);
	});
	}

	function signOut() {
	msalInstance.logout();
	}

	function acquireTokenPopupAndLoadFlowsWidget() {
	const accessTokenRequest = {
	scopes: msalConfig.flowScopes,
	account: currentAccount
	}
	msalInstance.acquireTokenSilent(accessTokenRequest).then(function (accessToken) {
	flowAccessTokenAcquired(accessToken);
	}, function (error) {
	console.log(error);
	if (error.indexOf("consent_required") !== -1 \|\| error.indexOf("interaction_required") !== -1 \|\| error.indexOf("login_required") !== -1) {
	msalInstance.acquireTokenPopup(msalConfig.flowScopes).then(function (accessToken) {
	flowAccessTokenAcquired(accessToken);
	}, function (error) {
	console.log(error);
	});
	}
	});
	}

	function flowAccessTokenAcquired(accessToken) {
	flowAccessToken = accessToken.accessToken;
	console.log(accessToken.accessToken);
	loadApprovalsWidget();
	}

	function loadApprovalsWidget(accessToken) {
	resetWidgetContainer();
	var sdk = new window.MsFlowSdk({ hostName: window.location.origin, locale: 'en-us', hostId: window.WellKnownHostIds.WIDGETTEST });
	var widget = sdk.renderWidget('approvalCenter', {
	container: 'flowsDiv',
	enableRegionalPortal: true,
	enableOnBehalfOfTokens: true,
	environmentId: '43391dad-6733-4eff-9765-027bedf0b244',
	approvalCenterSettings: {
	autoNavigateToDetails: true,
	hideFlowCreation: true,
	hideInfoPaneCloseButton: true,
	hideLink: true,
	showSimpleEmptyPage: true
	}
	});
	widget.listen("GET_ACCESS_TOKEN", function (requestParam, widgetDoneCallback) {
	widgetDoneCallback(null, {
	token: flowAccessToken
	});
	});
	widget.listen("WIDGET_READY", function () {
	console.log("The flow widget is now ready.");
	});
	}

	function resetWidgetContainer() {
	var container = document.getElementById("flowsDiv");
	while (container.firstChild) {
	container.removeChild(container.firstChild);
	}
	}
	</script>
	</body>

	</html>