Integrate In Any WebApp
👉 You can integrate these UI Pages in any web application developed in any web framework like Angular, React, Vue, Plain HTML.
👉 This demo code shows usage in plain HTML.
👉 This UI page will be loaded via iFrame into your web application.
- It will make your web application code small and easy to maintain & upgrade for long term.
- It will make UI Pages, framework independent.
- If you upgrade Angular/React/Vue JS framework, it will not have any impact on UI or any behaviour of UI Pages.
👉 when we pass "wait-for-parent-ready=true" in query params of UI Page, it will wait until we send message using below code that parent is ready.
const frameId = 'iframe_students';
const myIframe = document.getElementById(frameId);
myIframe.contentWindow.postMessage({ eventType: 'PARENT_READY' }, '*');
👉 You can provide below query parameter to view internal logs of UI page.
Example
<html>
<head>
<title>UI Page Integration Demo</title>
</head>
<body style="background-color: black; padding: 0; margin: 0; overflow: hidden;">
<iframe
style="width: 100%; height: 100%;"
id="iframe_students"
src="http://localhost:4630/?admin-path=admin&wait-for-parent-ready=true&db-master-name=students&x-am-internationalization=65e837c36bdf09d1585f5e05&x-am-authorization=____am_token____&x-am-user-authorization=____user_token____"
>
</iframe>
</body>
<script type="application/javascript">
const frameId = 'iframe_students';
const myIframe = document.getElementById(frameId);
setTimeout(() => {
myIframe.contentWindow.postMessage({
eventType: 'DATA_TO_APPEND_IN_GRID_LOAD_FIND_QUERY',
eventData: {
userId : 10
},
}, '*');
myIframe.contentWindow.postMessage({ eventType: 'PARENT_READY' }, '*');
}, 100);
window.onmessage = function(e) {
const data = e.data;
console.log('[Parent] ', data);
};
</script>
</html>
Interface Documentation
/**
* Iframe parent will receive these events via messages.
*/
export enum IDBMasterEventFromIframeToParent {
PAGE_READY = 'PAGE_READY',
RECORD_SAVED = 'RECORD_SAVED',
RECORDS_IMPORTED = 'RECORDS_IMPORTED',
RECORD_UPDATED = 'RECORD_UPDATED',
RECORD_DELETED = 'RECORD_DELETED',
MANY_RECORD_DELETED = 'MANY_RECORD_DELETED',
GRID_EXPORTED = 'GRID_EXPORTED',
GRID_REFRESHED = 'GRID_REFRESHED',
ADD_NEW_BUTTON_CLICKED = 'ADD_NEW_BUTTON_CLICKED',
CUSTOM_ACTION_BUTTON_CLICKED = 'CUSTOM_ACTION_BUTTON_CLICKED',
DROPDOWN_ADD_NEW_RECORD_SAVED = 'DROPDOWN_ADD_NEW_RECORD_SAVED',
}
/**
* Iframe parent can send these messages to UI Page via message.
*/
export enum IDBMasterEventFromParentToIframe {
/** You can trigger add button click. */
TRIGGER_ADD_NEW_BUTTON_CLICK = 'TRIGGER_ADD_NEW_BUTTON_CLICK',
/** You can trigger refresh button click of grid. */
TRIGGER_REFRESH_BUTTON_CLICK = 'TRIGGER_REFRESH_BUTTON_CLICK',
/** Need to pass object and those properties will be sent in grid load query. */
DATA_TO_APPEND_IN_GRID_LOAD_FIND_QUERY = 'DATA_TO_APPEND_IN_GRID_LOAD_FIND_QUERY',
/** Need to pass object and those properties will be sent in SAVE API call. */
DATA_TO_APPEND_IN_RECORD_SAVE_API_PAYLOAD = 'DATA_TO_APPEND_IN_RECORD_SAVE_API_PAYLOAD',
/** Need to pass object and those properties will be sent in Update API call. */
DATA_TO_APPEND_IN_RECORD_UPDATE_API_PAYLOAD = 'DATA_TO_APPEND_IN_RECORD_UPDATE_API_PAYLOAD',
/** Pass object which will be used in global variable named "globalData" in custom code. */
SET_GLOBAL_DATA_TO_USE_IN_ANY_SCRIPT = 'SET_GLOBAL_DATA_TO_USE_IN_ANY_SCRIPT',
/** Send message to iframe when you are done with setting required data in globalData or other required places. */
PARENT_READY = 'PARENT_READY', // parent will send message when it is ready with grid conditions.
}