@xuda.io/runtime-bundle 1.0.607 → 1.0.609

package/js/xuda-runtime-bundle.js

@@ -27425,40 +27425,40 @@ func.UI.utils.init_ui_framework = async function (SESSION_ID, prog_id) {
   }
 };
 // old
-func.UI.utils.get_panels_from_dom = function (SESSION_ID, ignore_disableAutoRefresh) {
-  const $elm = func.UI.utils.find_in_element_data('xuPanelData', $(SESSION_OBJ[SESSION_ID].root_element), 'parent_element_ui_id');
-  var panels_obj = {};
+// func.UI.utils.get_panels_from_dom = function (SESSION_ID, ignore_disableAutoRefresh) {
+//   const $elm = func.UI.utils.find_in_element_data('xuPanelData', $(SESSION_OBJ[SESSION_ID].root_element), 'parent_element_ui_id');
+//   var panels_obj = {};
 
-  // set panels_obj
-  for (const [elem_key, elem_val] of Object.entries($elm)) {
-    if (elem_key === 'length') break;
-    var $div = $(elem_val);
-    let xuData = $div.data().xuData;
+//   // set panels_obj
+//   for (const [elem_key, elem_val] of Object.entries($elm)) {
+//     if (elem_key === 'length') break;
+//     var $div = $(elem_val);
+//     let xuData = $div.data().xuData;
 
-    if (!$div.data().xuPanelData) continue;
+//     if (!$div.data().xuPanelData) continue;
 
-    let dsSession = xuData.paramsP.dsSessionP;
-    var _session = SESSION_OBJ[SESSION_ID];
-    let _ds = _session?.DS_GLB[dsSession];
-    if (!_ds) continue;
+//     let dsSession = xuData.paramsP.dsSessionP;
+//     var _session = SESSION_OBJ[SESSION_ID];
+//     let _ds = _session?.DS_GLB[dsSession];
+//     if (!_ds) continue;
 
-    if (!ignore_disableAutoRefresh && _ds.tree_obj.disableAutoRefresh) {
-      continue;
-    }
+//     if (!ignore_disableAutoRefresh && _ds.tree_obj.disableAutoRefresh) {
+//       continue;
+//     }
 
-    const parent_element_ui_id = $div.data().xuPanelData.parent_element_ui_id;
-    if (!panels_obj[parent_element_ui_id]) {
-      panels_obj[parent_element_ui_id] = {
-        _ds,
-        $div,
-        ids: [],
-      };
-    }
-    panels_obj[parent_element_ui_id].ids.push($div.attr('xu-ui-id'));
-  }
+//     const parent_element_ui_id = $div.data().xuPanelData.parent_element_ui_id;
+//     if (!panels_obj[parent_element_ui_id]) {
+//       panels_obj[parent_element_ui_id] = {
+//         _ds,
+//         $div,
+//         ids: [],
+//       };
+//     }
+//     panels_obj[parent_element_ui_id].ids.push($div.attr('xu-ui-id'));
+//   }
 
-  return panels_obj;
-};
+//   return panels_obj;
+// };
 
 func.UI.utils.get_panels_wrapper_from_dom = async function (SESSION_ID, $xu_embed_container, ignore_disableAutoRefresh) {
   const $elm = func.UI.utils.find_in_element_data('xuPanelWrapper', $(SESSION_OBJ[SESSION_ID].root_element), 'isWrapper');
@@ -31571,7 +31571,7 @@ func.UI.screen.refresh_xu_attributes = async function (SESSION_ID, fields_arr, j
         elem_key: _elem_key,
         elem_val: _elem_val,
         fields_arr,
-        xu_for_item_id: elem_val?.$elm?.data().nodeid,
+        xu_for_item_id: elem_val?.$elm?.data().xuData.nodeid,
       };
       await func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'execute_xu_for', obj, new_job, _elem_val.$elm, _elem_val.$elm.data().xuData.paramsP.dsSessionP);
 
@@ -31600,31 +31600,6 @@ func.UI.screen.refresh_xu_attributes = async function (SESSION_ID, fields_arr, j
                 const _elem_val = { attributes: [], $elm: _$elem };
                 if (!_$elem?.length) continue;
 
-                // if (!_$elem?.length) {
-                //   // xu-for may exist in the panel root
-                //   if (!panel_wrapper_element_ui_id) continue;
-
-                //   $.each(item.attributes, function (key, val) {
-                //     _elem_val.attributes.push(key);
-                //   });
-                //   // _$elem = $(`[xu-ui-id="${panel_wrapper_element}"]`);
-                //   await func.UI.worker.add_to_queue(
-                //     SESSION_ID,
-                //     'gui event',
-                //     'execute_xu_for',
-                //     {
-                //       ui_type: _elem_val.$elm.data().xuData.ui_type,
-                //       SESSION_ID,
-                //       elem_key: _elem_key,
-                //       elem_val: _elem_val,
-                //       fields_arr,
-                //     },
-                //     new_job,
-                //     _elem_val.$elm,
-                //     _elem_val.$elm.data().xuData.paramsP.dsSessionP,
-                //   );
-                // }
-
                 if (refreshed_ids.includes(_$elem.attr('xu-ui-id'))) break;
 
                 $.each(_$elem.data()?.xuAttributes, function (key, val) {
@@ -31662,7 +31637,6 @@ func.UI.screen.refresh_xu_attributes = async function (SESSION_ID, fields_arr, j
 
   const $xu_embed_container = $('.xu_embed_container');
   const panels_obj = await func.UI.utils.get_panels_wrapper_from_dom(SESSION_ID, $xu_embed_container, true);
-  // let inviable_panels_obj = {};
 
   for await (const field_id of fields_arr) {
     // run root
@@ -31670,29 +31644,12 @@ func.UI.screen.refresh_xu_attributes = async function (SESSION_ID, fields_arr, j
       const progUi = $xu_embed_container?.data()?.xuData?.screenInfo?.progUi;
       if (progUi) {
         await iterate_field_in_progUi(progUi, field_id);
-        // // find invisible panels
-        // const inviable_panels_arr = func.UI.find_field_in_progUi_attributes(progUi, field_id, null, 'xu-panel');
-        // console.log('inviable_panels_arr', inviable_panels_arr);
-        // let prog_id = elm_node?.attributes?.program;
-        // const exp = elm_node?.attributes?.['xu-exp:program'];
-        // if (exp) {
-        //   let exp_ret = await func.expression.get(SESSION_ID, exp, $xu_embed_container?.data()?.xuData?.paramsP?.dsSessionP, 'UI Attr EXP');
-        //   prog_id = func.UI.screen.fix_val_defaults('program', exp_ret.result);
-        //   inviable_panels_obj[elm_node.id] = { prog_id };
-        // }
       }
     }
     // run panels
     for await (const [panel_wrapper_element_ui_id, panel_val] of Object.entries(panels_obj)) {
-      // const prog_doc = await func.utils.DOCS_OBJ.get(SESSION_ID, panel_val.prog_id);
       await iterate_field_in_progUi(panel_val.progUi, field_id);
     }
-
-    // // run invisible panels
-    // for await (const [parent_element_ui_id, panel_val] of Object.entries(inviable_panels_obj)) {
-    //   const prog_doc = await func.utils.DOCS_OBJ.get(SESSION_ID, panel_val.prog_id);
-    //   await iterate_field_in_progUi(prog_doc.progUi, field_id);
-    // }
   }
 
   func.events.delete_job(SESSION_ID, jobNoP);
@@ -31710,9 +31667,6 @@ func.UI.screen.refresh_screen = async function (SESSION_ID, fields_changed_arr,
 
     var found, refresh_reason, refresh_details;
     if (fields_changed_arr) {
-      // if (fields_changed_datasource && panel_val._ds.dsSession < fields_changed_datasource) {
-      //   continue;
-      // }
       if (fields_changed_datasource && panel_val._ds.dsSession <= Number(fields_changed_datasource)) {
         continue;
       }
@@ -31813,43 +31767,43 @@ func.UI.screen.refresh_screen = async function (SESSION_ID, fields_changed_arr,
       if (_.isEmpty(wrapper_data)) continue;
 
       try {
-        // const panelDivData = panel_val.$panel_div.data().xuPanelWrapper.panelDivData;
         const ts = Date.now();
         // remove old panel content
         $.each(panel_val.ids, async function (key, val) {
           $("[xu-ui-id='" + val + "']")
             .attr('xu-ui-id', val + ts)
             .removeData();
-          // .css('filter', 'blur(1px)');
         });
 
         let refreshed_ds;
         // check if ds exist and deleted by garbage collector
 
-        // const _session = SESSION_OBJ[SESSION_ID];
         if (_session.DS_GLB[panel_val._ds.dsSession]) {
           refreshed_ds = panel_val._ds.dsSession;
         }
+        for await (item of wrapper_data.xuData.node_org.children) {
+          if (item.tagName !== 'xu-render') continue;
 
-        const new_$div = await func.UI.screen.render_ui_tree(
-          SESSION_ID,
-          $div_elm, // the wrapper
-          _.cloneDeep(wrapper_data.xuData.node_org.children[0]), // the xu-panel node
-          {},
-          wrapper_data.xuData.paramsP, // the wrapper params
-          null,
-          null,
-          wrapper_data.xuData.key, // the wrapper key
-          refreshed_ds, // the refreshed_ds
-          wrapper_data.xuData.parent_node, // the wrapper parent node
-          null,
-          wrapper_data.xuData.$root_container, // the wrapper root container
-        );
+          const new_$div = await func.UI.screen.render_ui_tree(
+            SESSION_ID,
+            $div_elm, // the wrapper
+            _.cloneDeep(item), // _.cloneDeep(wrapper_data.xuData.node_org.children[0]), // the xu-panel node
+            {},
+            wrapper_data.xuData.paramsP, // the wrapper params
+            null,
+            null,
+            wrapper_data.xuData.key, // the wrapper key
+            refreshed_ds, // the refreshed_ds
+            wrapper_data.xuData.parent_node, // the wrapper parent node
+            null,
+            wrapper_data.xuData.$root_container, // the wrapper root container
+          );
 
-        // remove old panel content
-        $.each(panel_val.ids, async function (key, val) {
-          $("[xu-ui-id='" + val + ts + "']").remove();
-        });
+          // remove old panel content
+          $.each(panel_val.ids, async function (key, val) {
+            $("[xu-ui-id='" + val + ts + "']").remove();
+          });
+        }
       } catch (error) {
         debugger;
       }
@@ -31858,86 +31812,86 @@ func.UI.screen.refresh_screen = async function (SESSION_ID, fields_changed_arr,
   }
 };
 
-func.UI.screen.refresh_screen_old = async function (SESSION_ID, fields_changed_arr, datasource_changed, fields_changed_datasource) {
-  const panels_obj = func.UI.utils.get_panels_from_dom(SESSION_ID, false);
-
-  for await (const [parent_element_ui_id, panel_val] of Object.entries(panels_obj)) {
-    const prog_doc = await func.utils.DOCS_OBJ.get(SESSION_ID, panel_val._ds.prog_id);
-    const progDataSource_str = JSON.stringify(prog_doc.progDataSource);
-
-    var found;
-    if (fields_changed_arr) {
-      if (fields_changed_datasource && panel_val._ds.dsSession < fields_changed_datasource) {
-        continue;
-      }
-      for (const field_id of fields_changed_arr) {
-        // get panel attributes
-        const _attributes = panel_val?.$div?.data()?.xuPanelData?.node?.attributes || {};
-
-        // detect if program changed
-        found = _attributes['xu-exp:program']?.includes('@' + field_id);
-        if (found) break;
-
-        // _attributes holds also info of parameters in code_in: @code
-        // search field changed in panel call send parameters exp
-        for (const [attr, value] of Object.entries(_attributes)) {
-          const pattern = /xu-exp:(\w+)/;
-          const match = attr.match(pattern);
+// func.UI.screen.refresh_screen_old = async function (SESSION_ID, fields_changed_arr, datasource_changed, fields_changed_datasource) {
+//   const panels_obj = func.UI.utils.get_panels_from_dom(SESSION_ID, false);
 
-          if (!match) {
-            // continue if attribute is not expression
-            continue;
-          }
-          // code_in
-          const parameter_in_field_id = match?.[1];
-          // @code
-          if (value.includes(field_id)) {
-            // search parameter in field in the target program's progDataSource
-            found = progDataSource_str?.includes('@' + parameter_in_field_id);
-            if (found) break;
+//   for await (const [parent_element_ui_id, panel_val] of Object.entries(panels_obj)) {
+//     const prog_doc = await func.utils.DOCS_OBJ.get(SESSION_ID, panel_val._ds.prog_id);
+//     const progDataSource_str = JSON.stringify(prog_doc.progDataSource);
 
-            // found = find_field_in_progUi(prog_doc.progUi, parameter_in_field_id, 'xu-for');
-            found = func.UI.find_field_in_progUi_attributes(prog_doc.progUi, parameter_in_field_id, 'xu-for').length;
-            if (found) break;
-          }
-        }
+//     var found;
+//     if (fields_changed_arr) {
+//       if (fields_changed_datasource && panel_val._ds.dsSession < fields_changed_datasource) {
+//         continue;
+//       }
+//       for (const field_id of fields_changed_arr) {
+//         // get panel attributes
+//         const _attributes = panel_val?.$div?.data()?.xuPanelData?.node?.attributes || {};
+
+//         // detect if program changed
+//         found = _attributes['xu-exp:program']?.includes('@' + field_id);
+//         if (found) break;
+
+//         // _attributes holds also info of parameters in code_in: @code
+//         // search field changed in panel call send parameters exp
+//         for (const [attr, value] of Object.entries(_attributes)) {
+//           const pattern = /xu-exp:(\w+)/;
+//           const match = attr.match(pattern);
+
+//           if (!match) {
+//             // continue if attribute is not expression
+//             continue;
+//           }
+//           // code_in
+//           const parameter_in_field_id = match?.[1];
+//           // @code
+//           if (value.includes(field_id)) {
+//             // search parameter in field in the target program's progDataSource
+//             found = progDataSource_str?.includes('@' + parameter_in_field_id);
+//             if (found) break;
+
+//             // found = find_field_in_progUi(prog_doc.progUi, parameter_in_field_id, 'xu-for');
+//             found = func.UI.find_field_in_progUi_attributes(prog_doc.progUi, parameter_in_field_id, 'xu-for').length;
+//             if (found) break;
+//           }
+//         }
 
-        if (found) break;
+//         if (found) break;
 
-        // search field changed in the target program's progDataSource  // @code
-        found = progDataSource_str?.includes('@' + field_id);
-        if (found) break;
-      }
-    }
+//         // search field changed in the target program's progDataSource  // @code
+//         found = progDataSource_str?.includes('@' + field_id);
+//         if (found) break;
+//       }
+//     }
 
-    if (datasource_changed) {
-      if (panel_val._ds.dsSession == datasource_changed) {
-        found = true;
-      }
-    }
-    if (found) {
-      var $div_elm = panel_val.$div
-        .parent()
-        .parent()
-        .find("[xu-ui-id='" + parent_element_ui_id + "']");
+//     if (datasource_changed) {
+//       if (panel_val._ds.dsSession == datasource_changed) {
+//         found = true;
+//       }
+//     }
+//     if (found) {
+//       var $div_elm = panel_val.$div
+//         .parent()
+//         .parent()
+//         .find("[xu-ui-id='" + parent_element_ui_id + "']");
 
-      // restore original panel
-      try {
-        // const $org_panel = panel_val.$div.data().xuPanelData.$panel_div;
+//       // restore original panel
+//       try {
+//         // const $org_panel = panel_val.$div.data().xuPanelData.$panel_div;
 
-        const new_$div = await func.UI.screen.render_ui_tree(SESSION_ID, $div_elm, _.cloneDeep(panel_val.$div.data().xuPanelData.node), {}, $div_elm.data().xuData.paramsP, null, null, $div_elm.data().xuData.key, null, $div_elm.data().xuData.parent_node, null, $div_elm.data().xuData.$root_container);
+//         const new_$div = await func.UI.screen.render_ui_tree(SESSION_ID, $div_elm, _.cloneDeep(panel_val.$div.data().xuPanelData.node), {}, $div_elm.data().xuData.paramsP, null, null, $div_elm.data().xuData.key, null, $div_elm.data().xuData.parent_node, null, $div_elm.data().xuData.$root_container);
 
-        // remove old panel content
-        $.each(panel_val.ids, async function (key, val) {
-          $("[xu-ui-id='" + val + "']").remove();
-        });
-      } catch (error) {
-        debugger;
-      }
-      break;
-    }
-  }
-};
+//         // remove old panel content
+//         $.each(panel_val.ids, async function (key, val) {
+//           $("[xu-ui-id='" + val + "']").remove();
+//         });
+//       } catch (error) {
+//         debugger;
+//       }
+//       break;
+//     }
+//   }
+// };
 
 // const get_params_obj = async function (SESSION_ID, prog_id, parameters_obj_inP) {
 //   const _prog = await func.utils.VIEWS_OBJ.get(SESSION_ID, prog_id);
@@ -32948,1422 +32902,7 @@ func.UI.screen.set_attributes_new = async function (SESSION_ID, is_skeleton, $ro
               },
               props: {},
             },
-          ],
-        },
-      ];
-      delete nodeP.attributes[key];
-    }
-  }
-
-  for (let [key, val] of Object.entries(nodeP.attributes)) {
-    // FIX STATIC DEFAULTS
-    val = func.UI.screen.fix_val_defaults(key, val);
-
-    // REMOVE UNDEFINED or NULL ATTRIBUTES
-    if (typeof val === 'undefined' || val === null) {
-      delete nodeP.attributes[key];
-    }
-
-    // REMOVE ATTRIBUTES WITH EMPTY VALUES
-    if (glb.solid_attributes.includes(key) && !val) {
-      delete nodeP.attributes[key];
-    }
-  }
-
-  // BEFORE
-
-  for await (const [key, attr] of Object.entries(glb.run_xu_before)) {
-    if (_ret.abort) break;
-    if (glb.html5_events_handler.includes(attr) || execute_attributes.includes(attr)) {
-      continue;
-    }
-
-    if (!nodeP.attributes || !nodeP.attributes[attr] & !nodeP.attributes[`xu-exp:${attr}`]) {
-      continue;
-    }
-
-    let ret = await func.UI.screen.execute_xu_functions(
-      SESSION_ID,
-      is_skeleton,
-      $root_container,
-      nodeP,
-      $container,
-      paramsP,
-      parent_infoP,
-      jobNoP,
-      keyP,
-      parent_nodeP,
-      attr,
-      $elm,
-      {
-        key: attr,
-        // value: _value,
-        value: (await get_xuExp(attr)) || nodeP.attributes[attr],
-      },
-      is_init,
-    );
-    _ret = _.assignIn(_ret, ret);
-  }
-
-  // ALL
-
-  for await (const [key, val] of Object.entries(nodeP.attributes)) {
-    if (_ret.abort) break;
-    if (glb.html5_events_handler.includes(key) || execute_attributes.includes(key)) {
-      continue;
-    }
-
-    const new_key = key.split(':')[0]; // break expression
-    if (
-      nodeP.tagName !== 'xu-panel' &&
-      nodeP.tagName !== 'xu-teleport' && //  nodeP.tagName.substr(0, 3) !== "xu-" &&
-      (new_key.substr(0, 2) !== 'xu' || new_key.substr(2, 1) !== '-')
-    ) {
-      // handle common html attributes
-      try {
-        $elm.get(0).setAttribute(key, val);
-      } catch (err) {
-        console.error(err.message);
-      }
-
-      continue;
-    }
-    // handle xu attributes
-    try {
-      $elm.data().xuAttributes[key] = val;
-    } catch (error) {
-      debugger;
-      console.error(error);
-    }
-
-    if (new_key === 'xu-exp' || nodeP.attributes['xu-exp:' + new_key] || glb.run_xu_before.includes(new_key) || glb.run_xu_after.includes(new_key)) {
-      continue;
-    }
-
-    if (new_key === 'xu-on') {
-      let ret = await func.UI.screen.execute_xu_functions(
-        SESSION_ID,
-        is_skeleton,
-        $root_container,
-        nodeP,
-        $container,
-        paramsP,
-        parent_infoP,
-        jobNoP,
-        keyP,
-        parent_nodeP,
-        'xu-on',
-        $elm,
-        {
-          key: key,
-          value: (await get_xuExp(new_key)) || val,
-        },
-        is_init,
-        refreshed_ds,
-      );
-      _ret = _.assignIn(_ret, ret);
-      continue;
-    }
-
-    let ret = await func.UI.screen.execute_xu_functions(
-      SESSION_ID,
-      is_skeleton,
-      $root_container,
-      nodeP,
-      $container,
-      paramsP,
-      parent_infoP,
-      jobNoP,
-      keyP,
-      parent_nodeP,
-      new_key,
-      $elm,
-      {
-        key: key,
-        value: (await get_xuExp(new_key)) || val,
-      },
-      is_init,
-      refreshed_ds,
-    );
-
-    _ret = _.assignIn(_ret, ret);
-  }
-
-  // EXP for
-
-  for await (const [key, val] of Object.entries(nodeP.attributes)) {
-    if (_ret.abort) break;
-
-    const attr = key.split('xu-exp:')[1];
-
-    if (!attr) {
-      continue;
-    }
-
-    if (glb.html5_events_handler.includes(attr) || execute_attributes.includes(attr)) continue;
-
-    if (done_exp.includes(key)) {
-      continue;
-    }
-    let ret = await func.UI.screen.execute_xu_functions(
-      SESSION_ID,
-      is_skeleton,
-      $root_container,
-      nodeP,
-      $container,
-      paramsP,
-      parent_infoP,
-      jobNoP,
-      keyP,
-      parent_nodeP,
-      'xu-exp',
-      $elm,
-      {
-        key: attr,
-        value: val,
-      },
-      true,
-      refreshed_ds,
-    );
-    _ret = _.assignIn(_ret, ret);
-  }
-
-  // AFTER
-
-  for await (const [key, attr] of Object.entries(glb.run_xu_after)) {
-    if (glb.html5_events_handler.includes(attr) || execute_attributes.includes(attr)) continue;
-
-    if (!nodeP.attributes || !nodeP.attributes[attr] & !nodeP.attributes[`xu-exp:${attr}`]) continue;
-
-    let ret = await func.UI.screen.execute_xu_functions(
-      SESSION_ID,
-      is_skeleton,
-      $root_container,
-      nodeP,
-      $container,
-      paramsP,
-      parent_infoP,
-      jobNoP,
-      keyP,
-      parent_nodeP,
-      attr,
-      $elm,
-      {
-        key: attr,
-        value: (await get_xuExp(attr)) || nodeP.attributes[attr],
-      },
-      is_init,
-      refreshed_ds,
-    );
-    _ret = _.assignIn(_ret, ret);
-  }
-
-  // REGISTER EVENTS ATTRIBUTES
-
-  for await (const [key, val] of Object.entries(nodeP.attributes)) {
-    if (!glb.html5_events_handler.includes(key)) break;
-    $elm.attr(key, await get_xuExp(key)) || val;
-  }
-
-  return _ret;
-};
-
-func.UI.screen.panel_post_render_handler = async function (
-  SESSION_ID,
-  $container, // the parent program container
-  $wrapper, // the wrapper element contains the rendered panel elements e.g: xu-single-view
-  nodeP, // the xu-panel node
-  $panel_div, // the panel div
-  jobNoP,
-) {
-  const _container_ds = SESSION_OBJ[SESSION_ID].DS_GLB[$container.data().xuData.paramsP.dsSessionP];
-  const _ds = SESSION_OBJ[SESSION_ID].DS_GLB[$wrapper.data().xuData.paramsP.dsSessionP];
-  const find_old_panels_elements = function () {
-    return func.UI.utils.find_in_element_data('xuPanelData', $container.parent(), 'xu-ui-id', $container.data()?.xuPanelData?.xu_panel_xu_ui_id);
-  };
-  var $old_panel_div = find_old_panels_elements();
-  const set_xuPanelData_to_the_new_rendered_items = () => {
-    $container.data().xuPanelWrapper = { isWrapper: true, panelXuAttributes: _.clone($wrapper.data().xuAttributes), panelDivData: _.clone($wrapper.data()) };
-    $container.attr('xu-panel-wrapper-id', $wrapper.attr('xu-ui-id'));
-    $.each($wrapper.children(), function (key, val) {
-      if (!$(val).data().xuPanelData) {
-        $(val).data().xuPanelData = {};
-      }
-      $(val).data().xuPanelData.parent_element_ui_id = $old_panel_div?.length ? $container.parent().data().xuData.ui_id : $container.data().xuData.ui_id;
-
-      $(val).data().xuPanelData.xu_panel_xu_ui_id = (nodeP.xu_tree_id || nodeP.id) + '-' + _container_ds?.currentRecordId;
-      $(val).data().xuPanelData.node = nodeP;
-      $(val).data().xuPanelData.$panel_div = $panel_div.clone(true);
-    });
-  };
-  set_xuPanelData_to_the_new_rendered_items();
-
-  if ($old_panel_div?.length) {
-    $($old_panel_div[0]).after($wrapper.children());
-  } else {
-    $.each($wrapper.children(), function (key, child) {
-      $.each($container.children(), function (key, elm) {
-        if ($(elm)?.data()?.xuData && $(elm)?.data()?.xuData?.elem_key === $(child)?.data()?.xuData?.elem_key) {
-          $(elm).remove();
-        }
-      });
-      $container.append($(child));
-    });
-  }
-
-  if (!$wrapper.data()?.xuData?.dsSession) return;
-
-  if ($old_panel_div?.length) {
-    $container.parent().data().xuData.paramsP.dsSessionP = _ds.parentDataSourceNo; // set the new ds when panel replaced
-  } else {
-    $container.data().xuData.paramsP.dsSessionP = _ds.parentDataSourceNo; // set the new ds when panel replaced
-  }
-
-  if ($old_panel_div?.length) {
-    $old_panel_div.remove();
-  }
-  return jobNoP;
-};
-
-func.UI.screen.create_container = function (SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, classP, elem_propP, div_typeP, $appendToP, attr_str) {
-  const _paramsP = _.cloneDeep(paramsP);
-  var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_paramsP.dsSessionP];
-  var $appendTo = $container;
-  if ($appendToP) $appendTo = $appendToP;
-  if (!$appendTo || !$appendTo.length) return null; // screen closed or not exist abort build
-  var div = 'div';
-  if (div_typeP) div = div_typeP;
-  var items = [];
-  if (nodeP.children)
-    items = nodeP.children.map(function (val) {
-      return val.xu_tree_id || val.id;
-    });
-  var currentRecordId = _ds ? _ds.currentRecordId : '';
-  var xu_id = (glb.screen_num++).toString();
-  xu_id = xu_id += '_' + currentRecordId;
-
-  try {
-    const key_path = `${$container?.data()?.xuData?.key_path || '0'}-${keyP || '0'}`;
-    const elem_key = `${nodeP.xu_tree_id || nodeP.id}-${key_path}-${currentRecordId}`;
-    let ui_id = `${nodeP.id}-${elem_key}-${_paramsP?.dsSessionP?.toString() || ''}`; //nodeP.xu_tree_id ||
-
-    /////////////////////////////////
-
-    var $div;
-    if (div === 'svg') {
-      const draw_svg = function (element) {
-        const get_tag_str = function (element, prop, val) {
-          let class_str = '';
-          let attr_str = '';
-          for (const [key, val] of Object.entries(prop)) {
-            if (key.substr(0, 2) !== 'xu') {
-              attr_str += ` ${key}="${val}" `;
-            }
-          }
-          if (element === 'svg') {
-            return `<${element}  ${attr_str} > `;
-          }
-          let ret = '';
-          if (val?.children?.length) {
-            ret = iterate_svg(val);
-          }
-
-          return `<${element} ${class_str} ${attr_str} > ${ret} </${element}>`;
-        };
-        let svg_str = get_tag_str(element, prop);
-        let inner_str = '';
-        const iterate_svg = function (node) {
-          let ret = '';
-          if (node.children) {
-            for (let val of node.children) {
-              let prop = val.attributes;
-              ret += get_tag_str(val.tagName, prop, val);
-            }
-          }
-          return ret;
-        };
-        inner_str = iterate_svg(nodeP);
-
-        $div = $(svg_str + inner_str + '</svg>').appendTo($appendTo);
-      };
-
-      draw_svg(div_typeP);
-    } else {
-      $div = $(`<${div} ${attr_str ? attr_str : ''}>`);
-    }
-    //   const svgNS = "http://www.w3.org/2000/svg";
-    //   // $div = $(document.createElementNS(svgNS, "svg"));
-    //   $div = $(`<${div} ${attr_str ? attr_str : ""} ${svg_attributes_str}>`);
-    // } else {
-    //   $div = $(`<${div} ${attr_str ? attr_str : ""}>`);
-    $div.attr('xu-ui-id', ui_id).data({
-      xuData: {
-        prog_id: _paramsP.prog_id,
-        nodeid: nodeP.id,
-        ui_type: nodeP.tagName,
-        xu_id,
-        recordid: currentRecordId,
-        paramsP: _paramsP,
-        key: keyP,
-        key_path, //:($container?.data()?.xuData?.key || "0") + "-" + (keyP || "0"),
-        screenId: _paramsP.screenId,
-        parent_container: $container?.attr('id'),
-        elem_key,
-        properties: prop,
-        node: nodeP,
-        node_org: _.cloneDeep(nodeP),
-        is_panelP: _paramsP.is_panelP,
-        ui_id,
-        elem_prop: elem_propP,
-        debug_info: {
-          id: nodeP.id,
-          parent_id: $container?.data()?.xuData?.ui_id,
-          items: items,
-        },
-        parent_node: parent_nodeP,
-        currentRecordId: currentRecordId,
-        $root_container: $root_container,
-        parent_element_ui_id: $container?.data()?.xuData?.ui_id,
-      },
-      xuAttributes: {},
-    });
-
-    if (div_typeP !== 'svg') {
-      $div.appendTo($appendTo);
-    }
-  } catch (e) {
-    console.error(e);
-  }
-
-  if (parent_infoP?.iterate_info) {
-    $div.data().xuData.iterate_info = parent_infoP.iterate_info;
-  }
-
-  if (classP) $div.addClass(classP);
-
-  return $div;
-};
-func.UI.screen.execute_screen_ready_events = async function (SESSION_ID, paramsP, sourceP, $div, jobNoP, $div_objP) {
-  var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP];
-  if (!_ds) return;
-  var viewEventExec_arr = [];
-  const execute_view_events = async function (sourceP) {
-    for await (const val of viewEventExec_arr) {
-      cond = val.eventInfo.data.enabled;
-      if (val.expression) {
-        expCond = await func.expression.get(SESSION_ID, val.expression, paramsP.dsSessionP, 'condition', paramsP.rowIdP); // execute expression
-        cond = expCond.result;
-      }
-      if (cond) {
-        await func.events.execute(
-          SESSION_ID,
-          null,
-          val.eventId,
-          val.triggerId,
-          val.eventInfo.data.action,
-          val.eventInfo.data.name,
-          null,
-          null,
-          null,
-          null,
-          val.eventInfo.data.action, //val.eventInfo[4]
-          null,
-          paramsP.dsSessionP,
-          val.eventId,
-          sourceP + ' event',
-          true,
-          null,
-          null,
-          paramsP.dsSessionP,
-          null,
-          null,
-          val.eventInfo, // val.eventInfo[8],
-          null,
-          null,
-          null,
-          _ds.prog_id,
-          _ds.nodeId,
-          _ds.parentDataSourceNo,
-          $div,
-        );
-
-        // update changed values to screen added 18/09/13
-        var fields_to_refresh = [];
-        try {
-          var current_record_id = _ds.currentRecordId;
-        } catch (e) {
-          console.error(e);
-        }
-
-        if (_ds?.data_feed?.form_fields_changed?.[current_record_id]) {
-          $.each(_ds.data_feed.form_fields_changed[current_record_id], function (key, val) {
-            fields_to_refresh.push(key);
-          });
-
-          var containerId = _ds.containerId;
-          var $container = $('#' + containerId);
-          if ($container?.data()?.xuData?.is_mobile_modal || $container?.data()?.xuData?.params?.is_mobile_page) {
-            await func.UI.screen.refresh_container(SESSION_ID, 'init', fields_to_refresh, $container, paramsP.dsSessionP, null);
-          } else {
-            $container.trigger(containerId + '.refresh', ['init', fields_to_refresh]);
-          }
-
-          if ($div_objP) {
-            await func.UI.screen.refresh_container(SESSION_ID, 'init', fields_to_refresh, $div_objP, paramsP.dsSessionP, null);
-          }
-        }
-      }
-      continue;
-    }
-  };
-  const get_view_events_count = async function (typeP) {
-    const _prog = await func.utils.VIEWS_OBJ.get(SESSION_ID, _ds.prog_id);
-    viewEventExec_arr = [];
-
-    if (!_prog.progEvents || _.isEmpty(_prog.progEvents)) {
-      return 0;
-    }
-    for await (const event_obj of _prog.progEvents) {
-      if (event_obj.data.type !== typeP) continue;
-
-      if (_.isEmpty(event_obj.triggers)) continue;
-
-      if (event_obj.data.condition) {
-        let res = await func.expression.get(SESSION_ID, event_obj.data.condition, paramsP.dsSessionP, 'condition', paramsP.rowIdP, null, null, null, null, event_obj);
-        if (!res.result) {
-          continue;
-        }
-      }
-
-      for await (const trigger_obj of event_obj.triggers) {
-        var expression = undefined;
-        var cond = undefined;
-        if (!trigger_obj.data.enabled) {
-          continue;
-        }
-        cond = true;
-        if (trigger_obj.props.condition) expression = trigger_obj.props.condition;
-        var expCond = {};
-        if (expression) {
-          expCond = await func.expression.get(SESSION_ID, expression, paramsP.dsSessionP, 'condition', paramsP.rowIdP, trigger_obj.data.type); // execute expression
-          cond = expCond.result;
-          expCond.conditional = true;
-        }
-
-        if (!trigger_obj.data.action) {
-          func.utils.debug_report(SESSION_ID, 'get_view_events_count', `Error initiating ${typeP} prog: ${_ds.viewSourceDesc} reason: missing action`, 'E');
-          break;
-        }
-        if (!glb.REFERENCE_LESS_FUNCTIONS.includes(trigger_obj.data.action) && !trigger_obj.data.name?.prog) {
-          func.utils.debug_report(SESSION_ID, 'get_view_events_count', `Error initiating ${typeP} prog: ${_ds.viewSourceDesc} reason: missing reference`, 'E');
-          break;
-        }
-
-        viewEventExec_arr.push({
-          eventInfo: trigger_obj,
-          eventId: event_obj.id,
-          triggerId: trigger_obj.id,
-          expression: expression,
-        });
-      }
-    }
-    return viewEventExec_arr.length;
-  };
-
-  let count = await get_view_events_count('screen_ready');
-  if (!count) return;
-  return await execute_view_events(sourceP);
-};
-func.UI.screen.screen_loading_done = async function (SESSION_ID, paramsP, $div, jobNoP) {
-  // await
-  func.UI.screen.execute_screen_ready_events(SESSION_ID, paramsP, paramsP.screenInfo.properties?.renderType, $div, jobNoP);
-  var _session = SESSION_OBJ[SESSION_ID];
-  func.events.delete_job(SESSION_ID, jobNoP);
-  func.UI.utils.screen_blocker(false, paramsP.prog_id + (paramsP.sourceScreenP ? '_' + paramsP.sourceScreenP : ''));
-  if (_session.prog_id === paramsP.prog_id) {
-    _session.system_ready = true;
-    if (_session.engine_mode === 'live_preview' && STUDIO_PEER_CONN_SEND_METHOD) {
-      STUDIO_PEER_CONN_SEND_METHOD({
-        service: 'system_ready',
-        data: {},
-        id: STUDIO_PEER.id,
-        source: 'runtime',
-        session_id: SESSION_ID,
-        app_id: _session.app_id,
-        gtp_token: _session.gtp_token,
-        app_token: _session.app_token,
-      });
-      // }
-    }
-  }
-
-  return $div;
-};
-
-func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, parent_infoP, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $root_container) {
-  if (!is_skeleton) {
-    var _session = SESSION_OBJ[SESSION_ID];
-    var _ds = _session.DS_GLB[paramsP.dsSessionP];
-  }
-  var prop;
-  try {
-    prop = nodeP.attributes;
-  } catch (error) {
-    // debugger;
-  }
-
-  var is_mobile = glb.MOBILE_ARR.includes(paramsP.screenInfo.properties?.menuType) ? true : false;
-
-  var get_element_info = function () {
-    var ret = {};
-    let currentRecordId = _ds?.currentRecordId || '';
-
-    let $div = func.UI.utils.find_in_element_data('xuData', $container.parent(), 'nodeid', nodeP.id);
-
-    $.each($div, function (key, val) {
-      if ($(val)?.data().xuData?.recordid === currentRecordId && $(val)?.data().xuData?.key === keyP && $(val)?.prop('tagName') !== 'XURENDER') {
-        ret = {
-          div: $div,
-        };
-      }
-    });
-
-    return ret;
-  };
-
-  const init = async function () {
-    var ret = true;
-    if (!nodeP) ret = false;
-    return ret;
-  };
-  const debug = function (is_errorP, error_descP) {
-    func.utils.debug.log(SESSION_ID, paramsP.prog_id + '_' + nodeP.id_org + '_ui_prop', {
-      module: 'gui',
-      action: 'init',
-      prop: nodeP.id,
-      details: error_descP,
-      result: null,
-      error: is_errorP,
-      source: _ds?.tree_obj?.menuName || '',
-      fields: null,
-      type: null,
-      prog_id: paramsP.prog_id,
-      dsSession: null,
-    });
-  };
-
-  const open_modal = async function ($div) {
-    const modal_id = 'app_modal-' + paramsP.dsSessionP.toString();
-    var xu_modal_controller = document.querySelector('xu-modal-controller');
-    if (!xu_modal_controller) {
-      func.UI.component.create_app_modal_component(SESSION_ID, modal_id);
-      xu_modal_controller = document.querySelector('xu-modal-controller');
-    }
-
-    var controller_params = $(xu_modal_controller).data('xuControllerParams');
-
-    if (!controller_params) {
-      controller_params = {};
-    }
-
-    var params = {
-      menuTitle: paramsP.screenInfo.properties?.menuTitle,
-      screenId: paramsP.screenId,
-      $dialogDiv: $div.children(),
-      $container: $container,
-      dsSession: paramsP.dsSessionP,
-    };
-
-    controller_params[modal_id] = params;
-
-    $(xu_modal_controller).data('xuControllerParams', controller_params);
-    const modalController = await new UI_FRAMEWORK_PLUGIN.modal();
-
-    if (!APP_MODAL_OBJ[modal_id]) {
-      const modal = await modalController.create(SESSION_ID, modal_id, paramsP.screenInfo, close_modal);
-      APP_MODAL_OBJ[modal_id] = modal;
-    } else {
-      $(modal_id).empty();
-    }
-    await modalController.init(SESSION_ID, modal_id);
-
-    return $div;
-  };
-
-  const close_modal = async function (modal_id) {
-    delete APP_MODAL_OBJ[modal_id];
-    const xu_modal_controller = document.querySelector('xu-modal-controller');
-    var params = $(xu_modal_controller).data().xuControllerParams[modal_id];
-    if (params && params.$container) {
-      await func.UI.screen.validate_exit_events(SESSION_ID, params.$container.data().xuData.paramsP, null);
-      func.datasource.clean_all(SESSION_ID, params.dsSession);
-    }
-  };
-
-  const close_all_modals = function () {
-    $.each(APP_MODAL_OBJ, function (key, val) {
-      if (val) {
-        // close_modal(key);
-        UI_FRAMEWORK_PLUGIN.modal.close(key);
-      }
-    });
-  };
-
-  const open_popover = async function ($div) {
-    const xu_popover_controller = func.UI.component.create_app_popover_component(SESSION_ID);
-
-    $(xu_popover_controller).data('xuControllerParams', {
-      menuTitle: paramsP.screenInfo.properties?.menuTitle,
-      screenId: paramsP.screenId,
-      $dialogDiv: $div.children(),
-      $container: $container,
-    });
-    const popover = new UI_FRAMEWORK_PLUGIN.popover(
-      SESSION_ID,
-      // ELEMENT_CLICK_EVENT,
-      // props
-    );
-    await popover.open(SESSION_ID);
-    CURRENT_APP_POPOVER = popover;
-
-    return;
-    popoverController
-      .create({
-        component: 'xu-popover-content-' + SESSION_ID,
-        event: ELEMENT_CLICK_EVENT,
-        translucent: true,
-      })
-      .then((modal) => {
-        modal.present().then(() => {
-          CURRENT_APP_POPOVER = modal;
-
-          if (callbackP) callbackP($div);
-        });
-      });
-  };
-  const iterate_child = async function ($divP, nodeP, parent_infoP, countP, $root_container, before_record_function) {
-    if (!is_mobile && nodeP.busy) return;
-    nodeP.busy = true;
-    const done = async function ($divP) {
-      setTimeout(function () {
-        nodeP.busy = false;
-      }, 1000);
-
-      return $divP;
-    };
-    if (!nodeP || !nodeP.children) {
-      return await done($divP);
-    }
-
-    if (before_record_function) {
-      await before_record_function();
-    }
-    if (nodeP?.children?.length) {
-      for await (const [key, val] of Object.entries(nodeP.children)) {
-        const ret = await func.UI.screen.render_ui_tree(SESSION_ID, $divP, nodeP.children[key], parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, nodeP, null, $root_container);
-      }
-    }
-    return await done($divP);
-  };
-
-  const _$ = function ($elm) {
-    try {
-      const id = $elm.attr('xu-ui-id');
-      if (!id) return $elm;
-      const $el = $(`[xu-ui-id="${id}"]`); // $("#" + id);
-
-      if ($el.length > 1) {
-        console.warn('Multiple elements for xu-ui-id: ' + id, $el);
-      }
-
-      return $($el[0]);
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  const hover_in = function ($div) {
-    if (is_skeleton) return;
-    CLIENT_ACTIVITY_TS = Date.now();
-    if (_$($container)?.data()?.xuData?.debug_info) _$($container).data().xuData.debug_info.hover_item = $div.attr('xu-ui-id');
-    if (!_ds) return;
-    ///////// SET Attributes///////////
-    let attributes = {};
-    $.each($div[0].attributes, function (index, attr) {
-      attributes[attr.name] = attr.value;
-    });
-
-    SESSION_OBJ[SESSION_ID].DS_GLB[0].data_system.SYS_OBJ_WIN_ELEMENT_HOVERED_ATTRIBUTES = attributes;
-    //////////////////////////////////
-    if (!$div.data()?.xuData) return;
-    const _iterate_info = $div.data().xuData.iterate_info;
-    if (_iterate_info) {
-      if (_iterate_info.is_key_dynamic_field) {
-        _ds.dynamic_fields[_iterate_info.iterator_key].value = _iterate_info._key;
-      } else {
-        try {
-          const row_idx = func.common.find_ROWID_idx(_ds, _ds.currentRecordId);
-          _ds.data_feed.rows[row_idx][_iterate_info.iterator_key] = _iterate_info._key;
-        } catch (err) {
-          console.error(err);
-        }
-      }
-
-      if (_iterate_info.is_val_dynamic_field) {
-        _ds.dynamic_fields[_iterate_info.iterator_val].value = _iterate_info._val;
-      } else {
-        try {
-          const row_idx = func.common.find_ROWID_idx(_ds, _ds.currentRecordId);
-          _ds.data_feed.rows[row_idx][_iterate_info.iterator_val] = _iterate_info._val;
-        } catch (err) {
-          console.error(err);
-        }
-      }
-    }
-
-    if ($div && _$($div) && _ds && paramsP.renderType === 'grid') {
-      func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'update_datasource', { currentRecordId: _$($div).data().xuData.currentRecordId }, null, null, paramsP.dsSessionP);
-    }
-
-    const set_value = function (field_id, value) {
-      var currentRecordId = _$($div).data().xuData.currentRecordId;
-
-      func.UI.worker.add_to_queue(
-        SESSION_ID,
-        'gui event',
-        'update_datasource',
-        {
-          currentRecordId,
-          field_id,
-          field_value: value,
-        },
-        null,
-        null,
-        paramsP.dsSessionP,
-      );
-    };
-
-    if ($div?.data()?.iterate_info) {
-      var data = $div.data().xuData.iterate_info;
-      if (data.iterator_key) {
-        set_value(data.iterator_key, data._key);
-      }
-      if (data.iterator_val) {
-        set_value(data.iterator_val, data._val);
-      }
-    }
-  };
-  const hover_out = function () {
-    if (is_skeleton) return;
-
-    CLIENT_ACTIVITY_TS = Date.now();
-    if (_$($container)?.data()?.xuData?.debug_info) {
-      _$($container).data().xuData.debug_info.hover_item = null;
-    }
-    if (_ds?.data_system) {
-      SESSION_OBJ[SESSION_ID].DS_GLB[0].data_system.SYS_OBJ_WIN_ELEMENT_HOVERED_ATTRIBUTES = {};
-    }
-  };
-  const render_screen_type = async function ($div) {
-    const set_call_screen_properties_values = async function (ui_framework) {
-      params.properties = {};
-      const get_values = async function (property) {
-        var property_value = paramsP?.screenInfo?.properties?.[property] || paramsP?.screenInfo?.properties?.frameworkProperties?.[property];
-        if (paramsP?.call_screen_propertiesP) {
-          if (paramsP.call_screen_propertiesP?.[property]) {
-            property_value = paramsP.call_screen_propertiesP[property];
-          }
-          if (paramsP.call_screen_propertiesP[`xu-exp:${property}`]) {
-            property_value = (await func.expression.get(SESSION_ID, paramsP.call_screen_propertiesP[`xu-exp:${property}`], paramsP.dsSessionP, property)).result;
-          }
-        }
-        return property_value;
-      };
-      params.properties['name'] = await get_values('menuTitle');
-      if (await ui_framework?.properties()) {
-        for await (const [key, val] of Object.entries(await ui_framework.properties())) {
-          params.properties[key] = await get_values(key);
-        }
-      }
-    };
-
-    var $div_content = $div.children();
-
-    $.each($div_content, function (key, val) {
-      if (!$(val)?.data()?.xuData?.parent_container) {
-        return true;
-      }
-      $(val).data().xuData.parent_container = $div.data().xuData.parent_container;
-    });
-
-    let $ret = $div;
-    var $nav = $(SESSION_OBJ[SESSION_ID].root_element).find('xu-nav');
-    var params;
-    switch (paramsP.screen_type) {
-      case 'modal':
-        const modal_id = 'app_modal-' + paramsP.dsSessionP.toString();
-        var xu_modal_controller = document.querySelector('xu-modal-controller');
-        if (!xu_modal_controller) {
-          func.UI.component.create_app_modal_component(SESSION_ID, modal_id);
-          xu_modal_controller = document.querySelector('xu-modal-controller');
-        }
-
-        var controller_params = $(xu_modal_controller).data('xuControllerParams');
-
-        if (!controller_params) {
-          controller_params = {};
-        }
-
-        params = {
-          screenId: paramsP.screenId,
-          $dialogDiv: $div.children(),
-          $container: $container,
-          dsSession: paramsP.dsSessionP,
-          modal_id,
-          screenInfo: paramsP.screenInfo,
-          close_callback: close_modal,
-          paramsP,
-        };
-
-        controller_params[modal_id] = params;
-
-        $(xu_modal_controller).data('xuControllerParams', controller_params);
-        const modalController = await new UI_FRAMEWORK_PLUGIN.modal();
-        await set_call_screen_properties_values(modalController);
-        if (!APP_MODAL_OBJ[modal_id]) {
-          const modal = await modalController.create(params);
-
-          APP_MODAL_OBJ[modal_id] = modal;
-        } else {
-          $(modal_id).empty();
-        }
-
-        await modalController.init(params);
-
-        break;
-
-      case 'popover':
-        // open_popover($div);
-
-        const xu_popover_controller = func.UI.component.create_app_popover_component(SESSION_ID);
-        params = {
-          menuTitle: paramsP.screenInfo.properties?.menuTitle,
-          screenId: paramsP.screenId,
-          $dialogDiv: $div.children(),
-          $container: $container,
-        };
-
-        $(xu_popover_controller).data('xuControllerParams', params);
-        const popover = new UI_FRAMEWORK_PLUGIN.popover(SESSION_ID);
-        await set_call_screen_properties_values(popover);
-        await popover.open(params);
-        CURRENT_APP_POPOVER = popover;
-
-        func.UI.utils.screen_blocker(false, paramsP.prog_id + '_' + paramsP.sourceScreenP);
-        break;
-
-      case 'page':
-        const nav = $nav[0];
-
-        params = {
-          div: $div_content,
-          name: paramsP.screenInfo.properties?.menuTitle,
-          screenId: paramsP.screenId,
-          $container: $container,
-          dsSession: paramsP.dsSessionP,
-          SESSION_ID,
-          nav,
-          paramsP,
-        };
-
-        var component_name = 'xu-page-component-' + paramsP.dsSessionP;
-        if (!$(nav).data().xuData.nav_params) {
-          $(nav).data().xuData.nav_params = {};
-        }
-
-        //restore validate
-        if ($(nav)?.data()?.xuData?.params?.[paramsP.dsSessionP]) {
-          params.$container.data().xuData.validate_screen_ready = $(nav).data().xuData.params[paramsP.dsSessionP].$container.data().xuData.validate_screen_ready;
-        }
-
-        if (!$(nav)?.data()?.xuData) return;
-        $(nav).data().xuData.nav_params[paramsP.dsSessionP] = params;
-        if (!$(component_name).length) {
-          await func.UI.component.create_app_page_component(SESSION_ID, paramsP.dsSessionP);
-          const page = new UI_FRAMEWORK_PLUGIN.page();
-          await set_call_screen_properties_values(page);
-          await page.create(params);
-          await page.init(params);
-          nav.push(component_name, { params });
-        } else {
-          debugger;
-          $(component_name).empty();
-
-          await UI_FRAMEWORK_PLUGIN.page(SESSION_ID, paramsP.dsSessionP);
-        }
-        $div.data().xuData.paramsP = $container.data().xuData.paramsP;
-        break;
-
-      case 'panel':
-        $container.append($div_content);
-        $ret = $container;
-        break;
-
-      default: // set data to nav to use in the component
-        if ($nav && $nav.length) {
-          // refresh made
-        } else {
-          $nav = $('<xu-nav>');
-          $container.append($nav);
-          func.UI.component.init_xu_nav($container, $nav);
-        }
-
-        $nav.data().xuData.$div = $div_content;
-
-        await $nav[0].setRoot('xu-root-component-' + SESSION_ID);
-        $ret = $container;
-        break;
-    }
-    return $ret;
-  };
-
-  if (!(await init())) return;
-  debug();
-  const fx = {
-    widget: async function () {
-      var _session = SESSION_OBJ[SESSION_ID];
-
-      var exist_elm_obj = get_element_info();
-      var $div = exist_elm_obj.div;
-      if (!exist_elm_obj.div) {
-        $div = func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, 'widget_wrapper', null, null, null, null);
-
-        //////////////////////////
-
-        let plugin_name = prop['xu-widget'],
-          method = prop['xu-method'],
-          dsP = paramsP.dsSessionP,
-          propsP = prop,
-          sourceP = 'widgets';
-
-        // const set_SYS_GLOBAL_OBJ_WIDGET_INFO = async function (docP) {
-        //   var obj = _.clone(docP);
-        //   obj.date = await func.utils.get_dateTime(
-        //     SESSION_ID,
-        //     "SYS_DATE",
-        //     docP.date
-        //   );
-        //   obj.time = await func.utils.get_dateTime(
-        //     SESSION_ID,
-        //     "SYS_TIME",
-        //     docP.date
-        //   );
-
-        //   var datasource_changes = {
-        //     [0]: {
-        //       ["data_system"]: {
-        //         ["SYS_GLOBAL_OBJ_WIDGET_INFO"]: obj,
-        //       },
-        //     },
-        //   };
-        //   await func.datasource.update(SESSION_ID, datasource_changes);
-        // };
-        const call_plugin_api = async function (plugin_nameP, dataP) {
-          return await func.utils.call_plugin_api(SESSION_ID, plugin_nameP, dataP);
-        };
-        const report_error = function (descP, warn) {
-          func.utils.debug.log(SESSION_ID, _session.DS_GLB[dsP].prog_id + '_' + _session.DS_GLB[dsP].callingMenuId, {
-            module: 'widgets',
-            action: 'Init',
-            source: sourceP,
-            prop: descP,
-            details: descP,
-            result: null,
-            error: warn ? false : true,
-            fields: null,
-            type: 'widgets',
-            prog_id: _session.DS_GLB[dsP].prog_id,
-          });
-        };
-        const get_fields_data = async function (fields, props) {
-          const report_error = function (descP, warn) {
-            func.utils.debug.log(SESSION_ID, _session.DS_GLB[dsP].prog_id + '_' + _session.DS_GLB[dsP].callingMenuId, {
-              module: 'widgets',
-              action: 'Init',
-              source: sourceP,
-              prop: descP,
-              details: descP,
-              result: null,
-              error: warn ? false : true,
-              fields: null,
-              type: 'widgets',
-              prog_id: _session.DS_GLB[dsP].prog_id,
-            });
-          };
-          const get_property_value = async function (fieldIdP, val) {
-            if (!val) return;
-            var value = props[fieldIdP] || (typeof val.defaultValue === 'function' ? val?.defaultValue?.() : val?.defaultValue);
-            if (val.render === 'eventId') {
-              value = props?.[fieldIdP]?.event;
-            }
-
-            if (props[`xu-exp:${fieldIdP}`]) {
-              value = (await func.expression.get(SESSION_ID, props[`xu-exp:${fieldIdP}`], dsP, 'widget property')).result;
-            }
-
-            return func.common.get_cast_val(
-              SESSION_ID,
-              'widgets',
-              fieldIdP,
-              val.type, //val.type !== "string" || val.type !== "number" ? "string" : val.type,
-              value,
-              null,
-            );
-          };
-          var data_obj = {};
-          var return_code = 1;
-          // $.each(fields, function (key, val) {
-          for await (const [key, val] of Object.entries(fields)) {
-            data_obj[key] = await get_property_value(key, val);
-            if (!data_obj[key] && val.mandatory) {
-              return_code = -1;
-              report_error(`${key} is a mandatory field.`);
-              break;
-            }
-            // console.log(val);
-          }
-          for await (const key of ['xu-bind']) {
-            data_obj[key] = await get_property_value(key, props[key]);
-          }
-
-          return { code: return_code, data: data_obj };
-        };
-
-        const load_css_style = function () {
-          let path = get_path('style.css');
-          func.utils.load_css_on_demand(path);
-        };
-
-        const get_path = function (resource) {
-          if (_session.worker_type === 'Dev') {
-            return `../../plugins/${plugin_name}/${resource}`;
-          }
-          return `https://${_session.domain}/plugins/${plugin_name}/${resource}?gtp_token=${_session.gtp_token}&app_id=${_session.app_id}`;
-        };
-        const _plugin = APP_OBJ[_session.app_id]?.app_plugins_purchased?.[plugin_name];
-        const index = await func.utils.get_plugin_resource(SESSION_ID, plugin_name, `${_plugin.manifest['index.mjs'].dist ? 'dist/' : ''}index.mjs`);
-        const methods = index.methods;
-        if (methods && !methods[method]) {
-          return report_error('method not found');
-        }
-
-        const fields_ret = await get_fields_data(methods[method].fields, propsP);
-        if (fields_ret.code < 0) {
-          return report_error(fields_ret.data);
-        }
-        const fields = fields_ret.data;
-
-        let exclude_attributes = [];
-        for await (const [key, val] of Object.entries(propsP)) {
-          if (typeof fields[key] !== 'undefined' || typeof fields[`xu-exp:${key}`] !== 'undefined') {
-            exclude_attributes.push(key);
-          }
-        }
-
-        let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true, exclude_attributes);
-
-        $div.addClass('widget_wrapper'); // class get override in set_attributes_new
-
-        if (!APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name]) {
-          return report_error(`plugin ${plugin_name} not found`);
-        }
-
-        if (APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name].manifest['style.css'].exist) {
-          load_css_style();
-        }
-
-        const plugin_setup_ret = await func.utils.get_plugin_setup(SESSION_ID, plugin_name);
-        if (plugin_setup_ret.code < 0) {
-          return report_error(plugin_setup_ret);
-        }
-
-        const api_utils = await func.common.get_module(SESSION_ID, 'xuda-api-library.mjs', {
-          func,
-          glb,
-          SESSION_OBJ,
-          SESSION_ID,
-          APP_OBJ,
-          dsSession: paramsP.dsSessionP,
-          job_id: jobNoP,
-        });
-
-        const params = {
-          SESSION_ID,
-          method,
-          _session,
-          dsP,
-          sourceP,
-          propsP,
-          plugin_name,
-          $containerP: $div,
-          plugin_setup: plugin_setup_ret.data,
-
-          report_error,
-          call_plugin_api,
-          // set_SYS_GLOBAL_OBJ_WIDGET_INFO,
-          api_utils,
-        };
-
-        const fx = await func.utils.get_plugin_resource(SESSION_ID, plugin_name, `${_plugin.manifest['runtime.mjs'].dist ? 'dist/' : ''}runtime.mjs`);
-
-        if (_plugin?.manifest?.['runtime.mjs'].dist && _plugin?.manifest?.['runtime.mjs']?.css) {
-          const plugin_runtime_css_url = await func.utils.get_plugin_npm_cdn(SESSION_ID, plugin_name, 'dist/runtime.css');
-          func.utils.load_css_on_demand(plugin_runtime_css_url);
-        }
-
-        if (!fx[method]) {
-          throw `Method: ${method} does not exist`;
-        }
-        try {
-          await fx[method](fields, params);
-        } catch (err) {
-          func.utils.debug_report(SESSION_ID, `${plugin_name} widget`, err.message, 'E');
-        }
-      }
-      return $div;
-    },
-    [`xu-single-view`]: async function () {
-      var exist_elm_obj = get_element_info();
-      var $div = exist_elm_obj.div;
-
-      if (!exist_elm_obj.div) {
-        var $wrapper = $('<div>');
-        $div = func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, 'div', $wrapper, '');
-
-        if (!$div) return;
-
-        if (!REFRESHER_IN_PROGRESS && (paramsP.is_mobile_popover || paramsP.is_mobile_page)) {
-          close_all_modals();
-        }
-
-        $div.hover(
-          function (e) {
-            hover_in();
-          },
-          function (e) {
-            hover_out();
-          },
-        );
-      }
-
-      const ret = await iterate_child($div, nodeP, null, null, $div);
-      if (_.isEmpty($container.data().xuAttributes)) {
-        await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $container, true);
-      }
-
-      $.each($div.data().xuData, function (key, val) {
-        $container.data().xuData[key] = _.cloneDeep(val);
-      });
-      $.each($div.data().xuAttributes, function (key, val) {
-        $container.data().xuAttributes[key] = _.cloneDeep(val);
-      });
-
-      return await render_screen_type($div);
-    },
-    [`xu-multi-view`]: async function () {
-      var $div = $container;
-
-      if (!$div.data().xuData.node || !$div.data().xuData.node.children) {
-        $div.data().xuData.node = nodeP;
-      }
-
-      if (!$div.data().xuData.debug_info) {
-        $div.data().xuData.debug_info = {
-          id: nodeP.id,
-          parent_id: $container.data().xuData.ui_id,
-        };
-      }
-
-      const done = async function (continuous_idx) {
-        // const do_callback = async function ($div) {
-        //   // if ($root_container.data().xuData.progress_bar_circle) {
-        //   //   setTimeout(function () {
-        //   //     $.each(
-        //   //       $root_container.data().xuData.progress_bar_circle,
-        //   //       function (key, val) {
-        //   //         val.bar.set(parseFloat(val.value)); // Number from 0.0 to 1.0
-        //   //       }
-        //   //     );
-        //   //   }, 2000);
-        //   // }
-
-        //   if (paramsP.screenInfo.properties?.rtl) {
-        //     $div_content.attr('dir', 'rtl');
-        //   }
-
-        //   return $div;
-        // };
-        await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $container, true);
-
-        return await render_screen_type($div);
-      };
-
-      if (!REFRESHER_IN_PROGRESS && (paramsP.is_mobile_popover || paramsP.is_mobile_page)) {
-        close_all_modals();
-      }
-
-      const empty_result = async function () {
-        var content = prop.empty_result_content || '';
-
-        var res = await func.expression.get(
-          SESSION_ID,
-          content, // prop["xu-exp:empty_result_content"],
-          paramsP.dsSessionP,
-          'empty_result_content_EXP',
-          _ds.currentRecordId,
-        );
-        content = res.result;
-        // }
-
-        let empty_result_node = {
-          type: 'element',
-          id: crypto.randomUUID(),
-          content,
-          // :  content || (typeof content === "undefined" && "Empty results"),
-          tagName: 'div',
-          attributes: {},
-          children: [],
-        };
-
-        const ret = await func.UI.screen.render_ui_tree(SESSION_ID, $container, empty_result_node, parent_infoP, paramsP, jobNoP, null, 0, null, nodeP, null, $root_container);
-        await func.events.validate(SESSION_ID, 'record_not_found', paramsP.dsSessionP);
-        return await done(null);
-      };
-      var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP];
-
-      var continuous_idx = null;
-
-      if (!_ds.data_feed || _.isEmpty(_ds.data_feed.rows)) {
-        return await empty_result();
-      }
-
-      var i = 0;
-      for await (const [key, val] of Object.entries(_ds.data_feed.rows)) {
-        var node = JSON.parse(JSON.stringify(nodeP));
-
-        _ds.currentRecordId = val._ROWID;
-        const ret = await iterate_child($div, node, { continuous_idx }, null, $root_container);
-
-        if (_.isEmpty($container.data().xuAttributes)) {
-          await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $container, true);
-        }
-      }
-
-      return await done(continuous_idx);
-    },
-    [`xu-panel`]: async function () {
-      const done = async function ($new_div) {
-        if (!$container.data()?.xuData?.paramsP) {
-          return $container;
-        }
-        var $div_items = $div.data().xuData.node.children;
-
-        await func.UI.screen.panel_post_render_handler(SESSION_ID, $container, $new_div, nodeP, $div, jobNoP);
-
-        // TO FIX should be timeout
-        $container.data().xuData.node.children = $div_items;
-
-        return $container;
-      };
-
-      var $wrapper = $('<div>');
-      $div = func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, null, $wrapper, '');
-
-      let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div.clone(true), true, undefined, refreshed_ds);
-      if (ret.abort) {
-        // // program null
-        // if (ret.program_null) {
-        //   return render_screen_type($div);
-        // }
-
-        // render N
-        return (ret.$new_div = $('<template>').append($div));
-
-        // ret.$new_div = $("<template>").append($div);
-      }
-      let ret_done = await done(ret.$new_div);
-      return ret_done;
-    },
-  };
-
-  const draw_html_element = async function (element) {
-    const done = async function () {
-      return $div;
-    };
-    if (!element || element === 'script') return await done();
-    let str = '';
-
-    var $div = func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, element, null, str);
-
-    $div.hover(
-      function (e) {
-        hover_in($div);
-      },
-      function (e) {
-        hover_out();
-      },
-    );
-
-    let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true);
-    if (ret.abort) return await done();
-    // check if iterator made to prevent children render
-
-    const ret_iterate_child = await iterate_child($div, nodeP, parent_infoP, null, $root_container);
-    return await done();
-  };
-
-  if (nodeP.content && nodeP.attributes) {
-    nodeP.attributes['xu-content'] = nodeP.content;
-  }
-  if (nodeP.tagName === 'xu-widget') {
-    if (is_skeleton) return;
-    return await fx['widget']();
-  }
-  if (fx[nodeP.tagName]) {
-    return await fx[nodeP.tagName]();
-  }
-
-  return await draw_html_element(nodeP.tagName);
-};
-
-func.UI.screen.refresh_document_changes_for_realtime_update = async function (SESSION_ID, doc_change) {
-  let _session = SESSION_OBJ[SESSION_ID];
-  for (const [key, _ds] of Object.entries(_session.DS_GLB)) {
-    let prog_obj = await func.utils.VIEWS_OBJ.get(SESSION_ID, _ds.prog_id);
-    if (prog_obj?.progDataSource?.dataSourceRealtime && prog_obj?.progDataSource?.dataSourceTableId === doc_change.table_id) {
-      try {
-        // disabled in purpose to support create row
-
-        // const row_idx = func.common.find_ROWID_idx(_ds, doc_change.row_id);
-
-        // console.log(
-        //   "refresh_document_changes_for_realtime_update",
-        //   _ds.data_feed.rows[row_idx]
-        // );
-
-        if (!_ds.screen_params) continue;
-        if (_ds.screen_params.is_panelP) {
-          func.UI.screen.refresh_screen(SESSION_ID, null, key);
-        } else {
-          func.action.execute(SESSION_ID, 'act_refresh', _ds, null, null);
-        }
-      } catch (err) {
-        // console.error(err);
-      }
-    }
-  }
-};
- func.UI.component = {};
+          func.UI.component = {};
 
 func.UI.component.create_app_modal_component = function (
   SESSION_ID,