How to Pass data between two web resources in Dynamics CRM?

Question

I have two webresource one is based on React and another one is normal Html both will load on load of the form in Modern Driven App. I want to pass data between these Web Resources based on some events.

How can i achieve this?

Jithu Thomas · Answer

Using the following ways it is possible: - 1. Using window.postMessage window.postMessage is a method that allows you to send messages between different windows (or iframes) regardless of their origin. This is one of the most common ways to handle communication between different web resources. 2. Using Local Storage Events You can use the localStorage API to pass data between the web resources. When the storage event is fired, it notifies other windows or iframes that the data has changed. 3. Using Custom Events Custom events can also be used to communicate between different parts of your application. Example Implimentations: - 1. Using window.postMessage HTML Web Resource HTML Web Resource HTML Web Resource Send Message to React function sendMessage() { const message = { type: 'data', payload: 'Hello from HTML!' }; localStorage.setItem('message', JSON.stringify(message)); } window.addEventListener('storage', (event) => { if (event.key === 'message') { const message = JSON.parse(event.newValue); console.log('Received data from React:', message.payload); } }); React Web Resource import React, { useEffect } from 'react'; const ReactResource = () => { useEffect(() => { const handleStorageEvent = (event) => { if (event.key === 'message') { const message = JSON.parse(event.newValue); console.log('Received data from HTML:', message.payload); } }; window.addEventListener('storage', handleStorageEvent); return () => { window.removeEventListener('storage', handleStorageEvent); }; }, []); const sendMessage = () => { const message = { type: 'data', payload: 'Hello from React!' }; localStorage.setItem('message', JSON.stringify(message)); }; return ( React Web Resource Send Message to HTML ); }; export default ReactResource; 2. Using Local Storage Events: - HTML Web Resource HTML Web Resource Send Message to React function sendMessage() { const reactFrame = document.getElementById('reactFrame').contentWindow; const event = new CustomEvent('customMessage', { detail: { payload: 'Hello from HTML!' } }); reactFrame.dispatchEvent(event); } window.addEventListener('customMessage', (event) => { console.log('Received data from React:', event.detail.payload); }); React Web Resource import React, { useEffect } from 'react'; const ReactResource = () => { useEffect(() => { const handleStorageEvent = (event) => { if (event.key === 'message') { const message = JSON.parse(event.newValue); console.log('Received data from HTML:', message.payload); } }; window.addEventListener('storage', handleStorageEvent); return () => { window.removeEventListener('storage', handleStorageEvent); }; }, []); const sendMessage = () => { const message = { type: 'data', payload: 'Hello from React!' }; localStorage.setItem('message', JSON.stringify(message)); }; return ( React Web Resource Send Message to HTML ); }; export default ReactResource; 3. Using Custom Events HTML Web Resource HTML Web Resource HTML Web Resource Send Message to React function sendMessage() { const reactFrame = document.getElementById('reactFrame').contentWindow; const event = new CustomEvent('customMessage', { detail: { payload: 'Hello from HTML!' } }); reactFrame.dispatchEvent(event); } window.addEventListener('customMessage', (event) => { console.log('Received data from React:', event.detail.payload); }); React Web Resource import React, { useEffect } from 'react'; const ReactResource = () => { useEffect(() => { const handleCustomEvent = (event) => { console.log('Received data from HTML:', event.detail.payload); }; window.addEventListener('customMessage', handleCustomEvent); return () => { window.removeEventListener('customMessage', handleCustomEvent); }; }, []); const sendMessage = () => { const event = new CustomEvent('customMessage', { detail: { payload: 'Hello from React!' } }); window.parent.dispatchEvent(event); }; return ( React Web Resource Send Message to HTML ); }; export default ReactResource; Also note that, 3ach of these methods has its own advantages and use cases, so you can choose the one that best fits your application's requirements.