@elliemae/pui-app-sdk 5.40.3 → 5.40.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (436) hide show
  1. package/demo/{6879.3434f1e9.iframe.bundle.js → 1080.92f6b67a.iframe.bundle.js} +480 -480
  2. package/demo/1080.92f6b67a.iframe.bundle.js.br +0 -0
  3. package/demo/1080.92f6b67a.iframe.bundle.js.gz +0 -0
  4. package/demo/docs/{6879.3434f1e9.iframe.bundle.js → 1080.92f6b67a.iframe.bundle.js} +480 -480
  5. package/demo/docs/1080.92f6b67a.iframe.bundle.js.br +0 -0
  6. package/demo/docs/1080.92f6b67a.iframe.bundle.js.gz +0 -0
  7. package/demo/docs/iframe.html +1 -1
  8. package/demo/docs/index.html +1 -1
  9. package/demo/docs/{main.f4b9fb997236ae69d894.manager.bundle.js → main.cfd2e2085f77fe383f8d.manager.bundle.js} +1 -1
  10. package/demo/docs/{main.f4b9fb997236ae69d894.manager.bundle.js.br → main.cfd2e2085f77fe383f8d.manager.bundle.js.br} +0 -0
  11. package/demo/docs/{main.f4b9fb997236ae69d894.manager.bundle.js.gz → main.cfd2e2085f77fe383f8d.manager.bundle.js.gz} +0 -0
  12. package/demo/docs/main.f92b110f.iframe.bundle.js +5 -0
  13. package/demo/docs/main.f92b110f.iframe.bundle.js.br +0 -0
  14. package/demo/docs/main.f92b110f.iframe.bundle.js.gz +0 -0
  15. package/demo/docs/project.json +1 -1
  16. package/demo/iframe.html +1 -1
  17. package/demo/index.html +1 -1
  18. package/demo/{main.f4b9fb997236ae69d894.manager.bundle.js → main.cfd2e2085f77fe383f8d.manager.bundle.js} +1 -1
  19. package/demo/{main.f4b9fb997236ae69d894.manager.bundle.js.br → main.cfd2e2085f77fe383f8d.manager.bundle.js.br} +0 -0
  20. package/demo/{main.f4b9fb997236ae69d894.manager.bundle.js.gz → main.cfd2e2085f77fe383f8d.manager.bundle.js.gz} +0 -0
  21. package/demo/main.f92b110f.iframe.bundle.js +5 -0
  22. package/demo/main.f92b110f.iframe.bundle.js.br +0 -0
  23. package/demo/main.f92b110f.iframe.bundle.js.gz +0 -0
  24. package/demo/project.json +1 -1
  25. package/dist/cjs/utils/micro-frontend/guest-host-context.js +47 -0
  26. package/dist/cjs/utils/micro-frontend/guest.js +4 -3
  27. package/dist/cjs/utils/micro-frontend/host.js +4 -3
  28. package/dist/cjs/utils/micro-frontend/index.js +4 -1
  29. package/dist/cjs/utils/micro-frontend/module-so.js +5 -1
  30. package/dist/cjs/utils/micro-frontend/tests/guest-test-utils.js +27 -0
  31. package/dist/cjs/view/guest-microapp.js +30 -8
  32. package/dist/cjs/view/tests/__snapshots__/micro-iframe-app.test.tsx.snap +2 -2
  33. package/dist/esm/utils/micro-frontend/guest-host-context.js +27 -0
  34. package/dist/esm/utils/micro-frontend/guest.js +4 -3
  35. package/dist/esm/utils/micro-frontend/host.js +4 -3
  36. package/dist/esm/utils/micro-frontend/index.js +4 -1
  37. package/dist/esm/utils/micro-frontend/module-so.js +5 -1
  38. package/dist/esm/utils/micro-frontend/tests/guest-test-utils.js +7 -0
  39. package/dist/esm/view/guest-microapp.js +33 -8
  40. package/dist/esm/view/tests/__snapshots__/micro-iframe-app.test.tsx.snap +2 -2
  41. package/dist/types/lib/utils/micro-frontend/guest-host-context.d.ts +40 -0
  42. package/dist/types/lib/utils/micro-frontend/guest.d.ts +2 -1
  43. package/dist/types/lib/utils/micro-frontend/host.d.ts +2 -1
  44. package/dist/types/lib/utils/micro-frontend/module-so.d.ts +7 -5
  45. package/dist/types/lib/utils/micro-frontend/tests/guest-host-context.test.d.ts +1 -0
  46. package/dist/types/lib/utils/micro-frontend/tests/guest-test-utils.d.ts +2 -0
  47. package/dist/types/lib/view/guest-microapp.d.ts +12 -1
  48. package/dist/types/tsconfig.tsbuildinfo +1 -1
  49. package/package.json +6 -6
  50. package/build/docs/404.html +0 -16
  51. package/build/docs/api/classes/Analytics/index.html +0 -270
  52. package/build/docs/api/classes/CMicroAppGuest/index.html +0 -261
  53. package/build/docs/api/classes/CMicroAppHost/index.html +0 -346
  54. package/build/docs/api/classes/ErrorBoundary/index.html +0 -354
  55. package/build/docs/api/classes/GuestModule/index.html +0 -148
  56. package/build/docs/api/functions/AppRoot/index.html +0 -27
  57. package/build/docs/api/functions/Autocomplete/index.html +0 -22
  58. package/build/docs/api/functions/CheckBox/index.html +0 -22
  59. package/build/docs/api/functions/ComboBox/index.html +0 -27
  60. package/build/docs/api/functions/ComboBoxV3/index.html +0 -22
  61. package/build/docs/api/functions/ConnectForm/index.html +0 -22
  62. package/build/docs/api/functions/DateInput/index.html +0 -22
  63. package/build/docs/api/functions/DatePicker/index.html +0 -27
  64. package/build/docs/api/functions/DateRangePicker/index.html +0 -22
  65. package/build/docs/api/functions/DateTimePicker/index.html +0 -22
  66. package/build/docs/api/functions/Form/index.html +0 -34
  67. package/build/docs/api/functions/FormItemLayout/index.html +0 -22
  68. package/build/docs/api/functions/FormLayoutBlockItem/index.html +0 -22
  69. package/build/docs/api/functions/FormSubmitButton/index.html +0 -22
  70. package/build/docs/api/functions/InputMask/index.html +0 -22
  71. package/build/docs/api/functions/InputText/index.html +0 -22
  72. package/build/docs/api/functions/LargeTextBox/index.html +0 -22
  73. package/build/docs/api/functions/MaskedInputText/index.html +0 -22
  74. package/build/docs/api/functions/Page/index.html +0 -22
  75. package/build/docs/api/functions/Radio/index.html +0 -22
  76. package/build/docs/api/functions/RadioGroup/index.html +0 -22
  77. package/build/docs/api/functions/RegisterService/index.html +0 -27
  78. package/build/docs/api/functions/RenderWithStateAddOns/index.html +0 -22
  79. package/build/docs/api/functions/RequireAuth/index.html +0 -28
  80. package/build/docs/api/functions/SessionTimeout/index.html +0 -19
  81. package/build/docs/api/functions/TextBox/index.html +0 -27
  82. package/build/docs/api/functions/Toggle/index.html +0 -22
  83. package/build/docs/api/functions/authSaga/index.html +0 -19
  84. package/build/docs/api/functions/authorize/index.html +0 -44
  85. package/build/docs/api/functions/buildModuleParams/index.html +0 -31
  86. package/build/docs/api/functions/cleanup/index.html +0 -20
  87. package/build/docs/api/functions/configureStore/index.html +0 -56
  88. package/build/docs/api/functions/createGuestModule/index.html +0 -39
  89. package/build/docs/api/functions/createManager/index.html +0 -41
  90. package/build/docs/api/functions/enableReactAppForHostIntegration/index.html +0 -22
  91. package/build/docs/api/functions/fetchHostAppData/index.html +0 -24
  92. package/build/docs/api/functions/fetchUserSettings/index.html +0 -22
  93. package/build/docs/api/functions/getApiActionCreator/index.html +0 -30
  94. package/build/docs/api/functions/getAppConfig/index.html +0 -19
  95. package/build/docs/api/functions/getAppConfigValue/index.html +0 -35
  96. package/build/docs/api/functions/getAuthHTTPClient/index.html +0 -38
  97. package/build/docs/api/functions/getAuthorizationHeader/index.html +0 -23
  98. package/build/docs/api/functions/getHTTPClient/index.html +0 -36
  99. package/build/docs/api/functions/getHostAppDataByKey/index.html +0 -27
  100. package/build/docs/api/functions/getLogger/index.html +0 -19
  101. package/build/docs/api/functions/getMicroFrontEndAppConfig/index.html +0 -23
  102. package/build/docs/api/functions/getNavigationLinks/index.html +0 -19
  103. package/build/docs/api/functions/getRedirectUrl/index.html +0 -19
  104. package/build/docs/api/functions/getSelectField/index.html +0 -33
  105. package/build/docs/api/functions/getStore/index.html +0 -23
  106. package/build/docs/api/functions/initServiceWorker/index.html +0 -22
  107. package/build/docs/api/functions/isCIBuild/index.html +0 -19
  108. package/build/docs/api/functions/isProd/index.html +0 -19
  109. package/build/docs/api/functions/isUserAuthorized/index.html +0 -23
  110. package/build/docs/api/functions/listenStorageEvents/index.html +0 -19
  111. package/build/docs/api/functions/loadAppConfig/index.html +0 -30
  112. package/build/docs/api/functions/loadable/index.html +0 -37
  113. package/build/docs/api/functions/login/index.html +0 -62
  114. package/build/docs/api/functions/notifyGuestUnloadComplete/index.html +0 -26
  115. package/build/docs/api/functions/onAuthorizationFailure/index.html +0 -28
  116. package/build/docs/api/functions/onGuestUnloadStart/index.html +0 -19
  117. package/build/docs/api/functions/redactPii/index.html +0 -32
  118. package/build/docs/api/functions/removeDoubleSlash/index.html +0 -22
  119. package/build/docs/api/functions/removeStorageEvents/index.html +0 -19
  120. package/build/docs/api/functions/render/index.html +0 -392
  121. package/build/docs/api/functions/renderHook/index.html +0 -37
  122. package/build/docs/api/functions/renderWithHostData/index.html +0 -22
  123. package/build/docs/api/functions/renderWithRedux/index.html +0 -392
  124. package/build/docs/api/functions/renderWithRouter/index.html +0 -392
  125. package/build/docs/api/functions/renderWithRouterRedux/index.html +0 -392
  126. package/build/docs/api/functions/sdkBaseQuery/index.html +0 -37
  127. package/build/docs/api/functions/sendBAEvent/index.html +0 -34
  128. package/build/docs/api/functions/sendMessageToHost/index.html +0 -24
  129. package/build/docs/api/functions/setAppConfig/index.html +0 -27
  130. package/build/docs/api/functions/setAppConfigValue/index.html +0 -35
  131. package/build/docs/api/functions/setHostAppData/index.html +0 -25
  132. package/build/docs/api/functions/setLoginParams/index.html +0 -29
  133. package/build/docs/api/functions/subscribeToResetSession/index.html +0 -28
  134. package/build/docs/api/functions/subscribeToSessionExpiry/index.html +0 -28
  135. package/build/docs/api/functions/subscribeToSessionExpiryWarning/index.html +0 -28
  136. package/build/docs/api/functions/trackActivity/index.html +0 -31
  137. package/build/docs/api/functions/useAppDispatch/index.html +0 -24
  138. package/build/docs/api/functions/useAppMiddleware/index.html +0 -25
  139. package/build/docs/api/functions/useInjectQuery/index.html +0 -35
  140. package/build/docs/api/functions/useInjectReducer/index.html +0 -31
  141. package/build/docs/api/functions/useInjectSaga/index.html +0 -33
  142. package/build/docs/api/functions/useInjectSideEffect/index.html +0 -25
  143. package/build/docs/api/functions/useMediaQueryList/index.html +0 -26
  144. package/build/docs/api/functions/useStateSelector/index.html +0 -38
  145. package/build/docs/api/functions/useStateSelectorShallow/index.html +0 -39
  146. package/build/docs/api/functions/waitFor/index.html +0 -27
  147. package/build/docs/api/functions/waitForElementToBeRemoved/index.html +0 -27
  148. package/build/docs/api/functions/withAppDecorator/index.html +0 -26
  149. package/build/docs/api/index.html +0 -29
  150. package/build/docs/api/interfaces/AppConfig/index.html +0 -46
  151. package/build/docs/api/interfaces/GuestProps/index.html +0 -86
  152. package/build/docs/api/interfaces/UseStateSelectorOptions/index.html +0 -25
  153. package/build/docs/api/type-aliases/AppDispatch/index.html +0 -17
  154. package/build/docs/api/type-aliases/AppStore/index.html +0 -17
  155. package/build/docs/api/type-aliases/Await/index.html +0 -20
  156. package/build/docs/api/type-aliases/EMUI/index.html +0 -62
  157. package/build/docs/api/type-aliases/HostOptions/index.html +0 -28
  158. package/build/docs/api/type-aliases/HostProvidedParams/index.html +0 -33
  159. package/build/docs/api/type-aliases/ModuleOverrides/index.html +0 -47
  160. package/build/docs/api/type-aliases/OnHostInitCallback/index.html +0 -22
  161. package/build/docs/api/type-aliases/OnInitCallback/index.html +0 -22
  162. package/build/docs/api/type-aliases/OnMountCallback/index.html +0 -22
  163. package/build/docs/api/type-aliases/OnUnMountCallback/index.html +0 -22
  164. package/build/docs/api/type-aliases/RootState/index.html +0 -17
  165. package/build/docs/api/type-aliases/SelectStateFieldFunction/index.html +0 -29
  166. package/build/docs/api/variables/ErrorToast/index.html +0 -17
  167. package/build/docs/api/variables/FormPropsContext/index.html +0 -24
  168. package/build/docs/api/variables/GuestMicroApp/index.html +0 -20
  169. package/build/docs/api/variables/MASK_PIPES/index.html +0 -17
  170. package/build/docs/api/variables/MASK_TYPES/index.html +0 -17
  171. package/build/docs/api/variables/MicroApp/index.html +0 -21
  172. package/build/docs/api/variables/MicroIFrameApp/index.html +0 -21
  173. package/build/docs/api/variables/NavigationPrompt/index.html +0 -17
  174. package/build/docs/api/variables/NavigationPromptActions/index.html +0 -22
  175. package/build/docs/api/variables/Themes/index.html +0 -22
  176. package/build/docs/api/variables/VisuallyHidden/index.html +0 -17
  177. package/build/docs/api/variables/WaitMessage/index.html +0 -17
  178. package/build/docs/api/variables/act/index.html +0 -20
  179. package/build/docs/api/variables/ariaLive/index.html +0 -17
  180. package/build/docs/api/variables/auth/index.html +0 -40
  181. package/build/docs/api/variables/authReducer/index.html +0 -17
  182. package/build/docs/api/variables/clearSideEffects/index.html +0 -21
  183. package/build/docs/api/variables/createSideEffect/index.html +0 -19
  184. package/build/docs/api/variables/decorators/index.html +0 -222
  185. package/build/docs/api/variables/endSession/index.html +0 -37
  186. package/build/docs/api/variables/error/index.html +0 -17
  187. package/build/docs/api/variables/errorMiddleware/index.html +0 -17
  188. package/build/docs/api/variables/fireEvent/index.html +0 -17
  189. package/build/docs/api/variables/globalConstants/index.html +0 -22
  190. package/build/docs/api/variables/history/index.html +0 -17
  191. package/build/docs/api/variables/httpClientProps/index.html +0 -17
  192. package/build/docs/api/variables/logout/index.html +0 -22
  193. package/build/docs/api/variables/memoryHistory/index.html +0 -17
  194. package/build/docs/api/variables/removeSideEffect/index.html +0 -20
  195. package/build/docs/api/variables/resetUserIdleTime/index.html +0 -23
  196. package/build/docs/api/variables/screen/index.html +0 -17
  197. package/build/docs/api/variables/startSideEffect/index.html +0 -21
  198. package/build/docs/api/variables/updateBAEventParameters/index.html +0 -27
  199. package/build/docs/api/variables/useAppSelector/index.html +0 -21
  200. package/build/docs/api/variables/waitMessageAction/index.html +0 -43
  201. package/build/docs/api/variables/within/index.html +0 -17
  202. package/build/docs/assets/css/styles.0fad824b.css +0 -1
  203. package/build/docs/assets/js/04ee7372.a9b3e0ad.js +0 -1
  204. package/build/docs/assets/js/05fd5745.f77a9872.js +0 -1
  205. package/build/docs/assets/js/075aa584.dde55d25.js +0 -1
  206. package/build/docs/assets/js/0a1bd0e5.3336afb7.js +0 -1
  207. package/build/docs/assets/js/0f302db7.690bba2c.js +0 -1
  208. package/build/docs/assets/js/10c70e6f.3a611c9f.js +0 -1
  209. package/build/docs/assets/js/110b6cba.2039a4be.js +0 -1
  210. package/build/docs/assets/js/1126.2b1e83b8.js +0 -1
  211. package/build/docs/assets/js/1127.ce24a599.js +0 -1
  212. package/build/docs/assets/js/1154937a.58ab70e0.js +0 -1
  213. package/build/docs/assets/js/1298.f98e394e.js +0 -1
  214. package/build/docs/assets/js/14efea89.c724a605.js +0 -1
  215. package/build/docs/assets/js/15f40f8f.62fbc501.js +0 -1
  216. package/build/docs/assets/js/1617.443ab77e.js +0 -1
  217. package/build/docs/assets/js/16427680.5a41da14.js +0 -1
  218. package/build/docs/assets/js/16fba083.0c978e4b.js +0 -1
  219. package/build/docs/assets/js/1700.bb38b1b9.js +0 -1
  220. package/build/docs/assets/js/17896441.87af09c7.js +0 -1
  221. package/build/docs/assets/js/1a5ba401.bdd09a56.js +0 -1
  222. package/build/docs/assets/js/1ad86f56.5c4d3ed7.js +0 -1
  223. package/build/docs/assets/js/1cc7c915.18a50af2.js +0 -1
  224. package/build/docs/assets/js/1dfec420.e8ed9238.js +0 -1
  225. package/build/docs/assets/js/1fcf59a8.501bb96b.js +0 -1
  226. package/build/docs/assets/js/2026.f4b8efbd.js +0 -1
  227. package/build/docs/assets/js/213.07804718.js +0 -1
  228. package/build/docs/assets/js/2297.998393a9.js +0 -1
  229. package/build/docs/assets/js/22c6ac39.38c10213.js +0 -1
  230. package/build/docs/assets/js/242.98ba961c.js +0 -1
  231. package/build/docs/assets/js/247.f91b8960.js +0 -1
  232. package/build/docs/assets/js/24b1c163.4390b04b.js +0 -1
  233. package/build/docs/assets/js/25ae0bf1.3ff15c6f.js +0 -1
  234. package/build/docs/assets/js/2673.1111af38.js +0 -1
  235. package/build/docs/assets/js/27c4a013.bceaff37.js +0 -1
  236. package/build/docs/assets/js/27c8b774.1ec1881a.js +0 -1
  237. package/build/docs/assets/js/2805.21b4fb8d.js +0 -1
  238. package/build/docs/assets/js/2b2c5b3b.41587ade.js +0 -1
  239. package/build/docs/assets/js/3072782a.825cd627.js +0 -1
  240. package/build/docs/assets/js/3204d46b.7af2b3bd.js +0 -1
  241. package/build/docs/assets/js/322ec2e7.529db700.js +0 -1
  242. package/build/docs/assets/js/336f5910.34c060aa.js +0 -1
  243. package/build/docs/assets/js/3395.f8117aa5.js +0 -1
  244. package/build/docs/assets/js/3499.2c20c6ff.js +0 -1
  245. package/build/docs/assets/js/3552.2d0559a3.js +0 -1
  246. package/build/docs/assets/js/365a2c17.6afbd7ba.js +0 -1
  247. package/build/docs/assets/js/379bbc32.cfc06360.js +0 -1
  248. package/build/docs/assets/js/3992.aa5529d1.js +0 -2
  249. package/build/docs/assets/js/3992.aa5529d1.js.LICENSE.txt +0 -1
  250. package/build/docs/assets/js/3accd241.850fb650.js +0 -1
  251. package/build/docs/assets/js/3b0e1261.9caf419d.js +0 -1
  252. package/build/docs/assets/js/3b333d5b.831324f6.js +0 -1
  253. package/build/docs/assets/js/3cb0b0a9.99866080.js +0 -1
  254. package/build/docs/assets/js/3cd01694.04367956.js +0 -1
  255. package/build/docs/assets/js/4069.77c5dcc9.js +0 -1
  256. package/build/docs/assets/js/4134.d6069e6e.js +0 -1
  257. package/build/docs/assets/js/413bfdf1.2e754bf4.js +0 -1
  258. package/build/docs/assets/js/41f4ce7f.8662231d.js +0 -1
  259. package/build/docs/assets/js/4257.60660403.js +0 -1
  260. package/build/docs/assets/js/46eb403d.e5123d24.js +0 -1
  261. package/build/docs/assets/js/4772.988b91f1.js +0 -1
  262. package/build/docs/assets/js/4780.8d49dc64.js +0 -1
  263. package/build/docs/assets/js/47f7a134.2369c86a.js +0 -1
  264. package/build/docs/assets/js/4884.48d16d5b.js +0 -1
  265. package/build/docs/assets/js/4acce17e.b84485e3.js +0 -1
  266. package/build/docs/assets/js/4b10ac31.ffdbb394.js +0 -1
  267. package/build/docs/assets/js/4eef183e.99934dfe.js +0 -1
  268. package/build/docs/assets/js/50ae2c89.ea85453c.js +0 -1
  269. package/build/docs/assets/js/50b500dc.b1dafbf4.js +0 -1
  270. package/build/docs/assets/js/5113883b.19fc9d2f.js +0 -1
  271. package/build/docs/assets/js/5196.dda420ed.js +0 -1
  272. package/build/docs/assets/js/51cd08ce.eedf6a77.js +0 -1
  273. package/build/docs/assets/js/5248.5442863c.js +0 -1
  274. package/build/docs/assets/js/533e434c.6a22f28d.js +0 -1
  275. package/build/docs/assets/js/53defe29.b34f5bfe.js +0 -1
  276. package/build/docs/assets/js/5428.28b1d8b6.js +0 -1
  277. package/build/docs/assets/js/54dea6f0.7b5fa5e6.js +0 -1
  278. package/build/docs/assets/js/550f7dc1.a569914a.js +0 -1
  279. package/build/docs/assets/js/5575829c.04c44eb2.js +0 -1
  280. package/build/docs/assets/js/58e12487.6e6066d3.js +0 -1
  281. package/build/docs/assets/js/59169cbb.2d2d02ce.js +0 -1
  282. package/build/docs/assets/js/5964.fbd55ce8.js +0 -1
  283. package/build/docs/assets/js/5968.7a565a4e.js +0 -1
  284. package/build/docs/assets/js/5c5cf8ae.cf6912f5.js +0 -1
  285. package/build/docs/assets/js/5ca2639d.8b06c9ea.js +0 -1
  286. package/build/docs/assets/js/5da011d0.872006f0.js +0 -1
  287. package/build/docs/assets/js/5e13701d.8a6b7fd6.js +0 -1
  288. package/build/docs/assets/js/5e7ee35c.01ca7414.js +0 -1
  289. package/build/docs/assets/js/5e8c322a.0391dec4.js +0 -1
  290. package/build/docs/assets/js/5e95c892.f11d5bd6.js +0 -1
  291. package/build/docs/assets/js/5ebc190f.49776b06.js +0 -1
  292. package/build/docs/assets/js/5f21eb71.536ccef3.js +0 -1
  293. package/build/docs/assets/js/60781fed.87f57230.js +0 -1
  294. package/build/docs/assets/js/61b0e64b.c86eca9e.js +0 -1
  295. package/build/docs/assets/js/61f3b5cc.197d138c.js +0 -1
  296. package/build/docs/assets/js/62e1e335.d54d1d6e.js +0 -1
  297. package/build/docs/assets/js/6486.776625d1.js +0 -1
  298. package/build/docs/assets/js/6611.481d87ff.js +0 -2
  299. package/build/docs/assets/js/6611.481d87ff.js.LICENSE.txt +0 -9
  300. package/build/docs/assets/js/6aac2d5c.95d7104d.js +0 -1
  301. package/build/docs/assets/js/6b345055.f4f6c3b9.js +0 -1
  302. package/build/docs/assets/js/6b7fcc15.290796d9.js +0 -1
  303. package/build/docs/assets/js/6ca90961.8833c635.js +0 -1
  304. package/build/docs/assets/js/6d1f0509.55213557.js +0 -1
  305. package/build/docs/assets/js/6daa33e8.c1c74588.js +0 -1
  306. package/build/docs/assets/js/7080.73a89c35.js +0 -1
  307. package/build/docs/assets/js/7201.26026979.js +0 -1
  308. package/build/docs/assets/js/7344.12628cac.js +0 -1
  309. package/build/docs/assets/js/749b3cb7.660b1c4b.js +0 -1
  310. package/build/docs/assets/js/7516.78c3385c.js +0 -1
  311. package/build/docs/assets/js/7525.69d857f8.js +0 -1
  312. package/build/docs/assets/js/7540.ee4aa270.js +0 -1
  313. package/build/docs/assets/js/78fde597.9598cb2a.js +0 -1
  314. package/build/docs/assets/js/7985.6aac4971.js +0 -1
  315. package/build/docs/assets/js/7b224b5a.d21317ac.js +0 -1
  316. package/build/docs/assets/js/7c822e85.3cc0a954.js +0 -1
  317. package/build/docs/assets/js/7cde3459.802fae28.js +0 -1
  318. package/build/docs/assets/js/7d256524.087a46e5.js +0 -1
  319. package/build/docs/assets/js/7d48b3e7.5d6ce912.js +0 -1
  320. package/build/docs/assets/js/80392bdc.dbd30f9e.js +0 -1
  321. package/build/docs/assets/js/8049.5b4457b0.js +0 -1
  322. package/build/docs/assets/js/805daf1e.305437dc.js +0 -1
  323. package/build/docs/assets/js/8152.32ad98ca.js +0 -1
  324. package/build/docs/assets/js/821.19f6a696.js +0 -1
  325. package/build/docs/assets/js/822e0178.3c0d623a.js +0 -1
  326. package/build/docs/assets/js/82894961.81f97aaf.js +0 -1
  327. package/build/docs/assets/js/8290.f0834113.js +0 -1
  328. package/build/docs/assets/js/8355.bcde11e0.js +0 -1
  329. package/build/docs/assets/js/8389.b3f6164d.js +0 -1
  330. package/build/docs/assets/js/8585.e50595e8.js +0 -1
  331. package/build/docs/assets/js/85dc4c9b.d835c54a.js +0 -1
  332. package/build/docs/assets/js/8788.c86aea45.js +0 -1
  333. package/build/docs/assets/js/88a4c043.ca8fd05b.js +0 -1
  334. package/build/docs/assets/js/90579cbd.0835e6a5.js +0 -1
  335. package/build/docs/assets/js/90bbfd1d.d0fd53f0.js +0 -1
  336. package/build/docs/assets/js/9178.f2e05b02.js +0 -1
  337. package/build/docs/assets/js/9210.b5a9980e.js +0 -1
  338. package/build/docs/assets/js/9354.77e86f51.js +0 -1
  339. package/build/docs/assets/js/936.275fbed5.js +0 -1
  340. package/build/docs/assets/js/9550cc1f.e19e7779.js +0 -1
  341. package/build/docs/assets/js/9574.c7203040.js +0 -1
  342. package/build/docs/assets/js/97.d2ed6ba9.js +0 -1
  343. package/build/docs/assets/js/9852.cf8f89a9.js +0 -1
  344. package/build/docs/assets/js/9953.90bfd954.js +0 -1
  345. package/build/docs/assets/js/999f4a99.31e9f0f9.js +0 -1
  346. package/build/docs/assets/js/99a35e8f.3cb224e6.js +0 -1
  347. package/build/docs/assets/js/9ab62f73.a44012b0.js +0 -1
  348. package/build/docs/assets/js/9ea6fe4d.ebd612bc.js +0 -1
  349. package/build/docs/assets/js/a09470d9.16bfeef9.js +0 -1
  350. package/build/docs/assets/js/a0eb976e.f6504d94.js +0 -1
  351. package/build/docs/assets/js/a17fb045.0c651699.js +0 -1
  352. package/build/docs/assets/js/a2537f00.c241e3f2.js +0 -1
  353. package/build/docs/assets/js/a29a6e44.58d6b878.js +0 -1
  354. package/build/docs/assets/js/a3ecf861.0f55d8fd.js +0 -1
  355. package/build/docs/assets/js/a48fd09c.50989621.js +0 -1
  356. package/build/docs/assets/js/a6c41565.0821af7d.js +0 -1
  357. package/build/docs/assets/js/a6c5c03c.0e69962a.js +0 -1
  358. package/build/docs/assets/js/a769954d.02ea4cc3.js +0 -1
  359. package/build/docs/assets/js/a7861986.e4d90417.js +0 -1
  360. package/build/docs/assets/js/a7bd4aaa.3faf623f.js +0 -1
  361. package/build/docs/assets/js/a8687130.681fc6b9.js +0 -1
  362. package/build/docs/assets/js/a94703ab.9865def5.js +0 -1
  363. package/build/docs/assets/js/a9ba6591.bcdf3f9d.js +0 -1
  364. package/build/docs/assets/js/ab05b3aa.63cf7d9f.js +0 -1
  365. package/build/docs/assets/js/aba21aa0.4d968e31.js +0 -1
  366. package/build/docs/assets/js/ac9d64ec.dd98824b.js +0 -1
  367. package/build/docs/assets/js/aeb9810c.f3c24439.js +0 -1
  368. package/build/docs/assets/js/b0125fa2.c7fba4da.js +0 -1
  369. package/build/docs/assets/js/b0ccf0d8.89a4a7e2.js +0 -1
  370. package/build/docs/assets/js/b1474780.0982f737.js +0 -1
  371. package/build/docs/assets/js/b2a255cc.df3fdd56.js +0 -1
  372. package/build/docs/assets/js/b31a5f55.9a4737ac.js +0 -1
  373. package/build/docs/assets/js/b4285021.67b039a1.js +0 -1
  374. package/build/docs/assets/js/b784b5bb.7d7bb82c.js +0 -1
  375. package/build/docs/assets/js/b8c1226b.a92653b3.js +0 -1
  376. package/build/docs/assets/js/b93b454c.f87b4896.js +0 -1
  377. package/build/docs/assets/js/bc717899.36b37795.js +0 -1
  378. package/build/docs/assets/js/bf1a96cc.8abf8470.js +0 -1
  379. package/build/docs/assets/js/c10ec81d.0dff1cac.js +0 -1
  380. package/build/docs/assets/js/c254daed.d6764cd8.js +0 -1
  381. package/build/docs/assets/js/c377a04b.a6a0a334.js +0 -1
  382. package/build/docs/assets/js/c52b5473.1a1069c1.js +0 -1
  383. package/build/docs/assets/js/c5e9787b.448cc7d9.js +0 -1
  384. package/build/docs/assets/js/c7710052.d061cfdd.js +0 -1
  385. package/build/docs/assets/js/c8a9fc86.daf30d50.js +0 -1
  386. package/build/docs/assets/js/c90572d4.42231642.js +0 -1
  387. package/build/docs/assets/js/cfad4bb4.edde6aa3.js +0 -1
  388. package/build/docs/assets/js/d071c513.a096e87e.js +0 -1
  389. package/build/docs/assets/js/d0fd4a71.1d53f49d.js +0 -1
  390. package/build/docs/assets/js/d1d7a857.424e14dc.js +0 -1
  391. package/build/docs/assets/js/d38c25bf.1430a667.js +0 -1
  392. package/build/docs/assets/js/d3d37933.d7f15fe8.js +0 -1
  393. package/build/docs/assets/js/d71e6c8a.f4306e16.js +0 -1
  394. package/build/docs/assets/js/d9084ecb.61eb0649.js +0 -1
  395. package/build/docs/assets/js/de3ee31a.0992aa16.js +0 -1
  396. package/build/docs/assets/js/e0db4c79.6fcade57.js +0 -1
  397. package/build/docs/assets/js/e4ad89b2.9ca87caa.js +0 -1
  398. package/build/docs/assets/js/e876cff6.7c7560ed.js +0 -1
  399. package/build/docs/assets/js/e917d7c9.b54a542b.js +0 -1
  400. package/build/docs/assets/js/e9f568e8.b96fc01f.js +0 -1
  401. package/build/docs/assets/js/ea5986e4.ff0e5037.js +0 -1
  402. package/build/docs/assets/js/eb84a108.be29052f.js +0 -1
  403. package/build/docs/assets/js/ed6a4585.c5d8bf90.js +0 -1
  404. package/build/docs/assets/js/f4180cff.dae060fd.js +0 -1
  405. package/build/docs/assets/js/f7084923.91b0c545.js +0 -1
  406. package/build/docs/assets/js/f72a372a.4118877c.js +0 -1
  407. package/build/docs/assets/js/f72c86d0.d74270de.js +0 -1
  408. package/build/docs/assets/js/f8fa0321.c4c3a620.js +0 -1
  409. package/build/docs/assets/js/fc7c782f.bc0ad1ab.js +0 -1
  410. package/build/docs/assets/js/fce396bf.9f7f818c.js +0 -1
  411. package/build/docs/assets/js/fdb0d9e1.d2893206.js +0 -1
  412. package/build/docs/assets/js/fed4ae4f.e788c07f.js +0 -1
  413. package/build/docs/assets/js/fefe9566.113c5960.js +0 -1
  414. package/build/docs/assets/js/ff0bf96e.e457283e.js +0 -1
  415. package/build/docs/assets/js/ff6d65a9.39317a08.js +0 -1
  416. package/build/docs/assets/js/main.7d445fc8.js +0 -2
  417. package/build/docs/assets/js/main.7d445fc8.js.LICENSE.txt +0 -51
  418. package/build/docs/assets/js/runtime~main.5c8a1e20.js +0 -1
  419. package/build/docs/img/favicon.ico +0 -0
  420. package/build/docs/img/logo.jpeg +0 -0
  421. package/build/docs/img/logo.svg +0 -22
  422. package/build/docs/img/readme.md +0 -1
  423. package/build/docs/index.html +0 -102
  424. package/build/docs/readme.md +0 -1
  425. package/build/docs/sitemap.xml +0 -1
  426. package/build/docs/usage-guide/index.html +0 -580
  427. package/demo/6879.3434f1e9.iframe.bundle.js.br +0 -0
  428. package/demo/6879.3434f1e9.iframe.bundle.js.gz +0 -0
  429. package/demo/docs/6879.3434f1e9.iframe.bundle.js.br +0 -0
  430. package/demo/docs/6879.3434f1e9.iframe.bundle.js.gz +0 -0
  431. package/demo/docs/main.703b0e4c.iframe.bundle.js +0 -5
  432. package/demo/docs/main.703b0e4c.iframe.bundle.js.br +0 -0
  433. package/demo/docs/main.703b0e4c.iframe.bundle.js.gz +0 -0
  434. package/demo/main.703b0e4c.iframe.bundle.js +0 -5
  435. package/demo/main.703b0e4c.iframe.bundle.js.br +0 -0
  436. package/demo/main.703b0e4c.iframe.bundle.js.gz +0 -0
package/build/docs/usage-guide/index.html DELETED
@@ -1,580 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-usage-guide" data-has-hydrated="false">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="generator" content="Docusaurus v3.10.1">
6
- <title data-rh="true">Usage Guide | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/usage-guide"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Usage Guide | App SDK"><meta data-rh="true" name="description" content="This guide provides detailed examples and patterns for using the PUI App SDK in your applications. For initial setup, see the Getting Started Guide."><meta data-rh="true" property="og:description" content="This guide provides detailed examples and patterns for using the PUI App SDK in your applications. For initial setup, see the Getting Started Guide."><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/usage-guide"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/usage-guide" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/usage-guide" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Usage Guide","item":"https://pui.ice.com/app-sdk/usage-guide"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.0fad824b.css">
7
- <script src="/app-sdk/assets/js/runtime~main.5c8a1e20.js" defer="defer"></script>
8
- <script src="/app-sdk/assets/js/main.7d445fc8.js" defer="defer"></script>
9
- </head>
10
- <body>
11
- <svg style="display: none;"><defs>
12
- <symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
13
- </defs></svg>
14
- <script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||"light"),document.documentElement.setAttribute("data-theme-choice",t||"light")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_JAhZ" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/app-sdk/"><div class="navbar__logo"><img src="/app-sdk/img/logo.svg" alt="App SDK" class="themedComponent_SSxs themedComponent--light_SZPQ"><img src="/app-sdk/img/logo.svg" alt="App SDK" class="themedComponent_SSxs themedComponent--dark_komm"></div><b class="navbar__title text--truncate">App SDK</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/app-sdk/">Getting Started</a><a class="navbar__item navbar__link" href="/app-sdk/api">API</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://git.elliemae.io/platform-ui/pui-app-sdk.git" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_uxYp"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_h793 colorModeToggle_v_2a"><button class="clean-btn toggleButton_luUl toggleButtonDisabled_cKAk" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_DcpM lightToggleIcon_kcXC"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_DcpM darkToggleIcon_ZFgA"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_DcpM systemToggleIcon_v1mL"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_S02n"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_Zl5R"><div class="docsWrapper_ueFZ"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_ODdz" type="button"></button><div class="docRoot_hEeJ"><aside class="theme-doc-sidebar-container docSidebarContainer_iMMY"><div class="sidebarViewport_qKht"><div class="sidebar_pQSv"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_rgip"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_nibH menu__link menu__link--sublist" href="/app-sdk/api/"><span title="App SDK API" class="categoryLinkLabel_IX6H">App SDK API</span></a><button aria-label="Expand sidebar category &#x27;App SDK API&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/app-sdk/"><span title="Getting Started" class="linkLabel_Jzo_">Getting Started</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/app-sdk/usage-guide"><span title="Usage Guide" class="linkLabel_Jzo_">Usage Guide</span></a></li></ul></nav></div></div></aside><main class="docMainContainer_Ww0q"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_nUXI"><div class="docItemContainer_Lld7"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z125" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/app-sdk/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_keIu"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Usage Guide</span></li></ul></nav><div class="tocCollapsible_iI5M theme-doc-toc-mobile tocMobile_IiaZ"><button type="button" class="clean-btn tocCollapsibleButton_IsfN">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Usage Guide</h1></header>
15
- <p>This guide provides detailed examples and patterns for using the PUI App SDK in your applications. For initial setup, see the <a class="" href="/app-sdk/">Getting Started Guide</a>.</p>
16
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="table-of-contents">Table of Contents<a href="#table-of-contents" class="hash-link" aria-label="Direct link to Table of Contents" title="Direct link to Table of Contents" translate="no">​</a></h2>
17
- <ul>
18
- <li class=""><a href="#routing" class="">Routing</a></li>
19
- <li class=""><a href="#authentication" class="">Authentication</a></li>
20
- <li class=""><a href="#api-integration-with-rtk-query" class="">API Integration with RTK Query</a></li>
21
- <li class=""><a href="#http-client-legacy" class="">HTTP Client (Legacy)</a>
22
- <ul>
23
- <li class=""><a href="#gethttpclient" class="">getHTTPClient</a></li>
24
- <li class=""><a href="#onauthorizationfailure" class="">onAuthorizationFailure</a></li>
25
- <li class=""><a href="#httpclientprops" class="">httpClientProps</a></li>
26
- </ul>
27
- </li>
28
- <li class=""><a href="#redux-internals" class="">Redux Internals</a></li>
29
- <li class=""><a href="#state-management" class="">State Management</a></li>
30
- <li class=""><a href="#form-management" class="">Form Management</a></li>
31
- <li class=""><a href="#analytics" class="">Analytics</a>
32
- <ul>
33
- <li class=""><a href="#direct-analytics-exports" class="">Direct Analytics Exports</a></li>
34
- <li class=""><a href="#fetchusersettings" class="">fetchUserSettings</a></li>
35
- </ul>
36
- </li>
37
- <li class=""><a href="#micro-frontends" class="">Micro-Frontends</a>
38
- <ul>
39
- <li class=""><a href="#navigation--history-modes" class="">Navigation &amp; History Modes</a></li>
40
- <li class=""><a href="#micro-frontend-host-api" class="">Micro-Frontend Host API</a></li>
41
- <li class=""><a href="#guest-initiated-loading" class="">Guest-Initiated Loading</a></li>
42
- <li class=""><a href="#host-discovery-windowemuigethost" class="">Host Discovery (<code>window.emui.getHost</code>)</a></li>
43
- <li class=""><a href="#module-scripting-object" class="">Module Scripting Object</a></li>
44
- </ul>
45
- </li>
46
- <li class=""><a href="#scripting-objects" class="">Scripting Objects</a></li>
47
- <li class=""><a href="#wait-messages" class="">Wait Messages</a></li>
48
- <li class=""><a href="#navigation-prompts" class="">Navigation Prompts</a></li>
49
- <li class=""><a href="#error-handling" class="">Error Handling</a></li>
50
- <li class=""><a href="#aria-live-messages" class="">ARIA Live Messages</a></li>
51
- <li class=""><a href="#decorators" class="">Decorators</a></li>
52
- <li class=""><a href="#advanced-state-selectors" class="">Advanced State Selectors</a></li>
53
- <li class=""><a href="#responsive-design" class="">Responsive Design</a></li>
54
- <li class=""><a href="#environment--url-utilities" class="">Environment &amp; URL Utilities</a></li>
55
- <li class=""><a href="#security-utilities" class="">Security Utilities</a></li>
56
- <li class=""><a href="#listener-middleware" class="">Listener Middleware</a></li>
57
- <li class=""><a href="#session-management" class="">Session Management</a>
58
- <ul>
59
- <li class=""><a href="#session-ui-components" class="">Session UI Components</a></li>
60
- <li class=""><a href="#logrocket-integration" class="">LogRocket Integration</a></li>
61
- </ul>
62
- </li>
63
- <li class=""><a href="#app-configuration" class="">App Configuration</a></li>
64
- <li class=""><a href="#web-storage-events" class="">Web Storage Events</a></li>
65
- <li class=""><a href="#micro-frontend-communication" class="">Micro-Frontend Communication</a></li>
66
- <li class=""><a href="#authentication-utilities" class="">Authentication Utilities</a>
67
- <ul>
68
- <li class=""><a href="#auth-subpath-exports" class="">Auth Subpath Exports</a></li>
69
- </ul>
70
- </li>
71
- <li class=""><a href="#utility-hooks" class="">Utility Hooks</a></li>
72
- <li class=""><a href="#form-components" class="">Form Components</a></li>
73
- <li class=""><a href="#storybook-integration" class="">Storybook Integration</a></li>
74
- <li class=""><a href="#utility-components" class="">Utility Components</a></li>
75
- <li class=""><a href="#testing" class="">Testing</a>
76
- <ul>
77
- <li class=""><a href="#testing-library-re-exports" class="">Testing Library Re-exports</a></li>
78
- <li class=""><a href="#renderwithstateaddons" class="">RenderWithStateAddOns</a></li>
79
- </ul>
80
- </li>
81
- <li class=""><a href="#type-exports" class="">Type Exports</a></li>
82
- <li class=""><a href="#common-patterns" class="">Common Patterns</a></li>
83
- <li class=""><a href="#troubleshooting" class="">Troubleshooting</a></li>
84
- </ul>
85
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="routing">Routing<a href="#routing" class="hash-link" aria-label="Direct link to Routing" title="Direct link to Routing" translate="no">​</a></h2>
86
- <p>Set up routing with React Router and SDK components:</p>
87
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> Routes</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> Route </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;react-router-dom&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> RequireAuth</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> useInjectSaga</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> Page </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> Layout </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./view/layout&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> onSessionEvent </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./sideeffect/session&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> key </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;session&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">AppRoutes</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Inject session management saga</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">useInjectSaga</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> key</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> saga</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> onSessionEvent </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Routes</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Route path</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;/&quot;</span><span class="token plain"> element</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Layout </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Route</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> index</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> element</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Page pageTitle</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;Dashboard&quot;</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Dashboard </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">Page</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Route</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> path</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;details/:id&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> element</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Page pageTitle</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;Details&quot;</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">DetailsView </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">Page</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">Route</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">Routes</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
88
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="lazy-loading-components">Lazy Loading Components<a href="#lazy-loading-components" class="hash-link" aria-label="Direct link to Lazy Loading Components" title="Direct link to Lazy Loading Components" translate="no">​</a></h3>
89
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> loadable </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Create loadable component</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> LoanView </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">loadable</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">import</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;./index&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> fallback</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain">Loading</span><span class="token operator" style="color:#393A34">...</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Use in routes</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> LoanView </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./view/loan-view/loadable&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">AppRoutes</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Routes</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Route path</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;/loans&quot;</span><span class="token plain"> element</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">LoanView </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">Routes</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
90
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="authentication">Authentication<a href="#authentication" class="hash-link" aria-label="Direct link to Authentication" title="Direct link to Authentication" translate="no">​</a></h2>
91
- <p>Handle authentication and logout with Redux Saga:</p>
92
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> auth</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> globalConstants</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> getRedirectUrl</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> logout</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> error</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> call</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> put</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> takeLatest </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;redux-saga/effects&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token operator" style="color:#393A34">*</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">endSessionHandler</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> cred </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> sessionStorage</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getItem</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;Authorization&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">||</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">yield</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">call</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">endSession</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> token</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> cred </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Trigger logout</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">yield</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">put</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> auth</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">logout</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> clientId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> globalConstants</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">CLIENT_ID</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> redirectUri</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getRedirectUrl</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> responseType</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;code&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> scope</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;loc&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> code</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;1004&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">err</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">yield</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">put</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">error</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">set</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> messageText</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">err </span><span class="token keyword" style="color:#00009f">as</span><span class="token plain"> Error</span><span class="token punctuation" style="color:#393A34">)</span><span class="token operator" style="color:#393A34">?.</span><span class="token plain">message </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token operator" style="color:#393A34">*</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">onSessionEvent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">yield</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">takeLatest</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">logout</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">CONFIRM</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> endSessionHandler</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
93
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="api-integration-with-rtk-query">API Integration with RTK Query<a href="#api-integration-with-rtk-query" class="hash-link" aria-label="Direct link to API Integration with RTK Query" title="Direct link to API Integration with RTK Query" translate="no">​</a></h2>
94
- <p><strong>Recommended Approach</strong>: RTK Query is the preferred method for API integration, providing automatic caching, request deduplication, and simplified data fetching.</p>
95
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="setting-up-rtk-query-api">Setting Up RTK Query API<a href="#setting-up-rtk-query-api" class="hash-link" aria-label="Direct link to Setting Up RTK Query API" title="Direct link to Setting Up RTK Query API" translate="no">​</a></h3>
96
- <p>Create an API slice using RTK Query with the SDK&#x27;s <code>sdkBaseQuery</code>:</p>
97
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> createApi </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@reduxjs/toolkit/query/react&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> sdkBaseQuery </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Define API slice</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> resourcesApi </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">createApi</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> reducerPath</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;resourcesApi&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> baseQuery</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sdkBaseQuery</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> baseUrl</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;/v1&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> tagTypes</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">&#x27;Resources&#x27;</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">endpoints</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">builder</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> getResources</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> builder</span><span class="token punctuation" style="color:#393A34">.</span><span class="token generic-function function" style="color:#d73a49">query</span><span class="token generic-function generic class-name operator" style="color:#393A34">&lt;</span><span class="token generic-function generic class-name">ResourceRecord</span><span class="token generic-function generic class-name punctuation" style="color:#393A34">[</span><span class="token generic-function generic class-name punctuation" style="color:#393A34">]</span><span class="token generic-function generic class-name punctuation" style="color:#393A34">,</span><span class="token generic-function generic class-name"> </span><span class="token generic-function generic class-name keyword" style="color:#00009f">void</span><span class="token generic-function generic class-name operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">query</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> url</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;/resources&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> method</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;GET&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> providesTags</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">&#x27;Resources&#x27;</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> getResourceById</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> builder</span><span class="token punctuation" style="color:#393A34">.</span><span class="token generic-function function" style="color:#d73a49">query</span><span class="token generic-function generic class-name operator" style="color:#393A34">&lt;</span><span class="token generic-function generic class-name">ResourceRecord</span><span class="token generic-function generic class-name punctuation" style="color:#393A34">,</span><span class="token generic-function generic class-name"> </span><span class="token generic-function generic class-name builtin">string</span><span class="token generic-function generic class-name operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">query</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> url</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">/resources/</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">id</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> method</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;GET&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">providesTags</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">result</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> error</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> id</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Resources&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> id </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> createResource</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> builder</span><span class="token punctuation" style="color:#393A34">.</span><span class="token generic-function function" style="color:#d73a49">mutation</span><span class="token generic-function generic class-name operator" style="color:#393A34">&lt;</span><span class="token generic-function generic class-name">ResourceRecord</span><span class="token generic-function generic class-name punctuation" style="color:#393A34">,</span><span class="token generic-function generic class-name"> CreateResourceRequest</span><span class="token generic-function generic class-name operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">query</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">payload</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> url</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;/resources&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> method</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;POST&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> data</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> payload</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> invalidatesTags</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">&#x27;Resources&#x27;</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> updateResource</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> builder</span><span class="token punctuation" style="color:#393A34">.</span><span class="token generic-function function" style="color:#d73a49">mutation</span><span class="token generic-function generic class-name operator" style="color:#393A34">&lt;</span><span class="token generic-function generic class-name"></span><br></div><div class="token-line" style="color:#393A34"><span class="token generic-function generic class-name"> ResourceRecord</span><span class="token generic-function generic class-name punctuation" style="color:#393A34">,</span><span class="token generic-function generic class-name"></span><br></div><div class="token-line" style="color:#393A34"><span class="token generic-function generic class-name"> </span><span class="token generic-function generic class-name punctuation" style="color:#393A34">{</span><span class="token generic-function generic class-name"> id</span><span class="token generic-function generic class-name operator" style="color:#393A34">:</span><span class="token generic-function generic class-name"> </span><span class="token generic-function generic class-name builtin">string</span><span class="token generic-function generic class-name punctuation" style="color:#393A34">;</span><span class="token generic-function generic class-name"> data</span><span class="token generic-function generic class-name operator" style="color:#393A34">:</span><span class="token generic-function generic class-name"> UpdateResourceRequest </span><span class="token generic-function generic class-name punctuation" style="color:#393A34">}</span><span class="token generic-function generic class-name"></span><br></div><div class="token-line" style="color:#393A34"><span class="token generic-function generic class-name"> </span><span class="token generic-function generic class-name operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">query</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> id</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> data </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> url</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">/resources/</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">id</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> method</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;PUT&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> data</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">invalidatesTags</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">result</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> error</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> id </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Resources&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> id </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> deleteResource</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> builder</span><span class="token punctuation" style="color:#393A34">.</span><span class="token generic-function function" style="color:#d73a49">mutation</span><span class="token generic-function generic class-name operator" style="color:#393A34">&lt;</span><span class="token generic-function generic class-name keyword" style="color:#00009f">void</span><span class="token generic-function generic class-name punctuation" style="color:#393A34">,</span><span class="token generic-function generic class-name"> </span><span class="token generic-function generic class-name builtin">string</span><span class="token generic-function generic class-name operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">query</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> url</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">/resources/</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">id</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> method</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;DELETE&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> invalidatesTags</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">&#x27;Resources&#x27;</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> useGetResourcesQuery</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> useGetResourceByIdQuery</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> useCreateResourceMutation</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> useUpdateResourceMutation</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> useDeleteResourceMutation</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> resourcesApi</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
98
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="injecting-rtk-query-api">Injecting RTK Query API<a href="#injecting-rtk-query-api" class="hash-link" aria-label="Direct link to Injecting RTK Query API" title="Direct link to Injecting RTK Query API" translate="no">​</a></h3>
99
- <p>Use the SDK&#x27;s <code>useInjectQuery</code> hook to dynamically inject the API:</p>
100
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useInjectQuery </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> resourcesApi </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./api/resources&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">Layout</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Inject RTK Query API</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">useInjectQuery</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> api</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> resourcesApi </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Header </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Outlet </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
101
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="using-rtk-query-in-components">Using RTK Query in Components<a href="#using-rtk-query-in-components" class="hash-link" aria-label="Direct link to Using RTK Query in Components" title="Direct link to Using RTK Query in Components" translate="no">​</a></h3>
102
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> useGetResourcesQuery</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> useCreateResourceMutation</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> useUpdateResourceMutation</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./api/resources&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> waitMessageAction</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> useAppDispatch </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">ResourceList</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> dispatch </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useAppDispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Fetch resources with automatic caching and refetching</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> data</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> resources</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> isLoading</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> error</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> refetch </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useGetResourcesQuery</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Mutations</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">createResource</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> isLoading</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> isCreating </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">useCreateResourceMutation</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">updateResource</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> isLoading</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> isUpdating </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">useUpdateResourceMutation</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Show wait message while loading</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">useEffect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">isLoading </span><span class="token operator" style="color:#393A34">||</span><span class="token plain"> isCreating </span><span class="token operator" style="color:#393A34">||</span><span class="token plain"> isUpdating</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">dispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">waitMessageAction</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">open</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;Loading...&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">else</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">dispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">waitMessageAction</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">close</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">isLoading</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> isCreating</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> isUpdating</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> dispatch</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">handleCreate</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">createResource</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;New Resource&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> description</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Description&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">unwrap</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Success - data automatically refetched due to cache invalidation</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">err</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;Failed to create resource:&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> err</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">handleUpdate</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">updateResource</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> id</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> data</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Updated Name&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">unwrap</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">err</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;Failed to update resource:&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> err</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">error</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain">Error loading resources</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">isLoading</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain">Loading</span><span class="token operator" style="color:#393A34">...</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">button onClick</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">handleCreate</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain">Create Resource</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">button</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">resources</span><span class="token operator" style="color:#393A34">?.</span><span class="token function" style="color:#d73a49">map</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">resource</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div key</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">resource</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">h3</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">resource</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">name</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">h3</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">button onClick</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">handleUpdate</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">resource</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain">Update</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">button</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
103
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="advanced-rtk-query-features">Advanced RTK Query Features<a href="#advanced-rtk-query-features" class="hash-link" aria-label="Direct link to Advanced RTK Query Features" title="Direct link to Advanced RTK Query Features" translate="no">​</a></h3>
104
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="conditional-fetching">Conditional Fetching<a href="#conditional-fetching" class="hash-link" aria-label="Direct link to Conditional Fetching" title="Direct link to Conditional Fetching" translate="no">​</a></h4>
105
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">ResourceDetails</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> resourceId </span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> resourceId</span><span class="token operator" style="color:#393A34">?</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Skip query if no resourceId</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> data</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> isLoading </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useGetResourceByIdQuery</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">resourceId</span><span class="token operator" style="color:#393A34">!</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> skip</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">!</span><span class="token plain">resourceId</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">data</span><span class="token operator" style="color:#393A34">?.</span><span class="token plain">name</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
106
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="polling">Polling<a href="#polling" class="hash-link" aria-label="Direct link to Polling" title="Direct link to Polling" translate="no">​</a></h4>
107
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">ResourceList</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Poll every 30 seconds</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> data </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useGetResourcesQuery</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">undefined</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> pollingInterval</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">30000</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">/* render resources */</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
108
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="optimistic-updates">Optimistic Updates<a href="#optimistic-updates" class="hash-link" aria-label="Direct link to Optimistic Updates" title="Direct link to Optimistic Updates" translate="no">​</a></h4>
109
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">updateResource</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useUpdateResourceMutation</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">handleUpdate</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> newName</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">updateResource</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> id</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> data</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> newName </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">unwrap</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">err</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Update failed, cache automatically reverted</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
110
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="why-rtk-query">Why RTK Query?<a href="#why-rtk-query" class="hash-link" aria-label="Direct link to Why RTK Query?" title="Direct link to Why RTK Query?" translate="no">​</a></h3>
111
- <ul>
112
- <li class=""><strong>Automatic Caching</strong>: Reduces unnecessary network requests</li>
113
- <li class=""><strong>Request Deduplication</strong>: Multiple components can use the same query without duplicate requests</li>
114
- <li class=""><strong>Automatic Refetching</strong>: Data stays fresh with polling, refetch on focus, etc.</li>
115
- <li class=""><strong>Optimistic Updates</strong>: Update UI before server response</li>
116
- <li class=""><strong>Error Handling</strong>: Built-in error states</li>
117
- <li class=""><strong>Loading States</strong>: Automatic loading indicators</li>
118
- <li class=""><strong>TypeScript Support</strong>: Full type safety</li>
119
- <li class=""><strong>Less Boilerplate</strong>: No need for actions, reducers, or sagas for API calls</li>
120
- </ul>
121
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="http-client-legacy">HTTP Client (Legacy)<a href="#http-client-legacy" class="hash-link" aria-label="Direct link to HTTP Client (Legacy)" title="Direct link to HTTP Client (Legacy)" translate="no">​</a></h2>
122
- <blockquote>
123
- <p><strong>Note</strong>: For new projects, prefer <a href="#api-integration-with-rtk-query" class="">RTK Query</a> for API integration. Use the HTTP client directly only when you need fine-grained control or are working with existing code.</p>
124
- </blockquote>
125
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="getauthhttpclient">getAuthHTTPClient<a href="#getauthhttpclient" class="hash-link" aria-label="Direct link to getAuthHTTPClient" title="Direct link to getAuthHTTPClient" translate="no">​</a></h3>
126
- <p>Make authenticated API calls with automatic token management:</p>
127
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getAuthHTTPClient </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> logger </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./utils/logger&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> basePath </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;/v1/resources&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">getResources</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> data </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getAuthHTTPClient</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">get</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">basePath</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> data</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">err</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> logger</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> message</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Failed to get resources&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> exception</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> err </span><span class="token keyword" style="color:#00009f">as</span><span class="token plain"> Error</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">throw</span><span class="token plain"> err</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
128
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="gethttpclient">getHTTPClient<a href="#gethttpclient" class="hash-link" aria-label="Direct link to getHTTPClient" title="Direct link to getHTTPClient" translate="no">​</a></h3>
129
- <p>Create an HTTP client <strong>without</strong> automatic authorization headers. Useful for public endpoints or when you supply your own auth:</p>
130
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getHTTPClient </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> publicClient </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getHTTPClient</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> baseURL</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;https://public-api.example.com&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> headers</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token string-property property" style="color:#36acaa">&#x27;X-Api-Key&#x27;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;my-key&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> sendLogRocketSessionHeader</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> data </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> publicClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">get</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;/status&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
131
- <p>Options:</p>
132
- <table><thead><tr><th>Option</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>baseURL</code></td><td><code>string</code></td><td>App config <code>serviceEndpoints.api</code></td><td>Base URL for requests</td></tr><tr><td><code>headers</code></td><td><code>object</code></td><td><code>{}</code></td><td>Custom request headers</td></tr><tr><td><code>sendLogRocketSessionHeader</code></td><td><code>boolean</code></td><td><code>false</code></td><td>Attach <code>X-LogRocket-URL</code> header</td></tr></tbody></table>
133
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="onauthorizationfailure">onAuthorizationFailure<a href="#onauthorizationfailure" class="hash-link" aria-label="Direct link to onAuthorizationFailure" title="Direct link to onAuthorizationFailure" translate="no">​</a></h3>
134
- <p>Register a callback to handle 401 responses. The SDK will retry the failed request with the new authorization header you return:</p>
135
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> onAuthorizationFailure </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">onAuthorizationFailure</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">error</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> newToken </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">refreshAuthToken</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> sessionStorage</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">setItem</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;Authorization&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> newToken</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> newToken</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
136
- <p>If no handler is registered, a 401 response triggers <code>endSession</code> (redirect to login).</p>
137
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="httpclientprops">httpClientProps<a href="#httpclientprops" class="hash-link" aria-label="Direct link to httpClientProps" title="Direct link to httpClientProps" translate="no">​</a></h3>
138
- <p>Bind session management callbacks to the HTTP layer. <code>AppRoot</code> sets these automatically, but you can configure them manually when bootstrapping without <code>AppRoot</code>:</p>
139
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> httpClientProps</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> resetUserIdleTime</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> endSession</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">httpClientProps</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">resetUserIdleTime </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> resetUserIdleTime</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">httpClientProps</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">endSession </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> endSession</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
140
- <div class="language-text codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-text codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">## State Management</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">&gt; **Recommended**: For API-related state management, use [RTK Query](#api-integration-with-rtk-query) instead of manually creating actions, reducers, and sagas.</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">### Creating Actions and Reducers (Legacy Pattern)</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">For non-API state or when working with existing code, use Redux Toolkit with the SDK&#x27;s API action creator:</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">```typescript</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">import { createSlice, PayloadActionCreator } from &#x27;@reduxjs/toolkit&#x27;;</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">import { getApiActionCreator } from &#x27;@elliemae/pui-app-sdk&#x27;;</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">const resourcesActionCreator = getApiActionCreator(&#x27;resources&#x27;);</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">type GetResourceActions = {</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> get: PayloadActionCreator&lt;void, string&gt;;</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> getSuccess: PayloadActionCreator&lt;Array&lt;ResourceRecord&gt;, string&gt;;</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> getError: PayloadActionCreator&lt;void, string&gt;;</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">};</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">type CreateResourceActions = {</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> create: PayloadActionCreator&lt;void, string&gt;;</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> createSuccess: PayloadActionCreator&lt;CreateResourceResponse, string&gt;;</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> createError: PayloadActionCreator&lt;void, string&gt;;</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">};</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">export const resources = {</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> ...(resourcesActionCreator(&#x27;create&#x27;) as unknown as CreateResourceActions),</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> ...(resourcesActionCreator(&#x27;get&#x27;) as unknown as GetResourceActions),</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">};</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">const resourcesSlice = createSlice({</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> name: &#x27;resources&#x27;,</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> initialState: [] as Array&lt;ResourceRecord&gt;,</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> reducers: {</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> getSuccess: (state, { payload }: { payload: Array&lt;ResourceRecord&gt; }) =&gt; {</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> state.push(...payload);</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> },</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> },</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">});</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">export const { reducer } = resourcesSlice;</span><br></div></code></pre></div></div>
141
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="typed-selectors">Typed Selectors<a href="#typed-selectors" class="hash-link" aria-label="Direct link to Typed Selectors" title="Direct link to Typed Selectors" translate="no">​</a></h3>
142
- <p>Create typed selectors for better type safety:</p>
143
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> TypedUseSelectorHook</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> useSelector </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;react-redux&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> RootState </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> reducer </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./data/resources&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Create typed selector</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">type</span><span class="token plain"> </span><span class="token class-name">AppState</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> RootState </span><span class="token operator" style="color:#393A34">&amp;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> resources</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ReturnType</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token keyword" style="color:#00009f">typeof</span><span class="token plain"> reducer</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> useAppSelector</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> TypedUseSelectorHook</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">AppState</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> useSelector</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
144
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="using-state-in-components">Using State in Components<a href="#using-state-in-components" class="hash-link" aria-label="Direct link to Using State in Components" title="Direct link to Using State in Components" translate="no">​</a></h3>
145
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useAppDispatch</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> useAppSelector </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">ResourceList</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> resourcesData </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useAppSelector</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">state</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> state</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">resources</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> dispatch </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useAppDispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">useEffect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token operator" style="color:#393A34">!</span><span class="token plain">resourcesData</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">length</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">dispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">resources</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">get</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">dispatch</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> resourcesData</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">length</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">/* render resources */</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
146
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="layout-component-with-dynamic-injection">Layout Component with Dynamic Injection<a href="#layout-component-with-dynamic-injection" class="hash-link" aria-label="Direct link to Layout Component with Dynamic Injection" title="Direct link to Layout Component with Dynamic Injection" translate="no">​</a></h3>
147
- <p>Inject reducers and sagas at the layout level:</p>
148
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> Outlet </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;react-router-dom&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useInjectReducer</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> useInjectSaga </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> reducer </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./data/resources&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> resourceSagas </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./sideeffect/resources&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">Layout</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Inject reducer and saga at layout level</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">useInjectReducer</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> key</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;resources&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> reducer </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">useInjectSaga</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> key</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;resources&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> saga</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> resourceSagas </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Header </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Outlet </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
149
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="redux-saga-side-effects-legacy-pattern">Redux Saga Side Effects (Legacy Pattern)<a href="#redux-saga-side-effects-legacy-pattern" class="hash-link" aria-label="Direct link to Redux Saga Side Effects (Legacy Pattern)" title="Direct link to Redux Saga Side Effects (Legacy Pattern)" translate="no">​</a></h3>
150
- <blockquote>
151
- <p><strong>Note</strong>: RTK Query eliminates the need for sagas in most API use cases. Use sagas for complex async workflows, WebSocket connections, or custom side effects not related to API calls.</p>
152
- </blockquote>
153
- <p>Handle async operations with Redux Saga:</p>
154
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> all</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> fork </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;redux-saga/effects&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> logger </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./utils/logger&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> onGetAllResources </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./get&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> onCreateResource </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./create&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token operator" style="color:#393A34">*</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">resourceSagas</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">yield</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">all</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">[</span><span class="token function" style="color:#d73a49">fork</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">onCreateResource</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">fork</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">onGetAllResources</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">err</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> logger</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> message</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Saga initialization error&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> exception</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> err </span><span class="token keyword" style="color:#00009f">as</span><span class="token plain"> Error</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
155
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="redux-internals">Redux Internals<a href="#redux-internals" class="hash-link" aria-label="Direct link to Redux Internals" title="Direct link to Redux Internals" translate="no">​</a></h2>
156
- <p>These lower-level exports are pre-wired by the SDK. You only need them for advanced bootstrapping or when not using <code>AppRoot</code>.</p>
157
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="getstore">getStore<a href="#getstore" class="hash-link" aria-label="Direct link to getStore" title="Direct link to getStore" translate="no">​</a></h3>
158
- <p>Access the global Redux store outside of React components (e.g. in sagas, utilities, or test setup):</p>
159
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getStore </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> store </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getStore</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">store</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">dispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token function" style="color:#d73a49">someAction</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> state </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> store</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getState</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
160
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="authreducer--authsaga">authReducer &amp; authSaga<a href="#authreducer--authsaga" class="hash-link" aria-label="Direct link to authReducer &amp; authSaga" title="Direct link to authReducer &amp; authSaga" translate="no">​</a></h3>
161
- <p>The SDK includes a built-in auth reducer and saga that handle <code>auth.login()</code> / <code>auth.logout()</code> actions. They are automatically injected by <code>AppRoot</code>, but can be manually wired if needed:</p>
162
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> authReducer</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> authSaga </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Manual injection (only if not using AppRoot)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">useInjectReducer</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> key</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;auth&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> reducer</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> authReducer </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">useInjectSaga</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> key</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;auth&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> saga</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> authSaga </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
163
- <p>The auth saga listens for:</p>
164
- <ul>
165
- <li class=""><code>auth.login()</code> — calls <code>authorize()</code> and dispatches <code>LOGIN_SUCCESS</code></li>
166
- <li class=""><code>auth.logout()</code> — calls <code>endSession()</code> with the provided params</li>
167
- </ul>
168
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="errormiddleware">errorMiddleware<a href="#errormiddleware" class="hash-link" aria-label="Direct link to errorMiddleware" title="Direct link to errorMiddleware" translate="no">​</a></h3>
169
- <p>Redux middleware that automatically dispatches <code>error.set()</code> for any RTK Query rejected action:</p>
170
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> errorMiddleware </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Already included in configureStore() — no manual setup needed.</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Shown here for reference only.</span><br></div></code></pre></div></div>
171
- <p>When any RTK Query mutation or query is rejected with a value, the middleware extracts the error message and dispatches it to the global error toast.</p>
172
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="createmanager">createManager<a href="#createmanager" class="hash-link" aria-label="Direct link to createManager" title="Direct link to createManager" translate="no">​</a></h3>
173
- <p>Re-exported from <code>redux-injectors</code>. Create a standalone injector manager for manual reducer/saga injection outside React:</p>
174
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> createManager </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
175
- <blockquote>
176
- <p>In most cases, use <code>useInjectReducer</code> / <code>useInjectSaga</code> hooks inside components instead.</p>
177
- </blockquote>
178
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="form-management">Form Management<a href="#form-management" class="hash-link" aria-label="Direct link to Form Management" title="Direct link to Form Management" translate="no">​</a></h2>
179
- <p>Build forms with validation using React Hook Form integration:</p>
180
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> Form </span><span class="token keyword" style="color:#00009f">as</span><span class="token plain"> SDKForm</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> useAppDispatch </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useParams </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;react-router-dom&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> SubmitHandler </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;react-hook-form&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> resources </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./data/resources&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">interface</span><span class="token plain"> </span><span class="token class-name">FormData</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> firstName</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> lastName</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> email</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> country</span><span class="token operator" style="color:#393A34">?</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> value</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> label</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">MyForm</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> dispatch </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useAppDispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> id </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token generic-function function" style="color:#d73a49">useParams</span><span class="token generic-function generic class-name operator" style="color:#393A34">&lt;</span><span class="token generic-function generic class-name punctuation" style="color:#393A34">{</span><span class="token generic-function generic class-name"> id</span><span class="token generic-function generic class-name operator" style="color:#393A34">:</span><span class="token generic-function generic class-name"> </span><span class="token generic-function generic class-name builtin">string</span><span class="token generic-function generic class-name"> </span><span class="token generic-function generic class-name punctuation" style="color:#393A34">}</span><span class="token generic-function generic class-name operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> onSubmit</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> SubmitHandler</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">FormData</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">formData</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> country</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">...</span><span class="token plain">rest </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> formData</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">dispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> resources</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">save</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> id</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">...</span><span class="token plain">rest</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> country</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> country</span><span class="token operator" style="color:#393A34">?.</span><span class="token plain">value </span><span class="token operator" style="color:#393A34">||</span><span class="token plain"> country</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">SDKForm</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">FormData</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> onSubmit</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">onSubmit</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">FormFields </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">SubmitButton </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">SDKForm</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
181
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="analytics">Analytics<a href="#analytics" class="hash-link" aria-label="Direct link to Analytics" title="Direct link to Analytics" translate="no">​</a></h2>
182
- <p>Track user events and page views using scripting objects:</p>
183
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> CMicroApp </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> IAnalytics </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-scripting-object&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> logger </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./utils/logger&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">let</span><span class="token plain"> analyticsObj</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> IAnalytics </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">getAnalytics</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token operator" style="color:#393A34">!</span><span class="token plain">analyticsObj</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> app </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> CMicroApp</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getInstance</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> analyticsObj </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getObject</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;analytics&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">??</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">error</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> logger</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> message</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Error fetching analytics object&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> exception</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> error </span><span class="token keyword" style="color:#00009f">as</span><span class="token plain"> Error</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> analyticsObj</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">getAppDetails</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> appId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> window</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">emui</span><span class="token operator" style="color:#393A34">?.</span><span class="token plain">appId </span><span class="token operator" style="color:#393A34">||</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> appUrl</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> window</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">location</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">href</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
184
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="timing-events">Timing Events<a href="#timing-events" class="hash-link" aria-label="Direct link to Timing Events" title="Direct link to Timing Events" translate="no">​</a></h3>
185
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// Use in component</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">useEffect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> analytics </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getAnalytics</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">analytics</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> analytics</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">startTiming</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;PageLoad&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getAppDetails</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// ... perform operation</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> analytics</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">endTiming</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;PageLoad&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getAppDetails</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
186
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="business-analytics-events">Business Analytics Events<a href="#business-analytics-events" class="hash-link" aria-label="Direct link to Business Analytics Events" title="Direct link to Business Analytics Events" translate="no">​</a></h3>
187
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">useEffect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">recordId</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> analytics </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getAnalytics</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">analytics</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> analytics</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">sendBAEvent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> event</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;RecordViewed&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> recordId</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">recordId</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
188
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="direct-analytics-exports">Direct Analytics Exports<a href="#direct-analytics-exports" class="hash-link" aria-label="Direct link to Direct Analytics Exports" title="Direct link to Direct Analytics Exports" translate="no">​</a></h3>
189
- <p>The SDK also re-exports analytics utilities from <code>@elliemae/pui-analytics-so</code>:</p>
190
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> Analytics</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> updateBAEventParameters </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
191
- <ul>
192
- <li class=""><strong><code>Analytics</code></strong> — the analytics singleton from <code>pui-analytics-so</code>. Prefer using the scripting object approach (above) instead of importing <code>Analytics</code> directly.</li>
193
- <li class=""><strong><code>updateBAEventParameters</code></strong> — update the shared BA event parameters (e.g. <code>instanceId</code>, <code>userId</code>) that are merged into every <code>sendBAEvent</code> call. The SDK calls this automatically during <code>authorize()</code> and <code>endSession()</code>.</li>
194
- </ul>
195
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="sendbaevent-deprecated">sendBAEvent (deprecated)<a href="#sendbaevent-deprecated" class="hash-link" aria-label="Direct link to sendBAEvent (deprecated)" title="Direct link to sendBAEvent (deprecated)" translate="no">​</a></h4>
196
- <blockquote>
197
- <p><strong>Deprecated</strong>: Use <code>Analytics.sendBAEvent()</code> via the scripting object instead.</p>
198
- </blockquote>
199
- <p>Legacy helper to push BA events to the GTM data layer:</p>
200
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> sendBAEvent </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">sendBAEvent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> data</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> eventName</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;button_click&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> eventCategory</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;user_interaction&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> self</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// true = push to own dataLayer; false = send to host app</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
201
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="fetchusersettings">fetchUserSettings<a href="#fetchusersettings" class="hash-link" aria-label="Direct link to fetchUserSettings" title="Direct link to fetchUserSettings" translate="no">​</a></h3>
202
- <p>Retrieve user settings from the API. Called automatically during <code>authorize()</code>, but available for manual use:</p>
203
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> fetchUserSettings </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> settings </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">fetchUserSettings</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> userName</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;jdoe&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> isConsumerUser</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
204
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="micro-frontends">Micro-Frontends<a href="#micro-frontends" class="hash-link" aria-label="Direct link to Micro-Frontends" title="Direct link to Micro-Frontends" translate="no">​</a></h2>
205
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="hosting-micro-frontends">Hosting Micro-Frontends<a href="#hosting-micro-frontends" class="hash-link" aria-label="Direct link to Hosting Micro-Frontends" title="Direct link to Hosting Micro-Frontends" translate="no">​</a></h3>
206
- <p>Use <code>GuestMicroApp</code> to embed child applications:</p>
207
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> GuestMicroApp</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> history </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Simple guest micro-app component</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">PricingMicroApp</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">GuestMicroApp id</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;pricing&quot;</span><span class="token plain"> history</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">history</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">default</span><span class="token plain"> PricingMicroApp</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
208
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="micro-frontend-configuration">Micro-Frontend Configuration<a href="#micro-frontend-configuration" class="hash-link" aria-label="Direct link to Micro-Frontend Configuration" title="Direct link to Micro-Frontend Configuration" translate="no">​</a></h3>
209
- <p>Define micro-apps in your <code>app.config.json</code>:</p>
210
- <div class="language-json codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-json codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;microFrontendApps&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;pricing&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;name&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;Pricing&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;hostUrl&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;./pricing&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;development&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;files&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">&quot;index.js&quot;</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;production&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;files&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">&quot;index.js&quot;</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;services&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;name&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;Services&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;hostUrl&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;./services&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;mode&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;development&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;development&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;files&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">&quot;index.dev.js&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;index.css&quot;</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;production&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;files&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">&quot;index.js&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;index.css&quot;</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
211
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="navigation--history-modes">Navigation &amp; History Modes<a href="#navigation--history-modes" class="hash-link" aria-label="Direct link to Navigation &amp; History Modes" title="Direct link to Navigation &amp; History Modes" translate="no">​</a></h3>
212
- <p>The <code>GuestMicroApp</code> component supports two history modes that control how the guest app&#x27;s URL is managed. The mode is determined by the <code>useParentHistory</code> flag in the guest app&#x27;s <code>app.config.json</code>.</p>
213
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="useparenthistory-true-default--shared-history"><code>useParentHistory: true</code> (default) — Shared History<a href="#useparenthistory-true-default--shared-history" class="hash-link" aria-label="Direct link to useparenthistory-true-default--shared-history" title="Direct link to useparenthistory-true-default--shared-history" translate="no">​</a></h4>
214
- <p>The guest app shares the host&#x27;s browser history. Route changes in the guest are reflected in the host&#x27;s URL bar and vice versa.</p>
215
- <div class="language-text codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-text codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token plain">Host URL bar: https://host.example.com/auth-setup/loan/123</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> └─ basename ─┘└ guest route ┘</span><br></div></code></pre></div></div>
216
- <p><strong>Host app (parent):</strong></p>
217
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> GuestMicroApp</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> history </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">LoanApp</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">GuestMicroApp id</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;loanapp&quot;</span><span class="token plain"> history</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">history</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
218
- <p><strong>Guest app config</strong> (<code>app.config.json</code>):</p>
219
- <div class="language-json codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-json codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;useParentHistory&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
220
- <p><strong>When to use:</strong> The guest app is the primary content area and its routes should be bookmarkable / shareable via the host&#x27;s URL.</p>
221
- <hr>
222
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="useparenthistory-false--independent-history"><code>useParentHistory: false</code> — Independent History<a href="#useparenthistory-false--independent-history" class="hash-link" aria-label="Direct link to useparenthistory-false--independent-history" title="Direct link to useparenthistory-false--independent-history" translate="no">​</a></h4>
223
- <p>The guest app runs inside an iframe with its own browser history, independent of the host&#x27;s URL. The host&#x27;s URL bar does not change when the guest navigates internally.</p>
224
- <div class="language-text codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-text codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token plain">Host URL bar: https://host.example.com/auth-setup (stays fixed)</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">Iframe URL: https://guest.example.com/dashboard (managed independently)</span><br></div></code></pre></div></div>
225
- <p><strong>Guest app config</strong> (<code>app.config.json</code>):</p>
226
- <div class="language-json codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-json codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;useParentHistory&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
227
- <p><strong>When to use:</strong> The guest app should manage its own navigation without affecting the host&#x27;s URL — e.g., an embedded tool, modal-like workflow, or self-contained feature.</p>
228
- <hr>
229
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="setting-an-initial-route-from-the-host">Setting an Initial Route from the Host<a href="#setting-an-initial-route-from-the-host" class="hash-link" aria-label="Direct link to Setting an Initial Route from the Host" title="Direct link to Setting an Initial Route from the Host" translate="no">​</a></h4>
230
- <p>The <code>initialRoute</code> prop lets the host app control which route the guest app lands on. This works with both history modes.</p>
231
- <p><strong>Scenario 1: Shared history with initial route</strong></p>
232
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// Host navigates guest to /auth-setup/loan/123 on load</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">LoanApp</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">GuestMicroApp</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> id</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;loanapp&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> history</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">history</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> initialRoute</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;/auth-setup/loan/123&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
233
- <p>The guest app receives the parent&#x27;s history, and the host&#x27;s URL is set to the initial route.</p>
234
- <p><strong>Scenario 2: Independent history with initial route</strong></p>
235
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// Host tells the guest to start at /app/dashboard</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">MyApp</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">GuestMicroApp id</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;myapp&quot;</span><span class="token plain"> history</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">history</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> initialRoute</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;/app/dashboard&quot;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
236
- <p>The SDK defers the route push to the <code>mount()</code> phase (after the iframe is stable but before React renders), so the guest&#x27;s React Router sees the correct URL on its first render — no flash of the default landing page.</p>
237
- <blockquote>
238
- <p><strong>Note:</strong> The <code>initialRoute</code> value should be the full path including the guest app&#x27;s basename (e.g., <code>/app/dashboard</code>, not just <code>/dashboard</code>). The SDK pushes this path to the browser history directly, and React Router matches it against its configured <code>basename</code>.</p>
239
- </blockquote>
240
- <hr>
241
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="quick-reference">Quick Reference<a href="#quick-reference" class="hash-link" aria-label="Direct link to Quick Reference" title="Direct link to Quick Reference" translate="no">​</a></h4>
242
- <table><thead><tr><th>Scenario</th><th><code>useParentHistory</code></th><th><code>initialRoute</code></th><th>Behavior</th></tr></thead><tbody><tr><td>Guest shares host URL</td><td><code>true</code> (default)</td><td><em>omitted</em></td><td>Guest routes reflected in host URL bar</td></tr><tr><td>Guest shares host URL, starts at specific page</td><td><code>true</code></td><td><code>&quot;/app/details/42&quot;</code></td><td>Host URL set to initial route on load</td></tr><tr><td>Guest has own URL space</td><td><code>false</code></td><td><em>omitted</em></td><td>Guest loads at its default route, host URL unchanged</td></tr><tr><td>Guest has own URL space, starts at specific page</td><td><code>false</code></td><td><code>&quot;/app/dashboard&quot;</code></td><td>Guest starts at <code>/dashboard</code>, host URL unchanged</td></tr></tbody></table>
243
- <hr>
244
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="guest-app-appconfigjson-example">Guest App <code>app.config.json</code> Example<a href="#guest-app-appconfigjson-example" class="hash-link" aria-label="Direct link to guest-app-appconfigjson-example" title="Direct link to guest-app-appconfigjson-example" translate="no">​</a></h4>
245
- <div class="language-json codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-json codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;appId&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;myapp&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;useParentHistory&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;activeEnv&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;dev&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;microFrontendApps&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
246
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="micro-frontend-host-api">Micro-Frontend Host API<a href="#micro-frontend-host-api" class="hash-link" aria-label="Direct link to Micro-Frontend Host API" title="Direct link to Micro-Frontend Host API" translate="no">​</a></h3>
247
- <p>The SDK also provides host-side APIs for apps that manage guest micro-apps.</p>
248
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="selfinitialize-is-required">selfInitialize is Required<a href="#selfinitialize-is-required" class="hash-link" aria-label="Direct link to selfInitialize is Required" title="Direct link to selfInitialize is Required" translate="no">​</a></h4>
249
- <p>Both <code>CMicroApp</code> and <code>CMicroAppHost</code> now require <code>selfInitialize: true</code> in their constructor params. Calling <code>getInstance()</code> without this flag logs a deprecation warning at runtime:</p>
250
- <div class="language-text codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-text codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token plain">CMicroApp.getInstance() called without selfInitialize: true — this legacy mode</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">is deprecated. Pass { selfInitialize: true } and use initialize() instead.</span><br></div></code></pre></div></div>
251
- <p>The legacy mode (where the constructor auto-chains <code>loadAppConfig → getAppBridge → onInit</code>) is still functional but will be removed in a future major release. Migrate by adding the flag and calling <code>initialize()</code> explicitly:</p>
252
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// Before (deprecated — triggers warning)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> app </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> CMicroApp</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getInstance</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> logger</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> onInit </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// After</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> app </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> CMicroApp</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getInstance</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> logger</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> selfInitialize</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> onInit </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">initialize</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
253
- <p>This applies to both hosts and guests. The explicit <code>initialize()</code> call gives you control over when config loading and host discovery happen, making the startup sequence predictable and easier to debug.</p>
254
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="cmicroapphost-deprecated">CMicroAppHost (Deprecated)<a href="#cmicroapphost-deprecated" class="hash-link" aria-label="Direct link to CMicroAppHost (Deprecated)" title="Direct link to CMicroAppHost (Deprecated)" translate="no">​</a></h4>
255
- <blockquote>
256
- <p><strong>Deprecated</strong> — Use <code>CMicroApp</code> with <code>selfInitialize: true</code> instead. <code>CMicroApp</code> now supports both guest and host use cases. <code>CMicroAppHost</code> will be removed in a future major release.</p>
257
- </blockquote>
258
- <p><code>CMicroAppHost</code> is still available for backward compatibility but new apps should use <code>CMicroApp</code>:</p>
259
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// Deprecated</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> CMicroAppHost </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> host </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> CMicroAppHost</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getInstance</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> logger</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> onInit </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Use instead</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> CMicroApp </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> app </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> CMicroApp</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getInstance</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> logger</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> selfInitialize</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> onInit </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">initialize</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
260
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="enablereactappforhostintegration">enableReactAppForHostIntegration<a href="#enablereactappforhostintegration" class="hash-link" aria-label="Direct link to enableReactAppForHostIntegration" title="Direct link to enableReactAppForHostIntegration" translate="no">​</a></h4>
261
- <p>Shorthand to create a <code>CMicroApp</code> (guest) instance for host-integration scenarios — useful when the host wants to render the guest inline:</p>
262
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> enableReactAppForHostIntegration </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> app </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">enableReactAppForHostIntegration</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> onInit</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> onMount </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
263
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="getmicrofrontendappconfig">getMicroFrontEndAppConfig<a href="#getmicrofrontendappconfig" class="hash-link" aria-label="Direct link to getMicroFrontEndAppConfig" title="Direct link to getMicroFrontEndAppConfig" translate="no">​</a></h4>
264
- <p>Read a micro-app&#x27;s resolved configuration from <code>app.config.json</code>. Returns the merged development/production config with absolute URLs:</p>
265
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getMicroFrontEndAppConfig </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> config </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getMicroFrontEndAppConfig</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;pricing&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// config.hostUrl, config.files, config.name, etc.</span><br></div></code></pre></div></div>
266
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="getnavigationlinks">getNavigationLinks<a href="#getnavigationlinks" class="hash-link" aria-label="Direct link to getNavigationLinks" title="Direct link to getNavigationLinks" translate="no">​</a></h4>
267
- <p>Build navigation links from all micro-apps defined in <code>app.config.json</code>:</p>
268
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getNavigationLinks </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> links </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getNavigationLinks</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// [{ id: &#x27;pricing&#x27;, name: &#x27;Pricing&#x27;, path: &#x27;/pricing&#x27; }, ...]</span><br></div></code></pre></div></div>
269
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="getlogger">getLogger<a href="#getlogger" class="hash-link" aria-label="Direct link to getLogger" title="Direct link to getLogger" translate="no">​</a></h4>
270
- <p>Returns the logger from whichever micro-app context is active (host or guest):</p>
271
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getLogger </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> logger </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getLogger</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">logger</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">info</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;Application ready&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
272
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="deprecated-components">Deprecated Components<a href="#deprecated-components" class="hash-link" aria-label="Direct link to Deprecated Components" title="Direct link to Deprecated Components" translate="no">​</a></h4>
273
- <p><code>MicroApp</code> and <code>MicroIFrameApp</code> are deprecated. Use <code>GuestMicroApp</code> instead:</p>
274
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// Deprecated — will be removed in a future release</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> MicroApp</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> MicroIFrameApp </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Use instead</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> GuestMicroApp </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
275
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="guest-initiated-loading">Guest-Initiated Loading<a href="#guest-initiated-loading" class="hash-link" aria-label="Direct link to Guest-Initiated Loading" title="Direct link to Guest-Initiated Loading" translate="no">​</a></h3>
276
- <p>By default, App Bridge drives the guest lifecycle: it calls <code>init()</code>, then <code>mount()</code>. With <strong>guest-initiated loading</strong>, the guest drives its own lifecycle by calling <code>initialize()</code> — the bridge only handles iframe creation and script injection.</p>
277
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="enabling-self-initialize-in-appconfigjson">Enabling Self-Initialize in app.config.json<a href="#enabling-self-initialize-in-appconfigjson" class="hash-link" aria-label="Direct link to Enabling Self-Initialize in app.config.json" title="Direct link to Enabling Self-Initialize in app.config.json" translate="no">​</a></h4>
278
- <p>Add <code>&quot;selfInitialize&quot;: true</code> to the guest entry in the <strong>host&#x27;s</strong> <code>app.config.json</code>. The <code>GuestMicroApp</code> component reads this flag automatically and passes it to App Bridge — no changes to JSX are needed.</p>
279
- <div class="language-json codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-json codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;microFrontendApps&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;loanapp&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;name&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;Loan&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;hostUrl&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;https://encompass.d1.ice.com/loan&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;selfInitialize&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;production&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;files&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">&quot;runtime~app.js&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;vendors.js&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;emui.js&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;app.js&quot;</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
280
- <p>The <code>&lt;GuestMicroApp&gt;</code> component works exactly the same — no prop changes required:</p>
281
- <div class="language-tsx codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-tsx codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">GuestMicroApp</span><span class="token imports"> </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">GuestMicroApp</span><span class="token tag" style="color:#00009f"></span><br></div><div class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">id</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag attr-value" style="color:#e3116c">loanapp</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag" style="color:#00009f"></span><br></div><div class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">history</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f">browserHistory</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"></span><br></div><div class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">homeRoute</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag attr-value" style="color:#e3116c">/home</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag" style="color:#00009f"></span><br></div><div class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">onLoadComplete</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript punctuation" style="color:#393A34">(</span><span class="token tag script language-javascript" style="color:#00009f">instanceId</span><span class="token tag script language-javascript punctuation" style="color:#393A34">)</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript arrow operator" style="color:#393A34">=&gt;</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript console class-name" style="color:#00009f">console</span><span class="token tag script language-javascript punctuation" style="color:#393A34">.</span><span class="token tag script language-javascript method function property-access" style="color:#d73a49">log</span><span class="token tag script language-javascript punctuation" style="color:#393A34">(</span><span class="token tag script language-javascript string" style="color:#e3116c">&#x27;loaded&#x27;</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#00009f"> instanceId</span><span class="token tag script language-javascript punctuation" style="color:#393A34">)</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"></span><br></div><div class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"></span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
282
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="setting-up-a-self-initializing-guest">Setting Up a Self-Initializing Guest<a href="#setting-up-a-self-initializing-guest" class="hash-link" aria-label="Direct link to Setting Up a Self-Initializing Guest" title="Direct link to Setting Up a Self-Initializing Guest" translate="no">​</a></h4>
283
- <p>In the guest app, pass <code>selfInitialize: true</code> when creating the <code>CMicroApp</code> instance:</p>
284
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> CMicroApp </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> app </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> CMicroApp</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getInstance</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> logger</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> onInit</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> onMount</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> onUnmount</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> selfInitialize</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
285
- <p>Then call <code>initialize()</code> in your app&#x27;s entry point:</p>
286
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> params </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">initialize</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// params contains moduleId, hostUrl, homeRoute, theme, history, etc.</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// At this point onInit has been called and the app is ready to render.</span><br></div></code></pre></div></div>
287
- <p><code>initialize()</code> discovers the host automatically and calls your <code>onInit</code> callback. If the host registered a module scripting object, <code>initialize()</code> fetches its parameters (home route, theme, history) and applies them. If no module SO is registered, <code>initialize()</code> logs a warning and proceeds — the guest can still render using its own <code>app.config.json</code> values.</p>
288
- <div class="theme-admonition theme-admonition-tip admonition_fsSc alert alert--success"><div class="admonitionHeading_aDnC"><span class="admonitionIcon_drq_"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_aNFp"><p>Use guest-initiated loading when the guest app needs to control its own startup sequence — for example, when it must load configuration or authenticate before rendering.</p></div></div>
289
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="standalone-mode">Standalone Mode<a href="#standalone-mode" class="hash-link" aria-label="Direct link to Standalone Mode" title="Direct link to Standalone Mode" translate="no">​</a></h4>
290
- <p>When the guest runs outside an iframe (e.g. during local development), <code>initialize()</code> detects standalone mode and skips host discovery. It loads <code>app.config.json</code> and calls <code>onInit</code> so the app can render normally.</p>
291
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="host-discovery-windowemuigethost">Host Discovery (<code>window.emui.getHost</code>)<a href="#host-discovery-windowemuigethost" class="hash-link" aria-label="Direct link to host-discovery-windowemuigethost" title="Direct link to host-discovery-windowemuigethost" translate="no">​</a></h3>
292
- <p>After the SDK discovers the host — whether via App Bridge (<code>window.emui.__host</code>) or SSF connect — it exposes a convenience accessor on <code>window.emui</code>:</p>
293
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> host </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> window</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">emui</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getHost</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
294
- <p>This works in both the <strong>self-initialize</strong> path (<code>initialize()</code>) and the <strong>host-initiated</strong> path (<code>init()</code>). The function returns the discovered host reference, or <code>null</code> if no host has been found yet.</p>
295
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="sdk-based-guests">SDK-based guests<a href="#sdk-based-guests" class="hash-link" aria-label="Direct link to SDK-based guests" title="Direct link to SDK-based guests" translate="no">​</a></h4>
296
- <p>For guests that use <code>CMicroApp</code>, prefer the instance method — it returns the same reference:</p>
297
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> app </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> CMicroApp</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getInstance</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> host </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getHost</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
298
- <p><code>window.emui.getHost()</code> is most useful for plain JS module guests (CDN scripts) that don&#x27;t import the SDK:</p>
299
- <div class="language-javascript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-javascript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> host </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token dom variable" style="color:#36acaa">window</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">emui</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getHost</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> moduleSO </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> host</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getObject</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;module&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> params </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> moduleSO</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getParameters</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
300
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="availability">Availability<a href="#availability" class="hash-link" aria-label="Direct link to Availability" title="Direct link to Availability" translate="no">​</a></h4>
301
- <table><thead><tr><th>Scenario</th><th>When <code>getHost()</code> is set</th></tr></thead><tbody><tr><td>App Bridge iframe guests</td><td>Immediately when the iframe is created (set by the bridge), then replaced by the SDK after <code>init()</code> or <code>initialize()</code> completes</td></tr><tr><td>Self-initializing guests</td><td>After <code>initialize()</code> discovers the host</td></tr><tr><td>Host-initiated guests</td><td>After <code>init()</code> completes</td></tr><tr><td>Standalone mode (local dev)</td><td>Not set — returns <code>undefined</code></td></tr></tbody></table>
302
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="module-scripting-object">Module Scripting Object<a href="#module-scripting-object" class="hash-link" aria-label="Direct link to Module Scripting Object" title="Direct link to Module Scripting Object" translate="no">​</a></h3>
303
- <p>The SDK provides helpers to create a <strong>module</strong> scripting object for guests that need host-provided parameters. This is optional — a self-initializing guest can work without it if it doesn&#x27;t need parameters from the host.</p>
304
- <p>Use a module SO when:</p>
305
- <ul>
306
- <li class=""><strong>Shared single-page routing</strong> — the host passes its <code>history</code> object so route changes in the guest update the host&#x27;s URL bar and vice versa (deep-linking, back/forward navigation across micro-apps)</li>
307
- <li class=""><strong>Consistent theming</strong> — the host passes its styled-components <code>theme</code> so the guest renders with the same design tokens</li>
308
- <li class=""><strong>Initial route</strong> — the host tells the guest which page to open on launch (e.g. <code>/loans/123</code>) without the guest flashing its default landing page first</li>
309
- <li class=""><strong>Custom capabilities</strong> — the host can expose additional parameters (permissions, tenant context, feature flags) that the guest reads at startup</li>
310
- </ul>
311
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="createguestmodule">createGuestModule<a href="#createguestmodule" class="hash-link" aria-label="Direct link to createGuestModule" title="Direct link to createGuestModule" translate="no">​</a></h4>
312
- <p>Create a module scripting object for a guest app. It reads <code>hostUrl</code>, <code>manifestPath</code>, and <code>homeRoute</code> from <code>app.config.json</code> and merges them with host-provided values (theme, history, initialRoute).</p>
313
- <p>Always register scripting objects through <code>CMicroApp</code> rather than directly on the app bridge — this ensures the object is added to both the App Bridge and the SSF Host:</p>
314
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> CMicroApp</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> createGuestModule </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Host app — must use selfInitialize: true</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> app </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> CMicroApp</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getInstance</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> selfInitialize</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> logger</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> onInit </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">initialize</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> moduleSO </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">createGuestModule</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;loanapp&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> theme</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> myTheme</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> history</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> appHistory</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">addScriptingObject</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">moduleSO</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> guestId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;loanapp&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
315
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="buildmoduleparams">buildModuleParams<a href="#buildmoduleparams" class="hash-link" aria-label="Direct link to buildModuleParams" title="Direct link to buildModuleParams" translate="no">​</a></h4>
316
- <p>If you need to build the parameters object without creating a scripting object (e.g. for testing or custom SO implementations):</p>
317
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> buildModuleParams </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> params </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">buildModuleParams</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;loanapp&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> theme</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> myTheme</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> history</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> appHistory</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> initialRoute</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;/loans/123&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// { moduleId: &#x27;loanapp&#x27;, hostUrl: &#x27;...&#x27;, homeRoute: &#x27;/&#x27;, theme: ..., history: ..., ... }</span><br></div></code></pre></div></div>
318
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="guestmodule-class">GuestModule Class<a href="#guestmodule-class" class="hash-link" aria-label="Direct link to GuestModule Class" title="Direct link to GuestModule Class" translate="no">​</a></h4>
319
- <p>For advanced use cases where you need to subclass or override methods beyond what <code>createGuestModule</code> overrides support:</p>
320
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> CMicroApp</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> GuestModule </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">class</span><span class="token plain"> </span><span class="token class-name">CustomModule</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">extends</span><span class="token plain"> </span><span class="token class-name">GuestModule</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getCapabilities</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> supportsCustomEvents</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> app </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> CMicroApp</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getInstance</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> selfInitialize</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> logger</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> onInit </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">initialize</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> mod </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">CustomModule</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;loanapp&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> theme</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> myTheme </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">addScriptingObject</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">mod</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> guestId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;loanapp&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
321
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="automatic-manifest-warm-up">Automatic Manifest Warm-Up<a href="#automatic-manifest-warm-up" class="hash-link" aria-label="Direct link to Automatic Manifest Warm-Up" title="Direct link to Automatic Manifest Warm-Up" translate="no">​</a></h3>
322
- <p>When <code>getAppBridge()</code> is called for the first time, the SDK automatically calls <code>warmUp()</code> for every micro-app listed in <code>microFrontendApps</code>. This pre-fetches their manifests in the background so that subsequent <code>openApp()</code> calls start faster.</p>
323
- <p>No code changes are needed — this happens automatically when your app initializes the bridge.</p>
324
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="scripting-objects">Scripting Objects<a href="#scripting-objects" class="hash-link" aria-label="Direct link to Scripting Objects" title="Direct link to Scripting Objects" translate="no">​</a></h2>
325
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="adding-scripting-objects">Adding Scripting Objects<a href="#adding-scripting-objects" class="hash-link" aria-label="Direct link to Adding Scripting Objects" title="Direct link to Adding Scripting Objects" translate="no">​</a></h3>
326
- <p>Access and share scripting objects between parent and child micro-apps:</p>
327
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> CMicroApp </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> ScriptingObjectTypes </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-scripting-object&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">addObject</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> app</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> CMicroApp</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> objectName</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">keyof</span><span class="token plain"> ScriptingObjectTypes</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> so </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getObject</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">objectName</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">so</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">addScriptingObject</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">so</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">error</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Handle error</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Get scripting objects from parent and expose to child</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">addScriptingObjects</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> app </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> CMicroApp</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getInstance</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token builtin">Promise</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">all</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">addObject</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">app</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;analytics&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">addObject</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">app</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;application&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">addObject</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">app</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;auth&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">addObject</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">app</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;http&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">addObject</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">app</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;loan&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Call during app initialization</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> onInit</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">OnInitCallback</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> history</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> homeRoute </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// ... other initialization</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">addScriptingObjects</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">catch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Handle error</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
328
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="using-scripting-objects-in-components">Using Scripting Objects in Components<a href="#using-scripting-objects-in-components" class="hash-link" aria-label="Direct link to Using Scripting Objects in Components" title="Direct link to Using Scripting Objects in Components" translate="no">​</a></h3>
329
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> CMicroApp </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useFormContext </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;react-hook-form&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">listenToLoanSyncEvent</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">setValue</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> app </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> CMicroApp</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getInstance</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> loan </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getObject</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;loan&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">loan</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> subscriptionId </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">subscribe</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> eventId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;loan.sync&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">callback</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> eventParams </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> firstname</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> lastname </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> eventParams</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">setValue</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;firstname&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> firstname</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">setValue</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;lastname&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> lastname</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Unsubscribe after handling</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">unsubscribe</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> eventId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;loan.sync&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> token</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> subscriptionId</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">FormComponent</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> setValue </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useFormContext</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">useEffect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">listenToLoanSyncEvent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">setValue</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">catch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Handle error</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">setValue</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">/* form fields */</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
330
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="wait-messages">Wait Messages<a href="#wait-messages" class="hash-link" aria-label="Direct link to Wait Messages" title="Direct link to Wait Messages" translate="no">​</a></h2>
331
- <p>Display loading indicators with customizable wait messages:</p>
332
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="using-waitmessage-component">Using WaitMessage Component<a href="#using-waitmessage-component" class="hash-link" aria-label="Direct link to Using WaitMessage Component" title="Direct link to Using WaitMessage Component" translate="no">​</a></h3>
333
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> waitMessageAction</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> useAppDispatch </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Show/hide wait message from anywhere in your app</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">MyComponent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> dispatch </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useAppDispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">handleLoadData</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Show wait message</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">dispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">waitMessageAction</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">open</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;Loading data...&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">fetchData</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">finally</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Hide wait message</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">dispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">waitMessageAction</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">close</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">button onClick</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">handleLoadData</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain">Load Data</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">button</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
334
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="wait-message-props">Wait Message Props<a href="#wait-message-props" class="hash-link" aria-label="Direct link to Wait Message Props" title="Direct link to Wait Message Props" translate="no">​</a></h3>
335
- <ul>
336
- <li class=""><code>size</code>: <code>&#x27;xs&#x27; | &#x27;sm&#x27; | &#x27;md&#x27; | &#x27;lg&#x27; | &#x27;xl&#x27;</code> - Size of the spinner</li>
337
- <li class=""><code>color</code>: <code>&#x27;light&#x27; | &#x27;dark&#x27;</code> - Color theme</li>
338
- <li class=""><code>showText</code>: <code>boolean</code> - Show loading text</li>
339
- <li class=""><code>withTooltip</code>: <code>boolean</code> - Show as tooltip</li>
340
- <li class=""><code>tooltipStartPlacementPreference</code>: Tooltip placement</li>
341
- </ul>
342
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="navigation-prompts">Navigation Prompts<a href="#navigation-prompts" class="hash-link" aria-label="Direct link to Navigation Prompts" title="Direct link to Navigation Prompts" translate="no">​</a></h2>
343
- <p>Prompt users before navigating away from unsaved changes:</p>
344
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> NavigationPrompt</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> NavigationPromptActions</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> useAppDispatch</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">FormPage</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">hasUnsavedChanges</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> setHasUnsavedChanges</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useState</span><span class="token punctuation" style="color:#393A34">(</span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">showPrompt</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> setShowPrompt</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useState</span><span class="token punctuation" style="color:#393A34">(</span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> dispatch </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useAppDispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Listen for navigation prompt actions</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">useEffect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">handleConfirm</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Save data and proceed</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">saveData</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">setShowPrompt</span><span class="token punctuation" style="color:#393A34">(</span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">handleCancel</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Proceed without saving</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">setShowPrompt</span><span class="token punctuation" style="color:#393A34">(</span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Subscribe to actions</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Cleanup</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Show prompt when navigating with unsaved changes</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">handleNavigation</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">hasUnsavedChanges</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">setShowPrompt</span><span class="token punctuation" style="color:#393A34">(</span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">NavigationPrompt open</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">showPrompt</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">/* Your form */</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
345
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="dispatch-navigation-prompt-actions">Dispatch Navigation Prompt Actions<a href="#dispatch-navigation-prompt-actions" class="hash-link" aria-label="Direct link to Dispatch Navigation Prompt Actions" title="Direct link to Dispatch Navigation Prompt Actions" translate="no">​</a></h3>
346
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> NavigationPromptActions </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// User confirms to save and continue</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">dispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> NavigationPromptActions</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">CONFIRM</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// User cancels or continues without saving</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">dispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> NavigationPromptActions</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">CANCEL</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
347
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="error-handling">Error Handling<a href="#error-handling" class="hash-link" aria-label="Direct link to Error Handling" title="Direct link to Error Handling" translate="no">​</a></h2>
348
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="global-error-toast">Global Error Toast<a href="#global-error-toast" class="hash-link" aria-label="Direct link to Global Error Toast" title="Direct link to Global Error Toast" translate="no">​</a></h3>
349
- <p>Display error messages using the global error toast:</p>
350
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> useAppDispatch </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Dispatch errors from anywhere in your app</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">MyComponent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> dispatch </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useAppDispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">handleError</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">riskyOperation</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">err</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">dispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> error</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">set</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> messageText</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Operation failed&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> description</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">err </span><span class="token keyword" style="color:#00009f">as</span><span class="token plain"> Error</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">message</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">button onClick</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">handleError</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain">Execute</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">button</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
351
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="clear-errors">Clear Errors<a href="#clear-errors" class="hash-link" aria-label="Direct link to Clear Errors" title="Direct link to Clear Errors" translate="no">​</a></h3>
352
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Clear error state</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">dispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">error</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">clear</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
353
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="aria-live-messages">ARIA Live Messages<a href="#aria-live-messages" class="hash-link" aria-label="Direct link to ARIA Live Messages" title="Direct link to ARIA Live Messages" translate="no">​</a></h2>
354
- <p>Announce messages to screen readers for accessibility:</p>
355
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> ariaLive</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> useAppDispatch </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">MyComponent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> dispatch </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useAppDispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">announceSuccess</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">dispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> ariaLive</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">announce</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> message</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Data saved successfully&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> ariaLive</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;polite&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// or &#x27;assertive&#x27; for urgent messages</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;save-success&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">button onClick</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">announceSuccess</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain">Save</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">button</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
356
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="decorators">Decorators<a href="#decorators" class="hash-link" aria-label="Direct link to Decorators" title="Direct link to Decorators" translate="no">​</a></h2>
357
- <p>The SDK provides TypeScript decorators for common patterns:</p>
358
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="function-decorators">Function Decorators<a href="#function-decorators" class="hash-link" aria-label="Direct link to Function Decorators" title="Direct link to Function Decorators" translate="no">​</a></h3>
359
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> decorators </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> CacheUntilResolved</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> Debounce</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> Throttle</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> Memoize</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> MemoizeAsync</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> RetryAsync</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> AsyncSingleExecution</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> QueueTask</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> decorators</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">function</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">class</span><span class="token plain"> </span><span class="token class-name">DataService</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Cache async results until promise resolves</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token decorator at operator" style="color:#393A34">@</span><span class="token decorator function" style="color:#d73a49">CacheUntilResolved</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">fetchData</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> api</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getData</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Debounce method calls</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token decorator at operator" style="color:#393A34">@</span><span class="token decorator function" style="color:#d73a49">Debounce</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#36acaa">500</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">onSearchInput</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">query</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">performSearch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">query</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Throttle method calls</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token decorator at operator" style="color:#393A34">@</span><span class="token decorator function" style="color:#d73a49">Throttle</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#36acaa">1000</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">onScroll</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">loadMoreData</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Memoize synchronous results</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token decorator at operator" style="color:#393A34">@</span><span class="token decorator function" style="color:#d73a49">Memoize</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">calculateTotal</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">items</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> Item</span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> items</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">reduce</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">sum</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> item</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> sum </span><span class="token operator" style="color:#393A34">+</span><span class="token plain"> item</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">price</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Memoize async results</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token decorator at operator" style="color:#393A34">@</span><span class="token decorator function" style="color:#d73a49">MemoizeAsync</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">fetchUserData</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">userId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> api</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getUser</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">userId</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Retry failed async operations</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token decorator at operator" style="color:#393A34">@</span><span class="token decorator function" style="color:#d73a49">RetryAsync</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#36acaa">3</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1000</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 3 retries, 1000ms delay</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">unreliableOperation</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> api</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">flakeyEndpoint</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Ensure only one execution at a time</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token decorator at operator" style="color:#393A34">@</span><span class="token decorator function" style="color:#d73a49">AsyncSingleExecution</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">saveData</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> api</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">save</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Queue tasks for sequential execution</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token decorator at operator" style="color:#393A34">@</span><span class="token decorator function" style="color:#d73a49">QueueTask</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">processItem</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">item</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> Item</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> api</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">process</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">item</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
360
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="class-decorators">Class Decorators<a href="#class-decorators" class="hash-link" aria-label="Direct link to Class Decorators" title="Direct link to Class Decorators" translate="no">​</a></h3>
361
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> decorators </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> Singleton</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> Mixins </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> decorators</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">class</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Ensure only one instance exists</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token decorator at operator" style="color:#393A34">@</span><span class="token decorator function" style="color:#d73a49">Singleton</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">class</span><span class="token plain"> </span><span class="token class-name">ConfigService</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">private</span><span class="token plain"> config</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> Config</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">constructor</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">config </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">loadConfig</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Mix multiple classes</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token decorator at operator" style="color:#393A34">@</span><span class="token decorator function" style="color:#d73a49">Mixins</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">LoggingMixin</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> CachingMixin</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">class</span><span class="token plain"> </span><span class="token class-name">DataManager</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Inherits methods from both mixins</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
362
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="advanced-state-selectors">Advanced State Selectors<a href="#advanced-state-selectors" class="hash-link" aria-label="Direct link to Advanced State Selectors" title="Direct link to Advanced State Selectors" translate="no">​</a></h2>
363
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="using-usestateselector">Using useStateSelector<a href="#using-usestateselector" class="hash-link" aria-label="Direct link to Using useStateSelector" title="Direct link to Using useStateSelector" translate="no">​</a></h3>
364
- <p>Select specific fields from state with better performance:</p>
365
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> useStateSelector</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> useStateSelectorShallow</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> getSelectField</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// In your slice file</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> selectUserState </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getSelectField</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;user&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// In your component</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">UserProfile</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Select single field</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> userName </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useStateSelector</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">selectUserState</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;profile.name&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> defaultValue</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Guest&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Select multiple fields</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">email</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> phone</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> address</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useStateSelector</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> selectUserState</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">&#x27;profile.email&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;profile.phone&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;profile.address&#x27;</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> defaultValue</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">&#x27;&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;&#x27;</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Select nested objects</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> settings </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useStateSelector</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">selectUserState</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;preferences.settings&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> defaultValue</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">userName</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Use shallow equality for better performance</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">UserSettings</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> settings </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useStateSelectorShallow</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">selectUserState</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;preferences&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> defaultValue</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">/* render settings */</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
366
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="responsive-design">Responsive Design<a href="#responsive-design" class="hash-link" aria-label="Direct link to Responsive Design" title="Direct link to Responsive Design" translate="no">​</a></h2>
367
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="media-query-hook">Media Query Hook<a href="#media-query-hook" class="hash-link" aria-label="Direct link to Media Query Hook" title="Direct link to Media Query Hook" translate="no">​</a></h3>
368
- <p>Respond to media query changes:</p>
369
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useMediaQueryList </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">ResponsiveComponent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> deviceType </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useMediaQueryList</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;(max-width: 767px)&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;(min-width: 768px) and (max-width: 1023px)&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;(min-width: 1024px)&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">&#x27;mobile&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;tablet&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;desktop&#x27;</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;desktop&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// default value</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">deviceType </span><span class="token operator" style="color:#393A34">===</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;mobile&#x27;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">MobileLayout </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">deviceType </span><span class="token operator" style="color:#393A34">===</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;tablet&#x27;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">TabletLayout </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">deviceType </span><span class="token operator" style="color:#393A34">===</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;desktop&#x27;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">DesktopLayout </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
370
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="environment--url-utilities">Environment &amp; URL Utilities<a href="#environment--url-utilities" class="hash-link" aria-label="Direct link to Environment &amp; URL Utilities" title="Direct link to Environment &amp; URL Utilities" translate="no">​</a></h2>
371
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="environment-detection">Environment Detection<a href="#environment-detection" class="hash-link" aria-label="Direct link to Environment Detection" title="Direct link to Environment Detection" translate="no">​</a></h3>
372
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> isProd</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> isCIBuild </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token function" style="color:#d73a49">isProd</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// NODE_ENV === &#x27;production&#x27;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token function" style="color:#d73a49">isCIBuild</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// CI === &#x27;true&#x27; (running in CI pipeline)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
373
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="history-instances">History Instances<a href="#history-instances" class="hash-link" aria-label="Direct link to History Instances" title="Direct link to History Instances" translate="no">​</a></h3>
374
- <p>The SDK exports two pre-created history instances:</p>
375
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> history</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> memoryHistory </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// history — browser history, used by default for routing</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// memoryHistory — in-memory history, useful for testing or non-browser environments</span><br></div></code></pre></div></div>
376
- <p>Use <code>memoryHistory</code> in tests to avoid browser URL side-effects:</p>
377
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> memoryHistory </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">memoryHistory</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">push</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;/test-route&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
378
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="removedoubleslash">removeDoubleSlash<a href="#removedoubleslash" class="hash-link" aria-label="Direct link to removeDoubleSlash" title="Direct link to removeDoubleSlash" translate="no">​</a></h3>
379
- <p>Collapse accidental double slashes in URLs (preserving the protocol <code>://</code>):</p>
380
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> removeDoubleSlash </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">removeDoubleSlash</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;https://example.com//api//v1&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// → &#x27;https://example.com/api/v1&#x27;</span><br></div></code></pre></div></div>
381
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="themes">Themes<a href="#themes" class="hash-link" aria-label="Direct link to Themes" title="Direct link to Themes" translate="no">​</a></h3>
382
- <p>Available theme constants:</p>
383
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> Themes </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Themes.EM → &#x27;em&#x27;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Themes.CORP_COOL → &#x27;corpcool&#x27;</span><br></div></code></pre></div></div>
384
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="security-utilities">Security Utilities<a href="#security-utilities" class="hash-link" aria-label="Direct link to Security Utilities" title="Direct link to Security Utilities" translate="no">​</a></h2>
385
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="pii-redaction">PII Redaction<a href="#pii-redaction" class="hash-link" aria-label="Direct link to PII Redaction" title="Direct link to PII Redaction" translate="no">​</a></h3>
386
- <p>Automatically redact personally identifiable information from logs:</p>
387
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> redactPii </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> sensitiveData </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;John Doe&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> email</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;john@example.com&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> phone</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;555-123-4567&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> ssn</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;123-45-6789&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> creditCard</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;4532-1234-5678-9010&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> address</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;123 Main St, Apt 4B&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> zipcode</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;12345-6789&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> redacted </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">redactPii</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">sensitiveData</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">redacted</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// {</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// name: &#x27;John Doe&#x27;,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// email: &#x27;****&#x27;,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// phone: &#x27;****&#x27;,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// ssn: &#x27;****&#x27;,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// creditCard: &#x27;****&#x27;,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// address: &#x27;****&#x27;,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// zipcode: &#x27;****&#x27;,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// }</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Use when logging errors or data</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">logger</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token function" style="color:#d73a49">redactPii</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> message</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Error&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> data</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> sensitiveData </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
388
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="listener-middleware">Listener Middleware<a href="#listener-middleware" class="hash-link" aria-label="Direct link to Listener Middleware" title="Direct link to Listener Middleware" translate="no">​</a></h2>
389
- <p>Use Redux Toolkit listener middleware for side effects:</p>
390
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> startSideEffect</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> createSideEffect</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> removeSideEffect</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> clearSideEffects</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> resources </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./data/resources&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Start listening for actions</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">startSideEffect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> actionCreator</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> resources</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">get</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">effect</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">action</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> listenerApi</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Access state</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> state </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> listenerApi</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getState</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Call API</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> data </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">fetchResources</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Dispatch success action</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> listenerApi</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">dispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">resources</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getSuccess</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">data</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Create a reusable listener</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> listener </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">createSideEffect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> actionCreator</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> resources</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">create</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">effect</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">action</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> listenerApi</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">createResource</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">action</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">payload</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> listenerApi</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">dispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">resources</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">get</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Remove a listener</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">removeSideEffect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">listener</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Clear all listeners</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">clearSideEffects</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
391
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="session-management">Session Management<a href="#session-management" class="hash-link" aria-label="Direct link to Session Management" title="Direct link to Session Management" translate="no">​</a></h2>
392
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="session-timeout-handling">Session Timeout Handling<a href="#session-timeout-handling" class="hash-link" aria-label="Direct link to Session Timeout Handling" title="Direct link to Session Timeout Handling" translate="no">​</a></h3>
393
- <p>The SDK provides comprehensive session timeout management with warning and expiry callbacks:</p>
394
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> subscribeToSessionExpiryWarning</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> subscribeToSessionExpiry</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> subscribeToResetSession</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> resetUserIdleTime</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> trackActivity</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Subscribe to session expiry warning (shown before session expires)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">subscribeToSessionExpiryWarning</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">warningNotifiedAt</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;Session will expire soon!&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> warningNotifiedAt</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Show warning modal to user</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Subscribe to session expiry event</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">subscribeToSessionExpiry</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;Session has expired&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Redirect to login or handle session expiry</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Subscribe to session reset events</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">subscribeToResetSession</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">resetWarningModal</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">resetWarningModal</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Close warning modal if it&#x27;s open</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Manually reset user idle time (e.g., on user activity)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">resetUserIdleTime</span><span class="token punctuation" style="color:#393A34">(</span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Pass true to reset warning modal</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Track user activity (automatically resets idle timer)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">trackActivity</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
395
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="session-ui-components">Session UI Components<a href="#session-ui-components" class="hash-link" aria-label="Direct link to Session UI Components" title="Direct link to Session UI Components" translate="no">​</a></h3>
396
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="sessiontimeout">SessionTimeout<a href="#sessiontimeout" class="hash-link" aria-label="Direct link to SessionTimeout" title="Direct link to SessionTimeout" translate="no">​</a></h4>
397
- <p>A self-contained component that monitors idle time, displays a session-expiry warning modal, and dispatches <code>logout.confirm()</code> when the session expires. Place it once in your app root:</p>
398
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> SessionTimeout </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">Application</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">AppRoot store</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">store</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> history</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">history</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> theme</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">theme</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> manageSession</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">SessionTimeout </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">AppRoutes </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">AppRoot</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
399
- <blockquote>
400
- <p><code>AppRoot</code> with <code>manageSession</code> renders <code>SessionTimeout</code> automatically. Add it manually only when assembling your own root layout.</p>
401
- </blockquote>
402
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="waitmessage">WaitMessage<a href="#waitmessage" class="hash-link" aria-label="Direct link to WaitMessage" title="Direct link to WaitMessage" translate="no">​</a></h4>
403
- <p>A full-screen loading indicator controlled by <code>waitMessageAction</code> Redux state:</p>
404
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> WaitMessage </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Typically placed in AppRoot layout — shown/hidden via Redux</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">WaitMessage size</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;xl&quot;</span><span class="token plain"> color</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;light&quot;</span><span class="token plain"> showText </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
405
- <p>The <code>WaitMessage</code> component reads its open/close state from Redux. Dispatch <code>waitMessageAction.open()</code> / <code>waitMessageAction.close()</code> to control it (see <a href="#wait-messages" class="">Wait Messages</a>).</p>
406
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="initialize-session-management">Initialize Session Management<a href="#initialize-session-management" class="hash-link" aria-label="Direct link to Initialize Session Management" title="Direct link to Initialize Session Management" translate="no">​</a></h3>
407
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> listenStorageEvents</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> getAppConfigValue </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> Environment</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> Logger</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> RuntimeLoggerOptions</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-diagnostics&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Initialize session management</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">listenStorageEvents</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Configure logger with session data</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> onInit</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">OnInitCallback</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> history</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> homeRoute </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> sessionData </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> environment</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token generic-function function" style="color:#d73a49">getAppConfigValue</span><span class="token generic-function generic class-name operator" style="color:#393A34">&lt;</span><span class="token generic-function generic class-name">Environment</span><span class="token generic-function generic class-name operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;activeEnv&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> appVersion</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> window</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">emui</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">version</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> instanceId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> sessionStorage</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getItem</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;instanceId&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">||</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> userId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> sessionStorage</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getItem</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;userId&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">||</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">logger </span><span class="token keyword" style="color:#00009f">as</span><span class="token plain"> Logger</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">setOptions</span><span class="token operator" style="color:#393A34">?.</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">sessionData </span><span class="token keyword" style="color:#00009f">as</span><span class="token plain"> RuntimeLoggerOptions</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> logger</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">info</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;Application initialized&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// ... rest of initialization</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
408
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="logrocket-integration">LogRocket Integration<a href="#logrocket-integration" class="hash-link" aria-label="Direct link to LogRocket Integration" title="Direct link to LogRocket Integration" translate="no">​</a></h3>
409
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="initialization">Initialization<a href="#initialization" class="hash-link" aria-label="Direct link to Initialization" title="Direct link to Initialization" translate="no">​</a></h4>
410
- <p>LogRocket is initialized by the host/loader layer (e.g. <code>pui-app-loader</code>, <code>encw-loader</code>) via <code>@elliemae/pui-logrocket</code>. Micro-apps do not need to call <code>initLogRocket()</code> themselves.</p>
411
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// Done by the loader — not by individual micro-apps</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> initLogRocket </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-logrocket&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">window</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">emui</span><span class="token operator" style="color:#393A34">?.</span><span class="token plain">logRocketConfig</span><span class="token operator" style="color:#393A34">?.</span><span class="token plain">appId</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">initLogRocket</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
412
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="user-identification">User Identification<a href="#user-identification" class="hash-link" aria-label="Direct link to User Identification" title="Direct link to User Identification" translate="no">​</a></h4>
413
- <p>The SDK automatically identifies users to LogRocket during the OAuth <code>authorize()</code> flow:</p>
414
- <div class="language-text codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-text codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token plain">authorize() → getToken → introspectToken → sessionStorage.setItem(&#x27;user&#x27;, ...)</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> → lrIdentify(userKey, { name, instanceId })</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> → markLrIdentified(userKey) ← prevents re-identification</span><br></div></code></pre></div></div>
415
- <p>If LogRocket is not yet loaded when <code>authorize()</code> runs (common in <code>encw-loader</code>), the <code>lrIdentify</code> call is a no-op. The safety net is <code>ensureLrIdentified</code> inside <code>@elliemae/pui-analytics-so</code> — it automatically identifies the user from <code>sessionStorage</code> on the first <code>lrTrackGuarded</code> call after LogRocket becomes available.</p>
416
- <p>Covered scenarios:</p>
417
- <table><thead><tr><th>Scenario</th><th>How identified</th></tr></thead><tbody><tr><td>Fresh OAuth login</td><td><code>lrIdentify()</code> in <code>authorize()</code></td></tr><tr><td>Session restore (page refresh)</td><td><code>ensureLrIdentified</code> reads <code>user</code> from <code>sessionStorage</code> on first track</td></tr><tr><td>Late LogRocket load</td><td><code>ensureLrIdentified</code> fires when LR becomes available</td></tr><tr><td>Logout + new user login</td><td><code>resetLrIdentity()</code> on logout clears state; new <code>authorize()</code> re-identifies</td></tr><tr><td>Duplicate tab</td><td>Fresh JS context; <code>ensureLrIdentified</code> reads from copied <code>sessionStorage</code></td></tr></tbody></table>
418
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="tracking-events">Tracking Events<a href="#tracking-events" class="hash-link" aria-label="Direct link to Tracking Events" title="Direct link to Tracking Events" translate="no">​</a></h4>
419
- <p>Use <code>lrTrack</code> from the SDK&#x27;s <code>logrocket</code> utility for custom LogRocket events. It delegates to <code>lrTrackGuarded</code> from <code>@elliemae/pui-analytics-so</code> which provides:</p>
420
- <ul>
421
- <li class=""><strong>Event buffering</strong> — events fired before LogRocket loads are queued (up to 20) and replayed once available</li>
422
- <li class=""><strong>Sliding-window throttle</strong> — max 3 identical event+payload calls per second</li>
423
- <li class=""><strong>Property-count warning</strong> — warns if more than 2 properties per event</li>
424
- </ul>
425
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> lrTrack </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;../utils/logrocket&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Custom event tracking</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">lrTrack</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;document-saved&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> docId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;123&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Events before LR loads are queued and replayed later</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">lrTrack</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;login&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Jane&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> instanceId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;inst-1&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
426
- <p>For business analytics events that should reach both GTM and LogRocket, use <code>Analytics.sendBAEvent()</code> via the scripting object — it calls <code>lrTrackGuarded</code> internally.</p>
427
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="logout">Logout<a href="#logout" class="hash-link" aria-label="Direct link to Logout" title="Direct link to Logout" translate="no">​</a></h4>
428
- <p>The <code>endSession</code> function handles LogRocket cleanup:</p>
429
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// Inside endSession() — already wired by the SDK</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">lrTrack</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;logout&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">resetLrIdentity</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// clears identify state + pending event queue</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">sessionStorage</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">clear</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
430
- <p><code>resetLrIdentity()</code> ensures that:</p>
431
- <ul>
432
- <li class="">The next session starts with a fresh identify state</li>
433
- <li class="">Any queued events from the previous session are discarded</li>
434
- </ul>
435
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="service-worker">Service Worker<a href="#service-worker" class="hash-link" aria-label="Direct link to Service Worker" title="Direct link to Service Worker" translate="no">​</a></h3>
436
- <p>Initialize service worker for your app:</p>
437
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> initServiceWorker </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getBasePath </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./utils/paths&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Initialize after creating CMicroApp instance</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">app </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> CMicroApp</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getInstance</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> logger</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> onInit</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> onMount</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> onUnmount</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Initialize service worker</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">initServiceWorker</span><span class="token punctuation" style="color:#393A34">(</span><span class="token function" style="color:#d73a49">getBasePath</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
438
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="app-configuration">App Configuration<a href="#app-configuration" class="hash-link" aria-label="Direct link to App Configuration" title="Direct link to App Configuration" translate="no">​</a></h2>
439
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="loading-configuration">Loading Configuration<a href="#loading-configuration" class="hash-link" aria-label="Direct link to Loading Configuration" title="Direct link to Loading Configuration" translate="no">​</a></h3>
440
- <p>Load configuration from a JSON file:</p>
441
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> loadAppConfig</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> setAppConfig</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> getAppConfigValue</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Load from JSON file</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">loadAppConfig</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;/path/to/app.config.json&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Set configuration programmatically</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">setAppConfig</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> appId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;my-app&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> activeEnv</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;production&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> serviceEndpoints</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> api</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;https://api.example.com&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Get specific config value</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> apiEndpoint </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getAppConfigValue</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;serviceEndpoints.api&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> appId </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getAppConfigValue</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;appId&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
442
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="get-full-configuration">Get Full Configuration<a href="#get-full-configuration" class="hash-link" aria-label="Direct link to Get Full Configuration" title="Direct link to Get Full Configuration" translate="no">​</a></h3>
443
- <p>Retrieve the entire parsed config object. Useful when passing the config to other libraries (e.g. App Bridge):</p>
444
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getAppConfig </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> config </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getAppConfig</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// { appId: &#x27;myapp&#x27;, activeEnv: &#x27;dev&#x27;, microFrontendApps: { ... }, ... }</span><br></div></code></pre></div></div>
445
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="update-configuration-values">Update Configuration Values<a href="#update-configuration-values" class="hash-link" aria-label="Direct link to Update Configuration Values" title="Direct link to Update Configuration Values" translate="no">​</a></h3>
446
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> setAppConfigValue </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Update individual config value</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">setAppConfigValue</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;activeEnv&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;staging&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">setAppConfigValue</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;serviceEndpoints.api&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;https://staging-api.example.com&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
447
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="web-storage-events">Web Storage Events<a href="#web-storage-events" class="hash-link" aria-label="Direct link to Web Storage Events" title="Direct link to Web Storage Events" translate="no">​</a></h2>
448
- <p>Listen to storage events across tabs/windows:</p>
449
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> listenStorageEvents</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> removeStorageEvents</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Start listening to storage events</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">listenStorageEvents</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Stop listening</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">removeStorageEvents</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
450
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="micro-frontend-communication">Micro-Frontend Communication<a href="#micro-frontend-communication" class="hash-link" aria-label="Direct link to Micro-Frontend Communication" title="Direct link to Micro-Frontend Communication" translate="no">​</a></h2>
451
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="host-app-data-exchange">Host App Data Exchange<a href="#host-app-data-exchange" class="hash-link" aria-label="Direct link to Host App Data Exchange" title="Direct link to Host App Data Exchange" translate="no">​</a></h3>
452
- <p>Exchange data between host and guest apps:</p>
453
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> setHostAppData</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> getHostAppDataByKey</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> fetchHostAppData</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> sendMessageToHost</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// In host app: Set data for guest apps</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">setHostAppData</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> userId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;123&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> theme</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;dark&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// In guest app: Get host data by key</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> userId </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getHostAppDataByKey</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;userId&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Fetch all host data</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> hostData </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">fetchHostAppData</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Send message to host app</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">sendMessageToHost</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;UPDATE_THEME&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> payload</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;light&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
454
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="guest-unload-handlers">Guest Unload Handlers<a href="#guest-unload-handlers" class="hash-link" aria-label="Direct link to Guest Unload Handlers" title="Direct link to Guest Unload Handlers" translate="no">​</a></h3>
455
- <p>Handle guest app unload events:</p>
456
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> onGuestUnloadStart</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> notifyGuestUnloadComplete</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Register unload start handler</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">onGuestUnloadStart</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;Guest app is unloading&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Cleanup resources</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Notify when unload is complete</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">notifyGuestUnloadComplete</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
457
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="render-with-host-data">Render with Host Data<a href="#render-with-host-data" class="hash-link" aria-label="Direct link to Render with Host Data" title="Direct link to Render with Host Data" translate="no">​</a></h3>
458
- <p>Render component with host app data:</p>
459
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> renderWithHostData </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">renderWithHostData</span><span class="token punctuation" style="color:#393A34">(</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">App </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> hostData</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> userId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;123&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> containerId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;root&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
460
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="authentication-utilities">Authentication Utilities<a href="#authentication-utilities" class="hash-link" aria-label="Direct link to Authentication Utilities" title="Direct link to Authentication Utilities" translate="no">​</a></h2>
461
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="auth-helper-functions">Auth Helper Functions<a href="#auth-helper-functions" class="hash-link" aria-label="Direct link to Auth Helper Functions" title="Direct link to Auth Helper Functions" translate="no">​</a></h3>
462
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> isUserAuthorized</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> login</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> authorize</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> endSession</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> getAuthorizationHeader</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> setLoginParams</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Check if user is authorized</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token function" style="color:#d73a49">isUserAuthorized</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// User is logged in</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Get authorization header for API calls</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> authHeader </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getAuthorizationHeader</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Returns: &#x27;Bearer &lt;token&gt;&#x27;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Set login parameters</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">setLoginParams</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> clientId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;your-client-id&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> redirectUri</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;https://your-app.com/callback&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> scope</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;openid profile&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Trigger login</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">login</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Trigger authorization</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">authorize</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// End session (logout)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">endSession</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> clientId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;your-client-id&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> redirectUri</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;https://your-app.com&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
463
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="auth-subpath-exports">Auth Subpath Exports<a href="#auth-subpath-exports" class="hash-link" aria-label="Direct link to Auth Subpath Exports" title="Direct link to Auth Subpath Exports" translate="no">​</a></h3>
464
- <p>The <code>@elliemae/pui-app-sdk/auth</code> subpath exports additional low-level functions not available on the root package:</p>
465
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> getIDPInfoFromUrl</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> navigateToLoginPage</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk/auth&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
466
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="getidpinfofromurl">getIDPInfoFromUrl<a href="#getidpinfofromurl" class="hash-link" aria-label="Direct link to getIDPInfoFromUrl" title="Direct link to getIDPInfoFromUrl" translate="no">​</a></h4>
467
- <p>Extracts the authorization <code>code</code> and <code>error_code</code> from the current URL (set by the IDP after redirect):</p>
468
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> code</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> idpErrorCode</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> redirectUri </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getIDPInfoFromUrl</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">code</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">authorize</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> code</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> redirectUri</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">...</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
469
- <h4 class="anchor anchorTargetStickyNavbar_LxAM" id="navigatetologinpage">navigateToLoginPage<a href="#navigatetologinpage" class="hash-link" aria-label="Direct link to navigateToLoginPage" title="Direct link to navigateToLoginPage" translate="no">​</a></h4>
470
- <p>Redirects the browser to the IDP login page with the specified OAuth parameters:</p>
471
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">navigateToLoginPage</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> clientId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;my-app&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> redirectUri</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> window</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">location</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">href</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> idpErrorCode</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> scope</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;openid&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> responseType</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;code&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> instanceId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">12345</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// optional</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> siteId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// optional</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> userId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;jdoe&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// optional</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> disableRememberMe</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// optional</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> useCompactIdpPage</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// optional</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> isSSO</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// optional</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
472
- <blockquote>
473
- <p>In most cases, use <code>login()</code> from the root package — it calls <code>getIDPInfoFromUrl</code> and <code>navigateToLoginPage</code> / <code>authorize</code> internally.</p>
474
- </blockquote>
475
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="require-auth-component">Require Auth Component<a href="#require-auth-component" class="hash-link" aria-label="Direct link to Require Auth Component" title="Direct link to Require Auth Component" translate="no">​</a></h3>
476
- <p>Protect routes requiring authentication:</p>
477
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> RequireAuth </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">App</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">RequireAuth</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">ProtectedContent </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">RequireAuth</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
478
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="utility-hooks">Utility Hooks<a href="#utility-hooks" class="hash-link" aria-label="Direct link to Utility Hooks" title="Direct link to Utility Hooks" translate="no">​</a></h2>
479
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="useinjectquery">useInjectQuery<a href="#useinjectquery" class="hash-link" aria-label="Direct link to useInjectQuery" title="Direct link to useInjectQuery" translate="no">​</a></h3>
480
- <p>Inject RTK Query endpoints dynamically:</p>
481
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useInjectQuery </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> api </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./api&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">MyComponent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">useInjectQuery</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> key</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;users&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> endpoint</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> api</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">endpoints</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">getUsers </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Use the endpoint</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> data </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> api</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">endpoints</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">getUsers</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">useQuery</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">/* render data */</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
482
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="useinjectsideeffect">useInjectSideEffect<a href="#useinjectsideeffect" class="hash-link" aria-label="Direct link to useInjectSideEffect" title="Direct link to useInjectSideEffect" translate="no">​</a></h3>
483
- <p>Inject side effects dynamically:</p>
484
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useInjectSideEffect </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">MyComponent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">useInjectSideEffect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> key</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;analytics&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">effect</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">action</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> listenerApi</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Track analytics</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">/* component */</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
485
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="useappmiddleware">useAppMiddleware<a href="#useappmiddleware" class="hash-link" aria-label="Direct link to useAppMiddleware" title="Direct link to useAppMiddleware" translate="no">​</a></h3>
486
- <p>Access Redux middleware dynamically:</p>
487
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useAppMiddleware </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">MyComponent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> middleware </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useAppMiddleware</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Use middleware</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">/* component */</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
488
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="form-components">Form Components<a href="#form-components" class="hash-link" aria-label="Direct link to Form Components" title="Direct link to Form Components" translate="no">​</a></h2>
489
- <p>The SDK provides form field components with React Hook Form integration:</p>
490
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="available-form-components">Available Form Components<a href="#available-form-components" class="hash-link" aria-label="Direct link to Available Form Components" title="Direct link to Available Form Components" translate="no">​</a></h3>
491
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> Form</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> TextBox</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> InputText</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> LargeTextBox</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> InputMask</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> MaskedInputText</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> ComboBox</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> ComboBoxV3</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> CheckBox</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> Radio</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> RadioGroup</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> DateInput</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> DatePicker</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> DateTimePicker</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> DateRangePicker</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> Autocomplete</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> Toggle</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> FormSubmitButton</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> FormItemLayout</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> FormLayoutBlockItem</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> ConnectForm</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> FormPropsContext</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
492
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="textbox">TextBox<a href="#textbox" class="hash-link" aria-label="Direct link to TextBox" title="Direct link to TextBox" translate="no">​</a></h3>
493
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">TextBox</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> name</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;firstName&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> label</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;First Name&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> placeholder</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;Enter first name&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> rules</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> required</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;First name is required&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><br></div></code></pre></div></div>
494
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="inputmask">InputMask<a href="#inputmask" class="hash-link" aria-label="Direct link to InputMask" title="Direct link to InputMask" translate="no">​</a></h3>
495
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> InputMask</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">MASK_TYPES</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">MASK_PIPES</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">InputMask</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> name</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;phone&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> label</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;Phone Number&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> mask</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token constant" style="color:#36acaa">MASK_TYPES</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">PHONE</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> pipe</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token constant" style="color:#36acaa">MASK_PIPES</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">PHONE</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
496
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="combobox">ComboBox<a href="#combobox" class="hash-link" aria-label="Direct link to ComboBox" title="Direct link to ComboBox" translate="no">​</a></h3>
497
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">ComboBox</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> name</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;country&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> label</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;Country&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> options</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> value</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;us&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> label</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;United States&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> value</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;ca&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> label</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Canada&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> rules</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> required</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Please select a country&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><br></div></code></pre></div></div>
498
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="datepicker">DatePicker<a href="#datepicker" class="hash-link" aria-label="Direct link to DatePicker" title="Direct link to DatePicker" translate="no">​</a></h3>
499
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">DatePicker</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> name</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;birthDate&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> label</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;Date of Birth&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> rules</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> required</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Date of birth is required&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><br></div></code></pre></div></div>
500
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="daterangepicker">DateRangePicker<a href="#daterangepicker" class="hash-link" aria-label="Direct link to DateRangePicker" title="Direct link to DateRangePicker" translate="no">​</a></h3>
501
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">DateRangePicker</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> name</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;dateRange&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> label</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;Select Date Range&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> startLabel</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;Start Date&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> endLabel</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;End Date&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><br></div></code></pre></div></div>
502
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="checkbox">CheckBox<a href="#checkbox" class="hash-link" aria-label="Direct link to CheckBox" title="Direct link to CheckBox" translate="no">​</a></h3>
503
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">CheckBox</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> name</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;agreeToTerms&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> label</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;I agree to the terms and conditions&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> rules</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> required</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;You must agree to continue&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><br></div></code></pre></div></div>
504
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="radiogroup">RadioGroup<a href="#radiogroup" class="hash-link" aria-label="Direct link to RadioGroup" title="Direct link to RadioGroup" translate="no">​</a></h3>
505
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">RadioGroup name</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;paymentMethod&quot;</span><span class="token plain"> label</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;Payment Method&quot;</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Radio value</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;credit&quot;</span><span class="token plain"> label</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;Credit Card&quot;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Radio value</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;debit&quot;</span><span class="token plain"> label</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;Debit Card&quot;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Radio value</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;paypal&quot;</span><span class="token plain"> label</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;PayPal&quot;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">RadioGroup</span><span class="token operator" style="color:#393A34">&gt;</span><br></div></code></pre></div></div>
506
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="toggle">Toggle<a href="#toggle" class="hash-link" aria-label="Direct link to Toggle" title="Direct link to Toggle" translate="no">​</a></h3>
507
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Toggle name</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;notifications&quot;</span><span class="token plain"> label</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;Enable Notifications&quot;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><br></div></code></pre></div></div>
508
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="autocomplete">Autocomplete<a href="#autocomplete" class="hash-link" aria-label="Direct link to Autocomplete" title="Direct link to Autocomplete" translate="no">​</a></h3>
509
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Autocomplete</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> name</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;city&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> label</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;City&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> options</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">cities</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> onInputChange</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">value</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">fetchCities</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">value</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><br></div></code></pre></div></div>
510
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="form-layout">Form Layout<a href="#form-layout" class="hash-link" aria-label="Direct link to Form Layout" title="Direct link to Form Layout" translate="no">​</a></h3>
511
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Form onSubmit</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">handleSubmit</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">FormItemLayout</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">TextBox name</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;firstName&quot;</span><span class="token plain"> label</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;First Name&quot;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">TextBox name</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;lastName&quot;</span><span class="token plain"> label</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;Last Name&quot;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">FormItemLayout</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">FormLayoutBlockItem</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">LargeTextBox name</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;comments&quot;</span><span class="token plain"> label</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;Comments&quot;</span><span class="token plain"> rows</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token number" style="color:#36acaa">4</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">FormLayoutBlockItem</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">FormSubmitButton</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain">Submit</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">FormSubmitButton</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">Form</span><span class="token operator" style="color:#393A34">&gt;</span><br></div></code></pre></div></div>
512
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="reading-the-react-hook-form-configuration-formpropscontext">Reading the React Hook Form Configuration (<code>FormPropsContext</code>)<a href="#reading-the-react-hook-form-configuration-formpropscontext" class="hash-link" aria-label="Direct link to reading-the-react-hook-form-configuration-formpropscontext" title="Direct link to reading-the-react-hook-form-configuration-formpropscontext" translate="no">​</a></h3>
513
- <p><code>&lt;Form&gt;</code> builds its <code>useForm</code> instance from the <code>reactHookFormProps</code> prop
514
- (<code>{ mode: &#x27;onBlur&#x27; }</code> by default) and exposes that configuration to descendants
515
- through <code>FormPropsContext</code>. Use it when a child needs to read the original
516
- <code>UseFormProps</code> (e.g. <code>mode</code>) without prop-drilling.</p>
517
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useContext </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;react&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> FormPropsContext </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">MyCustomSubmitButton</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> mode </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useContext</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">FormPropsContext</span><span class="token punctuation" style="color:#393A34">)</span><span class="token operator" style="color:#393A34">?.</span><span class="token plain">mode</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">button disabled</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">mode </span><span class="token operator" style="color:#393A34">!==</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;onSubmit&#x27;</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain">Submit</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">button</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
518
- <blockquote>
519
- <p><strong>Note:</strong> Earlier versions of the SDK encouraged casting
520
- <code>useFormContext()</code> to a <code>CustomFormProviderProps</code> shape to read
521
- <code>formProps.mode</code>. That pattern stopped working with <code>react-hook-form@7.x</code>,
522
- whose <code>FormProvider</code> only forwards a fixed allow-list of <code>UseFormReturn</code>
523
- fields into context. Migrate any such consumer to
524
- <code>useContext(FormPropsContext)</code>.</p>
525
- </blockquote>
526
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="storybook-integration">Storybook Integration<a href="#storybook-integration" class="hash-link" aria-label="Direct link to Storybook Integration" title="Direct link to Storybook Integration" translate="no">​</a></h2>
527
- <p>Decorate Storybook stories with app context:</p>
528
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> withAppDecorator </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">default</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> title</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Components/MyComponent&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> component</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> MyComponent</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> decorators</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">withAppDecorator</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
529
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="utility-components">Utility Components<a href="#utility-components" class="hash-link" aria-label="Direct link to Utility Components" title="Direct link to Utility Components" translate="no">​</a></h2>
530
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="visuallyhidden">VisuallyHidden<a href="#visuallyhidden" class="hash-link" aria-label="Direct link to VisuallyHidden" title="Direct link to VisuallyHidden" translate="no">​</a></h3>
531
- <p>Hide content visually but keep it accessible to screen readers:</p>
532
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> VisuallyHidden </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">VisuallyHidden</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">label htmlFor</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;search&quot;</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain">Search</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">label</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">VisuallyHidden</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
533
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="page-component">Page Component<a href="#page-component" class="hash-link" aria-label="Direct link to Page Component" title="Direct link to Page Component" translate="no">​</a></h3>
534
- <p>Set page title and metadata:</p>
535
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> Page </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">Page pageTitle</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;Dashboard&quot;</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">DashboardContent </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">Page</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
536
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="testing">Testing<a href="#testing" class="hash-link" aria-label="Direct link to Testing" title="Direct link to Testing" translate="no">​</a></h2>
537
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="testing-with-redux">Testing with Redux<a href="#testing-with-redux" class="hash-link" aria-label="Direct link to Testing with Redux" title="Direct link to Testing with Redux" translate="no">​</a></h3>
538
- <p>The SDK provides testing helpers for components with Redux:</p>
539
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> renderWithRouterRedux</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> renderWithRedux</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> renderWithRouter</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> screen </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@testing-library/react&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">describe</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;MyComponent&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">it</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;renders with Redux state&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">renderWithRedux</span><span class="token punctuation" style="color:#393A34">(</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">MyComponent </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> initialState</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> user</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;John&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">expect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">screen</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getByText</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;John&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">toBeInTheDocument</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">it</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;renders with Router and Redux&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">renderWithRouterRedux</span><span class="token punctuation" style="color:#393A34">(</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">MyComponent </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> initialState</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> resources</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> route</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;/resources&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">expect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">screen</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getByTestId</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;resource-list&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">toBeInTheDocument</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
540
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="testing-library-re-exports">Testing Library Re-exports<a href="#testing-library-re-exports" class="hash-link" aria-label="Direct link to Testing Library Re-exports" title="Direct link to Testing Library Re-exports" translate="no">​</a></h3>
541
- <p>The SDK re-exports common <code>@testing-library/react</code> utilities so you can import everything from one place:</p>
542
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> render</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// custom render wrapped with AppRoot + theme + store</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> screen</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> waitFor</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> waitForElementToBeRemoved</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> within</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> fireEvent</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> act</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> cleanup</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> renderHook</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
543
- <p>The custom <code>render</code> wraps components in <code>AppRoot</code> with a default store and theme. For more control, use <code>renderWithRedux</code> or <code>renderWithRouterRedux</code>.</p>
544
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="renderwithstateaddons">RenderWithStateAddOns<a href="#renderwithstateaddons" class="hash-link" aria-label="Direct link to RenderWithStateAddOns" title="Direct link to RenderWithStateAddOns" translate="no">​</a></h3>
545
- <p>A component that injects reducers, sagas, and theme in one shot — useful in Storybook stories or integration tests:</p>
546
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> RenderWithStateAddOns </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">RenderWithStateAddOns</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> Component</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">MyComponent</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> reducer</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> key</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;resources&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> reducer</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> resourcesReducer </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> saga</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> key</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;resources&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> saga</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> resourcesSaga </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> theme</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">myTheme</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> someProp</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;value&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
547
- <p>Accepts single or array values for <code>reducer</code> and <code>saga</code>:</p>
548
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">RenderWithStateAddOns</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> Component</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Dashboard</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> reducer</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> key</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;resources&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> reducer</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> resourcesReducer </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> key</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;users&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> reducer</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> usersReducer </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> saga</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> key</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;resources&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> saga</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> resourcesSaga </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> key</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;users&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> saga</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> usersSaga </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><br></div></code></pre></div></div>
549
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="common-patterns">Common Patterns<a href="#common-patterns" class="hash-link" aria-label="Direct link to Common Patterns" title="Direct link to Common Patterns" translate="no">​</a></h2>
550
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="error-boundaries">Error Boundaries<a href="#error-boundaries" class="hash-link" aria-label="Direct link to Error Boundaries" title="Direct link to Error Boundaries" translate="no">​</a></h3>
551
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> ErrorBoundary</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> ErrorToast </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">App</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">ErrorBoundary</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">ErrorToast </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">YourApp </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">ErrorBoundary</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
552
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="api-error-handling-with-rtk-query">API Error Handling with RTK Query<a href="#api-error-handling-with-rtk-query" class="hash-link" aria-label="Direct link to API Error Handling with RTK Query" title="Direct link to API Error Handling with RTK Query" translate="no">​</a></h3>
553
- <p>RTK Query provides automatic error handling with built-in error states:</p>
554
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useGetResourceQuery </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./api/resources&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useAppDispatch </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">ResourceDetails</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> id </span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> dispatch </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useAppDispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> data</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> queryError</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> isError </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useGetResourceQuery</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">useEffect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">isError </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> queryError</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">dispatch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> error</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">set</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> messageText</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Failed to load resource. Please try again.&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">isError</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> queryError</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> dispatch</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">isError</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain">Error loading resource</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">data</span><span class="token operator" style="color:#393A34">?.</span><span class="token plain">name</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></div></code></pre></div></div>
555
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="api-error-handling-legacy-pattern">API Error Handling (Legacy Pattern)<a href="#api-error-handling-legacy-pattern" class="hash-link" aria-label="Direct link to API Error Handling (Legacy Pattern)" title="Direct link to API Error Handling (Legacy Pattern)" translate="no">​</a></h3>
556
- <p>For direct HTTP client usage, always wrap API calls with proper error handling:</p>
557
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">getResource</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> data </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getAuthHTTPClient</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">get</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">/api/resource/</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">id</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> data</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">err</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> logger</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> message</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Failed to get resource&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> exception</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> err </span><span class="token keyword" style="color:#00009f">as</span><span class="token plain"> Error</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">throw</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">Unable to get resource. Please try again later. Details: </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"></span><br></div><div class="token-line" style="color:#393A34"><span class="token template-string interpolation"> </span><span class="token template-string interpolation punctuation" style="color:#393A34">(</span><span class="token template-string interpolation">err </span><span class="token template-string interpolation keyword" style="color:#00009f">as</span><span class="token template-string interpolation"> Error</span><span class="token template-string interpolation punctuation" style="color:#393A34">)</span><span class="token template-string interpolation operator" style="color:#393A34">?.</span><span class="token template-string interpolation">message</span><br></div><div class="token-line" style="color:#393A34"><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
558
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="type-exports">Type Exports<a href="#type-exports" class="hash-link" aria-label="Direct link to Type Exports" title="Direct link to Type Exports" translate="no">​</a></h2>
559
- <p>The SDK exports these TypeScript types for use in your application:</p>
560
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">type</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> RootState</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Root Redux state type</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token class-name">AppStore</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Store type returned by configureStore</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> AppDispatch</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Dispatch type for the store</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> AppConfig</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Shape of app.config.json</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token constant" style="color:#36acaa">EMUI</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Shape of window.emui</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> Await</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Utility: unwrap Promise&lt;T&gt; to T</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> GuestProps</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Props available on CMicroApp instance</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> OnInitCallback</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Signature for CMicroApp onInit</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> OnMountCallback</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Signature for CMicroApp onMount</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> OnUnMountCallback</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Signature for CMicroApp onUnmount</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> OnHostInitCallback</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Signature for CMicroAppHost onInit</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> HostProvidedParams</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Host-provided values for module SO</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> ModuleOverrides</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Method overrides for GuestModule</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> UseStateSelectorOptions</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Options for useStateSelector</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> SelectStateFieldFunction</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Return type of getSelectField</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
561
- <p>Extend <code>RootState</code> for typed selectors when you inject additional reducers:</p>
562
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">type</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> RootState </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> reducer </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./data/resources&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">type</span><span class="token plain"> </span><span class="token class-name">AppState</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> RootState </span><span class="token operator" style="color:#393A34">&amp;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> resources</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ReturnType</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token keyword" style="color:#00009f">typeof</span><span class="token plain"> reducer</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
563
- <h2 class="anchor anchorTargetStickyNavbar_LxAM" id="troubleshooting">Troubleshooting<a href="#troubleshooting" class="hash-link" aria-label="Direct link to Troubleshooting" title="Direct link to Troubleshooting" translate="no">​</a></h2>
564
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="store-not-initialized">Store Not Initialized<a href="#store-not-initialized" class="hash-link" aria-label="Direct link to Store Not Initialized" title="Direct link to Store Not Initialized" translate="no">​</a></h3>
565
- <p>Ensure your store is initialized in the <code>onInit</code> callback:</p>
566
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> onInit</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">OnInitCallback</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> history</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> homeRoute </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> store </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">configureStore</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">as</span><span class="token plain"> RootState</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> history</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
567
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="saga-not-running">Saga Not Running<a href="#saga-not-running" class="hash-link" aria-label="Direct link to Saga Not Running" title="Direct link to Saga Not Running" translate="no">​</a></h3>
568
- <p>Make sure to inject sagas in your layout or root component:</p>
569
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useInjectSaga </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">Layout</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">useInjectSaga</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> key</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;resources&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> saga</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> resourceSagas </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// ...</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
570
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="scripting-objects-not-available">Scripting Objects Not Available<a href="#scripting-objects-not-available" class="hash-link" aria-label="Direct link to Scripting Objects Not Available" title="Direct link to Scripting Objects Not Available" translate="no">​</a></h3>
571
- <p>Ensure scripting objects are added during initialization:</p>
572
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> onInit</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">OnInitCallback</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> history</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> homeRoute </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// ... store initialization</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">addScriptingObjects</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">catch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> logger</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;Failed to add scripting objects&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
573
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="form-validation-issues">Form Validation Issues<a href="#form-validation-issues" class="hash-link" aria-label="Direct link to Form Validation Issues" title="Direct link to Form Validation Issues" translate="no">​</a></h3>
574
- <p>For field-level validation, ensure you&#x27;re passing correct rules:</p>
575
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">TextBox</span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> name</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;email&quot;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> rules</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> required</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Email is required&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> pattern</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> value</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">^</span><span class="token regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:#393A34">[</span><span class="token regex regex-source language-regex char-class range" style="color:#36acaa">A</span><span class="token regex regex-source language-regex char-class range range-punctuation operator" style="color:#393A34">-</span><span class="token regex regex-source language-regex char-class range" style="color:#36acaa">Z</span><span class="token regex regex-source language-regex char-class range" style="color:#36acaa">0</span><span class="token regex regex-source language-regex char-class range range-punctuation operator" style="color:#393A34">-</span><span class="token regex regex-source language-regex char-class range" style="color:#36acaa">9</span><span class="token regex regex-source language-regex char-class" style="color:#36acaa">._%+-</span><span class="token regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:#393A34">]</span><span class="token regex regex-source language-regex quantifier number" style="color:#36acaa">+</span><span class="token regex regex-source language-regex" style="color:#36acaa">@</span><span class="token regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:#393A34">[</span><span class="token regex regex-source language-regex char-class range" style="color:#36acaa">A</span><span class="token regex regex-source language-regex char-class range range-punctuation operator" style="color:#393A34">-</span><span class="token regex regex-source language-regex char-class range" style="color:#36acaa">Z</span><span class="token regex regex-source language-regex char-class range" style="color:#36acaa">0</span><span class="token regex regex-source language-regex char-class range range-punctuation operator" style="color:#393A34">-</span><span class="token regex regex-source language-regex char-class range" style="color:#36acaa">9</span><span class="token regex regex-source language-regex char-class" style="color:#36acaa">.-</span><span class="token regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:#393A34">]</span><span class="token regex regex-source language-regex quantifier number" style="color:#36acaa">+</span><span class="token regex regex-source language-regex special-escape escape" style="color:#36acaa">\.</span><span class="token regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:#393A34">[</span><span class="token regex regex-source language-regex char-class range" style="color:#36acaa">A</span><span class="token regex regex-source language-regex char-class range range-punctuation operator" style="color:#393A34">-</span><span class="token regex regex-source language-regex char-class range" style="color:#36acaa">Z</span><span class="token regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:#393A34">]</span><span class="token regex regex-source language-regex quantifier number" style="color:#36acaa">{2,}</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">$</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token regex regex-flags" style="color:#36acaa">i</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> message</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;Invalid email address&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><br></div></code></pre></div></div>
576
- <h3 class="anchor anchorTargetStickyNavbar_LxAM" id="host-guest-communication">Host-Guest Communication<a href="#host-guest-communication" class="hash-link" aria-label="Direct link to Host-Guest Communication" title="Direct link to Host-Guest Communication" translate="no">​</a></h3>
577
- <p>For communication between host and guest apps:</p>
578
- <div class="language-typescript codeBlockContainer_EUFB theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_UdBd"><pre tabindex="0" class="prism-code language-typescript codeBlock_RL5w thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_V7PD"><div class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// In guest app</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> sendMessageToHost </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">sendMessageToHost</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;UPDATE&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> payload</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> data </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// In host app</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> fetchHostAppData </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@elliemae/pui-app-sdk&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> hostData </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">fetchHostAppData</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_CXW_"><a href="https://git.elliemae.io/platform-ui/pui-app-sdk.git/docs/usage-guide.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_lW2Z" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_jQ0h"></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/app-sdk/"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Getting Started</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_HU9B thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#table-of-contents" class="table-of-contents__link toc-highlight">Table of Contents</a></li><li><a href="#routing" class="table-of-contents__link toc-highlight">Routing</a><ul><li><a href="#lazy-loading-components" class="table-of-contents__link toc-highlight">Lazy Loading Components</a></li></ul></li><li><a href="#authentication" class="table-of-contents__link toc-highlight">Authentication</a></li><li><a href="#api-integration-with-rtk-query" class="table-of-contents__link toc-highlight">API Integration with RTK Query</a><ul><li><a href="#setting-up-rtk-query-api" class="table-of-contents__link toc-highlight">Setting Up RTK Query API</a></li><li><a href="#injecting-rtk-query-api" class="table-of-contents__link toc-highlight">Injecting RTK Query API</a></li><li><a href="#using-rtk-query-in-components" class="table-of-contents__link toc-highlight">Using RTK Query in Components</a></li><li><a href="#advanced-rtk-query-features" class="table-of-contents__link toc-highlight">Advanced RTK Query Features</a></li><li><a href="#why-rtk-query" class="table-of-contents__link toc-highlight">Why RTK Query?</a></li></ul></li><li><a href="#http-client-legacy" class="table-of-contents__link toc-highlight">HTTP Client (Legacy)</a><ul><li><a href="#getauthhttpclient" class="table-of-contents__link toc-highlight">getAuthHTTPClient</a></li><li><a href="#gethttpclient" class="table-of-contents__link toc-highlight">getHTTPClient</a></li><li><a href="#onauthorizationfailure" class="table-of-contents__link toc-highlight">onAuthorizationFailure</a></li><li><a href="#httpclientprops" class="table-of-contents__link toc-highlight">httpClientProps</a></li><li><a href="#typed-selectors" class="table-of-contents__link toc-highlight">Typed Selectors</a></li><li><a href="#using-state-in-components" class="table-of-contents__link toc-highlight">Using State in Components</a></li><li><a href="#layout-component-with-dynamic-injection" class="table-of-contents__link toc-highlight">Layout Component with Dynamic Injection</a></li><li><a href="#redux-saga-side-effects-legacy-pattern" class="table-of-contents__link toc-highlight">Redux Saga Side Effects (Legacy Pattern)</a></li></ul></li><li><a href="#redux-internals" class="table-of-contents__link toc-highlight">Redux Internals</a><ul><li><a href="#getstore" class="table-of-contents__link toc-highlight">getStore</a></li><li><a href="#authreducer--authsaga" class="table-of-contents__link toc-highlight">authReducer &amp; authSaga</a></li><li><a href="#errormiddleware" class="table-of-contents__link toc-highlight">errorMiddleware</a></li><li><a href="#createmanager" class="table-of-contents__link toc-highlight">createManager</a></li></ul></li><li><a href="#form-management" class="table-of-contents__link toc-highlight">Form Management</a></li><li><a href="#analytics" class="table-of-contents__link toc-highlight">Analytics</a><ul><li><a href="#timing-events" class="table-of-contents__link toc-highlight">Timing Events</a></li><li><a href="#business-analytics-events" class="table-of-contents__link toc-highlight">Business Analytics Events</a></li><li><a href="#direct-analytics-exports" class="table-of-contents__link toc-highlight">Direct Analytics Exports</a></li><li><a href="#fetchusersettings" class="table-of-contents__link toc-highlight">fetchUserSettings</a></li></ul></li><li><a href="#micro-frontends" class="table-of-contents__link toc-highlight">Micro-Frontends</a><ul><li><a href="#hosting-micro-frontends" class="table-of-contents__link toc-highlight">Hosting Micro-Frontends</a></li><li><a href="#micro-frontend-configuration" class="table-of-contents__link toc-highlight">Micro-Frontend Configuration</a></li><li><a href="#navigation--history-modes" class="table-of-contents__link toc-highlight">Navigation &amp; History Modes</a></li><li><a href="#micro-frontend-host-api" class="table-of-contents__link toc-highlight">Micro-Frontend Host API</a></li><li><a href="#guest-initiated-loading" class="table-of-contents__link toc-highlight">Guest-Initiated Loading</a></li><li><a href="#host-discovery-windowemuigethost" class="table-of-contents__link toc-highlight">Host Discovery (<code>window.emui.getHost</code>)</a></li><li><a href="#module-scripting-object" class="table-of-contents__link toc-highlight">Module Scripting Object</a></li><li><a href="#automatic-manifest-warm-up" class="table-of-contents__link toc-highlight">Automatic Manifest Warm-Up</a></li></ul></li><li><a href="#scripting-objects" class="table-of-contents__link toc-highlight">Scripting Objects</a><ul><li><a href="#adding-scripting-objects" class="table-of-contents__link toc-highlight">Adding Scripting Objects</a></li><li><a href="#using-scripting-objects-in-components" class="table-of-contents__link toc-highlight">Using Scripting Objects in Components</a></li></ul></li><li><a href="#wait-messages" class="table-of-contents__link toc-highlight">Wait Messages</a><ul><li><a href="#using-waitmessage-component" class="table-of-contents__link toc-highlight">Using WaitMessage Component</a></li><li><a href="#wait-message-props" class="table-of-contents__link toc-highlight">Wait Message Props</a></li></ul></li><li><a href="#navigation-prompts" class="table-of-contents__link toc-highlight">Navigation Prompts</a><ul><li><a href="#dispatch-navigation-prompt-actions" class="table-of-contents__link toc-highlight">Dispatch Navigation Prompt Actions</a></li></ul></li><li><a href="#error-handling" class="table-of-contents__link toc-highlight">Error Handling</a><ul><li><a href="#global-error-toast" class="table-of-contents__link toc-highlight">Global Error Toast</a></li><li><a href="#clear-errors" class="table-of-contents__link toc-highlight">Clear Errors</a></li></ul></li><li><a href="#aria-live-messages" class="table-of-contents__link toc-highlight">ARIA Live Messages</a></li><li><a href="#decorators" class="table-of-contents__link toc-highlight">Decorators</a><ul><li><a href="#function-decorators" class="table-of-contents__link toc-highlight">Function Decorators</a></li><li><a href="#class-decorators" class="table-of-contents__link toc-highlight">Class Decorators</a></li></ul></li><li><a href="#advanced-state-selectors" class="table-of-contents__link toc-highlight">Advanced State Selectors</a><ul><li><a href="#using-usestateselector" class="table-of-contents__link toc-highlight">Using useStateSelector</a></li></ul></li><li><a href="#responsive-design" class="table-of-contents__link toc-highlight">Responsive Design</a><ul><li><a href="#media-query-hook" class="table-of-contents__link toc-highlight">Media Query Hook</a></li></ul></li><li><a href="#environment--url-utilities" class="table-of-contents__link toc-highlight">Environment &amp; URL Utilities</a><ul><li><a href="#environment-detection" class="table-of-contents__link toc-highlight">Environment Detection</a></li><li><a href="#history-instances" class="table-of-contents__link toc-highlight">History Instances</a></li><li><a href="#removedoubleslash" class="table-of-contents__link toc-highlight">removeDoubleSlash</a></li><li><a href="#themes" class="table-of-contents__link toc-highlight">Themes</a></li></ul></li><li><a href="#security-utilities" class="table-of-contents__link toc-highlight">Security Utilities</a><ul><li><a href="#pii-redaction" class="table-of-contents__link toc-highlight">PII Redaction</a></li></ul></li><li><a href="#listener-middleware" class="table-of-contents__link toc-highlight">Listener Middleware</a></li><li><a href="#session-management" class="table-of-contents__link toc-highlight">Session Management</a><ul><li><a href="#session-timeout-handling" class="table-of-contents__link toc-highlight">Session Timeout Handling</a></li><li><a href="#session-ui-components" class="table-of-contents__link toc-highlight">Session UI Components</a></li><li><a href="#initialize-session-management" class="table-of-contents__link toc-highlight">Initialize Session Management</a></li><li><a href="#logrocket-integration" class="table-of-contents__link toc-highlight">LogRocket Integration</a></li><li><a href="#service-worker" class="table-of-contents__link toc-highlight">Service Worker</a></li></ul></li><li><a href="#app-configuration" class="table-of-contents__link toc-highlight">App Configuration</a><ul><li><a href="#loading-configuration" class="table-of-contents__link toc-highlight">Loading Configuration</a></li><li><a href="#get-full-configuration" class="table-of-contents__link toc-highlight">Get Full Configuration</a></li><li><a href="#update-configuration-values" class="table-of-contents__link toc-highlight">Update Configuration Values</a></li></ul></li><li><a href="#web-storage-events" class="table-of-contents__link toc-highlight">Web Storage Events</a></li><li><a href="#micro-frontend-communication" class="table-of-contents__link toc-highlight">Micro-Frontend Communication</a><ul><li><a href="#host-app-data-exchange" class="table-of-contents__link toc-highlight">Host App Data Exchange</a></li><li><a href="#guest-unload-handlers" class="table-of-contents__link toc-highlight">Guest Unload Handlers</a></li><li><a href="#render-with-host-data" class="table-of-contents__link toc-highlight">Render with Host Data</a></li></ul></li><li><a href="#authentication-utilities" class="table-of-contents__link toc-highlight">Authentication Utilities</a><ul><li><a href="#auth-helper-functions" class="table-of-contents__link toc-highlight">Auth Helper Functions</a></li><li><a href="#auth-subpath-exports" class="table-of-contents__link toc-highlight">Auth Subpath Exports</a></li><li><a href="#require-auth-component" class="table-of-contents__link toc-highlight">Require Auth Component</a></li></ul></li><li><a href="#utility-hooks" class="table-of-contents__link toc-highlight">Utility Hooks</a><ul><li><a href="#useinjectquery" class="table-of-contents__link toc-highlight">useInjectQuery</a></li><li><a href="#useinjectsideeffect" class="table-of-contents__link toc-highlight">useInjectSideEffect</a></li><li><a href="#useappmiddleware" class="table-of-contents__link toc-highlight">useAppMiddleware</a></li></ul></li><li><a href="#form-components" class="table-of-contents__link toc-highlight">Form Components</a><ul><li><a href="#available-form-components" class="table-of-contents__link toc-highlight">Available Form Components</a></li><li><a href="#textbox" class="table-of-contents__link toc-highlight">TextBox</a></li><li><a href="#inputmask" class="table-of-contents__link toc-highlight">InputMask</a></li><li><a href="#combobox" class="table-of-contents__link toc-highlight">ComboBox</a></li><li><a href="#datepicker" class="table-of-contents__link toc-highlight">DatePicker</a></li><li><a href="#daterangepicker" class="table-of-contents__link toc-highlight">DateRangePicker</a></li><li><a href="#checkbox" class="table-of-contents__link toc-highlight">CheckBox</a></li><li><a href="#radiogroup" class="table-of-contents__link toc-highlight">RadioGroup</a></li><li><a href="#toggle" class="table-of-contents__link toc-highlight">Toggle</a></li><li><a href="#autocomplete" class="table-of-contents__link toc-highlight">Autocomplete</a></li><li><a href="#form-layout" class="table-of-contents__link toc-highlight">Form Layout</a></li><li><a href="#reading-the-react-hook-form-configuration-formpropscontext" class="table-of-contents__link toc-highlight">Reading the React Hook Form Configuration (<code>FormPropsContext</code>)</a></li></ul></li><li><a href="#storybook-integration" class="table-of-contents__link toc-highlight">Storybook Integration</a></li><li><a href="#utility-components" class="table-of-contents__link toc-highlight">Utility Components</a><ul><li><a href="#visuallyhidden" class="table-of-contents__link toc-highlight">VisuallyHidden</a></li><li><a href="#page-component" class="table-of-contents__link toc-highlight">Page Component</a></li></ul></li><li><a href="#testing" class="table-of-contents__link toc-highlight">Testing</a><ul><li><a href="#testing-with-redux" class="table-of-contents__link toc-highlight">Testing with Redux</a></li><li><a href="#testing-library-re-exports" class="table-of-contents__link toc-highlight">Testing Library Re-exports</a></li><li><a href="#renderwithstateaddons" class="table-of-contents__link toc-highlight">RenderWithStateAddOns</a></li></ul></li><li><a href="#common-patterns" class="table-of-contents__link toc-highlight">Common Patterns</a><ul><li><a href="#error-boundaries" class="table-of-contents__link toc-highlight">Error Boundaries</a></li><li><a href="#api-error-handling-with-rtk-query" class="table-of-contents__link toc-highlight">API Error Handling with RTK Query</a></li><li><a href="#api-error-handling-legacy-pattern" class="table-of-contents__link toc-highlight">API Error Handling (Legacy Pattern)</a></li></ul></li><li><a href="#type-exports" class="table-of-contents__link toc-highlight">Type Exports</a></li><li><a href="#troubleshooting" class="table-of-contents__link toc-highlight">Troubleshooting</a><ul><li><a href="#store-not-initialized" class="table-of-contents__link toc-highlight">Store Not Initialized</a></li><li><a href="#saga-not-running" class="table-of-contents__link toc-highlight">Saga Not Running</a></li><li><a href="#scripting-objects-not-available" class="table-of-contents__link toc-highlight">Scripting Objects Not Available</a></li><li><a href="#form-validation-issues" class="table-of-contents__link toc-highlight">Form Validation Issues</a></li><li><a href="#host-guest-communication" class="table-of-contents__link toc-highlight">Host-Guest Communication</a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/app-sdk/">Getting Started</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://icemortgagetechnology.slack.com/archives/C01M49EGP6Z" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_uxYp"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://git.elliemae.io/platform-ui/pui-app-sdk.git" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_uxYp"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2026 ICE.</div></div></div></footer></div>
579
- </body>
580
- </html>