v1.2.0 - Added mobile support

build.bat

@@ -2,6 +2,8 @@
 
 SET msbuild="C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Current\Bin\MSBuild.exe"
 
+CALL yarn --cwd .\control
+
 if exist ./solution/bin/Release/solution.zip (
     %msbuild% ./solution/solution.cdsproj /t:build /p:Configuration=Release
 ) else (

control/SecurityRoleManager/ControlManifest.Input.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <manifest>
     <control namespace="Cathal" constructor="SecurityRoleManager" display-name-key="SecurityRoleManager" description-key="SecurityRoleManager_description" control-type="standard" preview-image="preview.png"
-        version="1.1.0">
+        version="1.2.0">
 
         <property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type-group="any" usage="bound" required="true" />
 
@@ -40,7 +40,7 @@
 
         <resources>
             <code path="index.ts" order="1"/>
-            <resx path="strings/SecurityRoleManager.1033.resx" version="1.1.0" />
+            <resx path="strings/SecurityRoleManager.1033.resx" version="1.2.0" />
         </resources>
 
         <!-- UNCOMMENT TO ENABLE THE SPECIFIED API -->

control/SecurityRoleManager/components/app.tsx

@@ -1,24 +1,24 @@
 import * as React from 'react'
-import { Row } from './'
-import { ResourceStrings } from '../strings'
-import { SecurityRoleService } from '../services'
-import { SecurityRoleMap, getEntityReference } from '../utilities'
 import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner'
 import { Stack } from '@fluentui/react/lib/Stack'
 import { ScrollablePane } from '@fluentui/react/lib/ScrollablePane'
+import { Row } from './row'
+import { ResourceStrings } from '../strings'
+import { SecurityRoleService } from '../services'
+import { SecurityRoleMap } from '../utilities'
 
 export interface IAppProps {
     apiDataUrl: string
     resourceStrings: ResourceStrings
-    disabled: boolean
+    etn: string | null
+    id: string | null
 }
 
 export function App(props: IAppProps) {
-    const { apiDataUrl, resourceStrings, disabled } = props
+    const { apiDataUrl, resourceStrings, etn, id } = props
+
+    const securityRoleService = new SecurityRoleService(apiDataUrl, etn!, id!)
 
-    const { etn, id } = getEntityReference()
-    const securityRoleService = new SecurityRoleService(apiDataUrl, etn, id)
-
     const isSupportedEntity = (etn === 'systemuser' || etn === 'team')
     const isCreated = (!!id)
 
@@ -28,14 +28,20 @@ export function App(props: IAppProps) {
 
     // ComponentDidMount
     React.useEffect(() => {
-        if (isSupportedEntity && isCreated) {
-            securityRoleService.getRoleMap()
-                .then((response: SecurityRoleMap[]) => setRoleMap(response))
-                .finally(() => setLoaded(true))
-        } else {
-            setLoaded(true)
+        async function getData() {
+            if (isSupportedEntity && isCreated) {
+                try {
+                    const response = await securityRoleService.getRoleMap()
+                    setRoleMap(response)
+                } finally {
+                    setLoaded(true)
+                }
+            } else {
+                setLoaded(true)
+            }
         }
-    }, [])
+        getData()
+    }, [isCreated])
 
     const hrStyle: React.CSSProperties = {
         backgroundColor: '#eee',
@@ -87,7 +93,6 @@ export function App(props: IAppProps) {
                         {roleMap.map(securityRoleMap =>
                             <Row
                                 securityRoleService={securityRoleService}
-                                disabled={disabled}
                                 key={securityRoleMap.id}
                                 securityRoleMap={securityRoleMap} />)}
                     </Stack>

control/SecurityRoleManager/components/row.tsx

@@ -7,12 +7,12 @@ import { Stack, IStackProps } from '@fluentui/react/lib/Stack'
 export interface IRowProps {
     securityRoleMap: SecurityRoleMap
     securityRoleService: SecurityRoleService
-    disabled: boolean
 }
 
 export function Row(props: IRowProps) {
-    const { securityRoleService, disabled } = props
+    const { securityRoleService } = props
     const [securityRoleMap, setSecurityRoleMap] = React.useState(props.securityRoleMap)
+    const [processing, setProcessing] = React.useState(false)
 
     const stackProps: IStackProps = {
         horizontal: true,
@@ -25,20 +25,25 @@ export function Row(props: IRowProps) {
             if (typeof checked === 'undefined') return
 
             try {
+                setProcessing(true)
+
                 if (checked) {
                     await securityRoleService.associateSecurityRole(securityRoleMap.id)
                 } else {
                     await securityRoleService.disassociateSecurityRoles(securityRoleMap.id)
                 }
+
                 setSecurityRoleMap({ ...securityRoleMap, isAssigned: !securityRoleMap.isAssigned })
+
             } finally {
+                setProcessing(false)
             }
-        }
+        },
     }
 
     return (
         <Stack {...stackProps}>
-            <Checkbox {...checkboxProps} disabled={disabled} />
+            <Checkbox {...checkboxProps} disabled={processing} />
         </Stack>
     )
 }

control/SecurityRoleManager/index.ts

@@ -1,14 +1,18 @@
 import { IInputs, IOutputs } from './generated/ManifestTypes'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
-import { App, IAppProps } from './components'
+import { App, IAppProps } from './components/app'
 import { ResourceStrings } from './strings'
 
 export class SecurityRoleManager implements ComponentFramework.StandardControl<IInputs, IOutputs> {
 
     private container: HTMLDivElement
 
-    public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement) {
+    public init(context: ComponentFramework.Context<IInputs>, 
+                notifyOutputChanged: () => void, 
+                state: ComponentFramework.Dictionary, 
+                container: HTMLDivElement) {
+
         this.container = container
     }
 
@@ -22,7 +26,8 @@ export class SecurityRoleManager implements ComponentFramework.StandardControl<I
         const props: IAppProps = {
             apiDataUrl,
             resourceStrings,
-            disabled: context.mode.isControlDisabled,
+            etn: context.mode.contextInfo?.entityTypeName,
+            id: context.mode.contextInfo?.entityId,
         }
 
         ReactDOM.render(

control/SecurityRoleManager/utilities/index.ts

@@ -1,2 +1 @@
-export * from './querystring'
 export * from './mergeroles'

control/componentframework.extensions.d.ts

@@ -0,0 +1,9 @@
+declare namespace ComponentFramework {
+    interface Mode {
+        contextInfo: {
+            entityTypeName: string | null
+            entityId: string | null
+            entityRecordName: string | null
+        }
+    }
+}

control/featureconfig.json

@@ -0,0 +1,3 @@
+{
+    "pcfAllowCustomWebpack": "on"
+}

control/package.json

@@ -1,12 +1,12 @@
 {
   "name": "d365-pcf-securityrolemanager",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "D365 - PCF - Security Role Manager",
   "scripts": {
     "build": "pcf-scripts build",
     "clean": "pcf-scripts clean",
     "rebuild": "pcf-scripts rebuild",
-    "start": "pcf-scripts start"
+    "start": "pcf-scripts start watch"
   },
   "dependencies": {
     "@fluentui/react": "^8.9.4",

control/webpack.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    devtool: 'source-map'
+}

solution/src/Other/Solution.xml

@@ -8,7 +8,7 @@
       <LocalizedName description="Security Role Manager" languagecode="1033" />
     </LocalizedNames>
     <Descriptions />
-    <Version>1.1.0</Version>
+    <Version>1.2.0</Version>
     <!-- Solution Package Type: Unmanaged(0)/Managed(1)/Both(2)-->
     <Managed>2</Managed>
     <Publisher>