Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Integrate the approval center into a model driven app/Dynamics 365 CE
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment