Integrate In Any WebApp¶
UI Maker is deprecated
UI Maker is kept for the projects which use it and will be removed in API Maker v4. New admin screens are better built with any frontend framework on top of the generated APIs.
👉 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);
function setParentConfiguration() {
myIframe.contentWindow.postMessage({
eventType: 'DATA_TO_APPEND_IN_GRID_LOAD_FIND_QUERY',
eventData: {
userId : 10
},
}, '*');
myIframe.contentWindow.postMessage({ eventType: 'PARENT_READY' }, '*');
}
window.onmessage = function(e) {
const data = e.data;
console.log('[Parent] ', data);
if (data.eventType === "PAGE_READY") {
setParentConfiguration();
}
};
</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.
}