@xuda.io/runtime-bundle 1.0.1147 → 1.0.1148

package/js/xuda-runtime-bundle.js

@@ -30952,3949 +30952,7 @@ func.datasource.get_args_property_value = async function (SESSION_ID, dsSession,
 
   return _value;
 };
- func.UI.screen = {};
-func.UI.screen.init = async function (SESSION_ID, prog_id, sourceScreenP, callingDataSource_objP, $callingContainerP, triggerIdP, rowIdP, jobNoP, is_panelP, parameters_obj_inP, source_functionP, call_screen_propertiesP, refreshed_ds, parameters_raw_obj) {
-  if (!prog_id) return console.error('program is empty');
-  let screen_ret = await func.utils.get_screen_obj(SESSION_ID, prog_id);
-  if (!screen_ret) return console.error('program is not a screen object');
-  await func.UI.utils.init_ui_framework(SESSION_ID, prog_id);
-
-  let _session = SESSION_OBJ[SESSION_ID];
-
-  const screenInfo = _.cloneDeep(screen_ret);
-  // const $callingContainerP_data = $callingContainerP.clone(true)?.data();
-
-  var screen_type = source_functionP?.split('_')?.[1]; //|| (is_panelP && "panel");
-
-  var screenId = (glb.screen_num++).toString();
-
-  if (SCREEN_BLOCKER_OBJ[prog_id + (sourceScreenP ? '_' + sourceScreenP : '')]) {
-    const wait_for_SCREEN_BLOCKER_release = () => {
-      return new Promise((resolve) => {
-        var interval = setInterval(function () {
-          if (!SCREEN_BLOCKER_OBJ[prog_id + (sourceScreenP ? '_' + sourceScreenP : '')]) {
-            window.clearInterval(interval);
-            resolve();
-            // run_screen();
-          }
-        }, 5);
-      });
-    };
-    await wait_for_SCREEN_BLOCKER_release();
-  }
-
-  func.UI.utils.screen_blocker(true, prog_id + (sourceScreenP ? '_' + sourceScreenP : ''));
-
-  if ($callingContainerP && !_.isEmpty($callingContainerP)) $callingContainerP.data().xuData.screenInfo = screenInfo;
-
-  var $dialogDiv;
-  var $rootFrame;
-  var containerId;
-
-  var params = {
-    prog_id,
-    sourceScreenP,
-    $callingContainerP,
-    triggerIdP,
-    callingDataSource_objP,
-    rowIdP,
-    renderType: screenInfo.properties?.renderType,
-    parameters_obj_inP,
-    source_functionP,
-    is_panelP,
-    screen_type,
-    screenInfo,
-    call_screen_propertiesP,
-    parentDataSourceNoP: _session.DS_GLB?.[callingDataSource_objP?.dsSession]?.dsSession || callingDataSource_objP?.parentDataSourceNo || 0,
-    parameters_raw_obj,
-  };
-
-  switch (screen_type) {
-    case 'embed':
-      $dialogDiv = $('<div>')
-        .attr({
-          id: screenId,
-          ui_engine: UI_FRAMEWORK_INSTALLED,
-        })
-        .addClass('xu_embed_container')
-        .css({ display: 'contents' })
-        .data({
-          xuData: {
-            paramsP: params,
-            screenInfo: params.screenInfo,
-          },
-        });
-
-      let rootTagName = 'div';
-      if (typeof glb.SLIM_BUNDLE === 'undefined' && !glb.SLIM_BUNDLE) {
-        const ui_plugin_core = new UI_FRAMEWORK_PLUGIN.core();
-        rootTagName = ui_plugin_core?.rootTagName();
-      }
-
-      $rootFrame = $(`<${rootTagName}>`).data('xuData', {}).data('xuAttributes', {}).appendTo($dialogDiv);
-
-      $dialogDiv.appendTo($callingContainerP);
-      break;
-
-    case 'panel':
-      $dialogDiv = $callingContainerP;
-      $dialogDiv.data({
-        xuData: {
-          paramsP: params,
-          screenInfo: params.screenInfo,
-        },
-      });
-      $rootFrame = $dialogDiv;
-      break;
-
-    case 'page':
-    case 'modal':
-    case 'popover':
-      $dialogDiv = $('<div>');
-      $rootFrame = $('<div>').appendTo($dialogDiv);
-      $dialogDiv.appendTo('body');
-      break;
-
-    default:
-  }
-
-  params.containerIdP = $rootFrame.attr('id');
-  params.$container = $rootFrame;
-
-  containerId = 'container_' + params.screenInfo.properties?.id + '_' + screenId;
-
-  var data = {
-    note: ' ROOT container',
-    root: true,
-    screenId,
-    is_panelP,
-    prog_id,
-    screen_type,
-    container: '#' + containerId, // initiate container that hold the element
-  };
-  if (is_panelP) {
-    $rootFrame.data().xuData.rootFrame = data;
-  } else {
-    if (!$rootFrame.data().xuData) {
-      $rootFrame.data().xuData = {};
-    }
-    $rootFrame.attr('id', containerId).data().xuData.rootFrame = data;
-    $rootFrame.css('display', 'contents');
-  }
-
-  var node = JSON.parse(JSON.stringify(screen_ret.progUi));
-
-  func.UI.utils.indicator.screen.busy();
-
-  const ret = await func.datasource.create(SESSION_ID, prog_id, refreshed_ds, params.parentDataSourceNoP, $rootFrame.attr('id'), rowIdP, jobNoP, null, parameters_raw_obj, null, null, null, null, null, parameters_obj_inP);
-
-  var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[ret.dsSessionP];
-  _ds.screen_params = params;
-
-  params.dsSessionP = ret.dsSessionP;
-
-  func.UI.screen.update_SYS_OBJ_WIN_INFO(SESSION_ID, params.dsSessionP);
-
-  if (ret.dsSessionP >= 0) {
-    // Call from contact info screen
-    var viewDoc;
-    let view_ret = await func.utils.VIEWS_OBJ.get(SESSION_ID, SESSION_OBJ[SESSION_ID].DS_GLB[ret.dsSessionP].prog_id);
-    if (view_ret) {
-      viewDoc = view_ret;
-    }
-    if (!viewDoc?.progUi) {
-      return func.utils.alerts.invoke(SESSION_ID, 'system_msg', 'SYS_MSG_0780', params.renderType, ret.dsSessionP);
-    }
-    var node;
-    node = _.cloneDeep(viewDoc.progUi);
-    if (!node.length) return console.warn('ui node empty');
-    const ret_render_$container = await func.UI.screen.render_ui_tree(SESSION_ID, $rootFrame, node[0], null, params, jobNoP, null, null, null, null, null, $rootFrame);
-
-    // $(".skeleton_wrapper").remove();
-
-    // fix for svg // deprecated Aug 12 25
-
-    // const fix_svg = function () {
-    //   let $svg = $('svg');
-    //   $.each($svg, function (key, elm) {
-    //     elm.outerHTML = elm.outerHTML;
-    //   });
-    // };
-    // setTimeout(function () {
-    //   fix_svg();
-    // }, 200);
-
-    func.UI.utils.indicator.screen.normal();
-
-    let ret_screen_loading = await func.UI.screen.screen_loading_done(SESSION_ID, params, ret_render_$container, jobNoP);
-
-    // for (const [container_xu_ui_id, val] of Object.entries(UI_WORKER_OBJ.pending_for_viewport_render)) {
-    //   const height = val.base_$div.height();
-    //   if (height) {
-    //     const total_height = height * val.data.length || 1;
-    //     if (total_height > val.$container.height()) {
-    //       val.$container.css('height', height * val.data.length);
-    //     }
-    //   }
-    //   debugger;
-    // }
-
-    return ret_screen_loading;
-  }
-};
-
-func.UI.screen.update_SYS_OBJ_WIN_INFO = function (SESSION_ID, dsNoP) {
-  var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[dsNoP];
-  if (!_ds) return;
-  if (!_ds.data_system) {
-    _ds.data_system = {};
-  }
-
-  _ds.data_system['SYS_STR_WIN_ID'] = _ds.tree_obj?.id;
-  _ds.data_system['SYS_STR_WIN_NAME'] = _ds.tree_obj?.menuName;
-  if (SESSION_OBJ[SESSION_ID].DS_GLB[dsNoP].mode) {
-    _ds.data_system['SYS_STR_WIN_MODE'] = SESSION_OBJ[SESSION_ID].DS_GLB[dsNoP].mode;
-  }
-  // _ds.data_system["SYS_OBJ_WIN_INFO"] = func.UI.screen.get_info(
-  //   SESSION_ID,
-  //   dsNoP
-  // );
-  // get all top fields into json
-};
-
-func.UI.screen.validate_exit_events = async function (SESSION_ID, div_data_paramsP, forceP) {
-  return new Promise(async (resolve) => {
-    await func.events.validate(SESSION_ID, 'on_exit', div_data_paramsP.dsSessionP, null, 'screen');
-
-    var interval = setInterval(function () {
-      if (!SESSION_OBJ[SESSION_ID].WORKER_OBJ.jobs.length || forceP) {
-        clearInterval(interval);
-        resolve();
-      }
-    }, 5);
-  });
-};
-
-func.UI.screen.call_embed = function (SESSION_ID, prog) {
-  $('#embed_' + SESSION_ID)
-    .empty()
-    .data().xuData.screenInfo = null;
-
-  _.forEach(SESSION_OBJ[SESSION_ID].DS_GLB, function (val, key) {
-    if (key) func.datasource.del(SESSION_ID, key);
-  });
-  func.UI.main.embed_prog_execute(SESSION_ID, prog);
-};
-func.UI.screen.refresh_xu_attributes = async function (SESSION_ID, fields_arr, jobNoP, $elm_to_search, dsSession_changed, avoid_xu_for_refresh, trigger) {
-  if (trigger !== 'click') {
-    if (!_.isEmpty(SCREEN_BLOCKER_OBJ)) {
-      // let dom  to finish
-      setTimeout(() => {
-        func.UI.screen.refresh_xu_attributes(SESSION_ID, fields_arr, jobNoP, $elm_to_search, dsSession_changed);
-      }, 100);
-      return;
-    }
-  }
-
-  UI_WORKER_OBJ.cache = {};
-  const _session = SESSION_OBJ[SESSION_ID];
-  if (glb.DEBUG_MODE) {
-    console.info('========= xu-attributes refresh info ==============');
-    console.info('fields_arr:', fields_arr);
-  }
-
-  var selectors = {};
-  var search_from = 'body';
-  var new_job = jobNoP;
-
-  if ($elm_to_search) {
-    search_from = '#' + $elm_to_search.attr('id');
-  }
-  const get_selectors = function () {
-    $.each(fields_arr, function (key_field, val_field) {
-      $(search_from)
-        .find('*')
-        .filter(function () {
-          //  check if the changed field include in the calling in parameters
-          const elm_data = $(this).data();
-          if (!elm_data.xuData) return true;
-
-          if (typeof dsSession_changed !== 'undefined' && elm_data.xuData.paramsP && elm_data.xuData.paramsP.dsSessionP < dsSession_changed) return true;
-
-          let attr = [];
-
-          const validate_param_in = function (exp, without_var) {
-            let exp_val_for_parameter_in_validation;
-            if (typeof exp === 'string') exp_val_for_parameter_in_validation = exp;
-            if (typeof exp === 'object') exp_val_for_parameter_in_validation = JSON.stringify(exp);
-            if (!exp_val_for_parameter_in_validation) return;
-            if (!exp.includes('@')) return;
-            if (_.isEmpty(elm_data?.xuData?.paramsP?.parameters_raw_obj)) return;
-
-            for (const [param_key, param_val] of Object.entries(elm_data?.xuData?.paramsP?.parameters_raw_obj)) {
-              if (!param_val.includes('@')) continue;
-              exp_val_for_parameter_in_validation = exp_val_for_parameter_in_validation.replaceAll((without_var ? '' : '@') + param_key, param_val);
-            }
-            return exp_val_for_parameter_in_validation?.includes?.((without_var ? '' : '@') + val_field);
-          };
-
-          $.each(elm_data?.xuAttributes, function (key, val) {
-            if (typeof val !== 'string' && typeof val !== 'object') return true;
-            if (typeof val === 'string' && !val?.includes('@') && key !== 'xu-bind' && key !== 'xu-for') return true;
-            if (key.substr(0, 3) !== 'xu-') return true;
-
-            if (key === 'xu-bind' || key === 'xu-for') {
-              if (val?.includes?.(val_field) || validate_param_in(val, true)) {
-                attr.push(key);
-              }
-              return true;
-            }
-
-            // if (key === 'xu-for') {
-            //   // match static value for xu-for
-            //   if (val?.includes?.(val_field) || validate_param_in(val)) {
-            //     attr.push(key);
-            //   }
-            //   return true;
-            // }
-
-            // console.log(key, val);
-
-            if (key.substr(0, 6) === 'xu-exp' && key.substr(6, 1) === ':') {
-              if (val?.includes?.('@' + val_field) || validate_param_in(val)) {
-                attr.push(key);
-              }
-              return true;
-            }
-
-            if (key.substr(0, 8) === 'xu-class') {
-              try {
-                const classes_string = val;
-                const classes_obj = _.isString(classes_string) ? JSON.parse(classes_string) : _.defaults(classes_string, {});
-
-                $.each(classes_obj, function (cla, cond) {
-                  if (cond.includes('@' + val_field) || validate_param_in(cond)) {
-                    attr.push('xu-class');
-                    return false;
-                  }
-                });
-                if (attr.length) {
-                  return false;
-                }
-              } catch (e) {
-                console.warn('parse error:' + val);
-              }
-            }
-
-            if (key === 'xu-ui-plugin') {
-              const plugin_str = JSON.stringify(val);
-              if (plugin_str.includes('@' + val_field) || validate_param_in(plugin_str)) {
-                attr.push(key);
-                return false;
-              }
-            }
-          });
-
-          // const selector_id = glb.new_xu_render ? $(this).data()?.xuData?.ui_id : $(this).data()?.xuData?.xu_id;
-
-          const selector_id = $(this).attr('xu-ui-id');
-
-          if (attr.length) {
-            selectors[selector_id] = selectors[selector_id];
-
-            if (!selectors[selector_id]) {
-              selectors[selector_id] = { attributes: [], $elm: $(this) };
-            }
-            attr.forEach(function (value) {
-              if (!selectors[selector_id].attributes.includes(value)) selectors[selector_id].attributes.push(value);
-            });
-          }
-        });
-    });
-  };
-
-  get_selectors();
-  // console.log('selectors>>>>', selectors);
-
-  for await (let [elem_key, elem_val] of Object.entries(selectors)) {
-    if (elem_key === 'length') break;
-
-    if (!elem_val.$elm.data().xuData) continue;
-    if (elem_val.$elm.data().xuData.pending_to_delete) continue;
-
-    const add_execute_queue = async function (type) {
-      if (!elem_val.$elm?.data?.()?.xuData) return;
-      try {
-        const obj = {
-          ui_type: elem_val.$elm.data().xuData.ui_type,
-          SESSION_ID,
-          fields_arr,
-          elem_key,
-          elem_val,
-        };
-
-        new_job = await func.UI.worker.add_to_queue(SESSION_ID, 'gui event', type, obj, new_job, elem_val.$elm);
-
-        if (glb.DEBUG_MODE) {
-          console.log(type + '>>>', new_job, obj);
-        }
-      } catch (error) {
-        debugger;
-      }
-    };
-    //////////// process render first ///////////////
-
-    var performed_render = undefined;
-
-    if (!elem_val?.$elm?.data()?.xuAttributes) continue;
-
-    if (elem_val.attributes.includes('xu-exp:xu-render')) {
-      var res = await func.expression.get(SESSION_ID, elem_val.$elm.data().xuAttributes['xu-exp:xu-render'], elem_val.$elm.data().xuData.paramsP.dsSessionP, 'UI Property EXP', elem_val.$elm.data().xuData.recordid);
-
-      var attr_value = await func.common.get_cast_val(SESSION_ID, 'refresh xu-attributes', 'xu-render', 'bool', res.result);
-
-      if (!attr_value && elem_val.$elm[0].tagName === 'XURENDER') continue; //  bypass job
-
-      if (attr_value && elem_val.$elm[0].tagName !== 'XURENDER') {
-        await add_execute_queue('execute_xu_all_attributes');
-
-        continue; //  bypass render job
-      }
-
-      if (!elem_val?.$elm?.data()?.xuData?.ui_type) continue;
-
-      // RENDER = false  handler
-      const obj = {
-        ui_type: elem_val.$elm.data().xuData.ui_type,
-        SESSION_ID,
-        elem_key,
-        elem_val,
-        fields_arr,
-        attr_value,
-      };
-      new_job = jobNoP;
-      new_job = await func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'execute_xu_render_attributes', obj, new_job, elem_val.$elm, elem_val.$elm.data().xuData.paramsP.dsSessionP);
-      performed_render = true;
-
-      // mark children items ignore list
-      $.each(elem_val.$elm.find('*'), function (key, val) {
-        if ($(val).data().xuData) {
-          $(val).data().xuData.pending_to_delete = true;
-        }
-      });
-
-      if (glb.DEBUG_MODE) {
-        console.info('execute_xu_render_attributes', obj);
-      }
-    }
-
-    if (performed_render || elem_val.$elm[0].tagName === 'XURENDER') continue; //  bypass job
-
-    if (elem_val.attributes.includes('xu-exp:xu-for') || elem_val.attributes.includes('xu-for')) continue;
-
-    add_execute_queue('execute_xu_all_attributes');
-  }
-
-  // xu-for
-  selectors = {};
-  get_selectors();
-  // console.log('selectors', selectors);
-  let refreshed_ids = [];
-  // handle xu-for
-  let parent_element_ui_id;
-  for await (let [elem_key, elem_val] of Object.entries(selectors)) {
-    if (elem_key === 'length') break;
-
-    if (!elem_val.$elm.data().xuData) continue;
-    if (elem_val.$elm.data().xuData.pending_to_delete) continue;
-
-    if (!elem_val.attributes.includes('xu-exp:xu-for') && !elem_val.attributes.includes('xu-for')) continue;
-
-    let _parent_element_ui_id;
-    if (elem_val?.$elm?.data()?.xuPanelData) {
-      // handle li panel
-      _parent_element_ui_id = elem_val?.$elm?.data()?.xuPanelData?.parent_element_ui_id;
-    } else {
-      // handle regular li
-      _parent_element_ui_id = elem_val?.$elm?.data()?.xuData?.parent_element_ui_id;
-    }
-
-    if (!parent_element_ui_id || _parent_element_ui_id != parent_element_ui_id) {
-      parent_element_ui_id = _parent_element_ui_id;
-
-      const _$elem = $(`[xu-ui-id=${parent_element_ui_id}]`);
-      const _elem_key = parent_element_ui_id;
-      const _elem_val = { attributes: [], $elm: _$elem };
-
-      $.each(_$elem.data()?.xuAttributes, function (key, val) {
-        _elem_val.attributes.push(key);
-      });
-      const obj = {
-        ui_type: _elem_val.$elm.data().xuData.ui_type,
-        SESSION_ID,
-        elem_key: _elem_key,
-        elem_val: _elem_val,
-        fields_arr,
-        xu_for_item_id: elem_val?.$elm?.data()?.xuPanelData ? elem_val?.$elm?.data()?.xuPanelData.node.id : elem_val?.$elm?.data().xuData.nodeid,
-      };
-      if (avoid_xu_for_refresh) return;
-      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);
-
-      refreshed_ids.push(parent_element_ui_id);
-
-      if (glb.DEBUG_MODE) {
-        console.info('execute_xu_for', obj);
-      }
-    }
-  }
-
-  /////////// xu-for for non displayed elements ////////////
-  const iterate_field_in_progUi = async function (progUi, field_id, panel_val) {
-    let found;
-    const iterate_progUi = async function (node, node_id) {
-      for (let item of node) {
-        if (!_.isEmpty(item.attributes)) {
-          const parent_element_ui_id = node_id;
-          // const _$elem = $(`[xu-node-id="${parent_element_ui_id}"]`);
-          for await (const [attr, val] of Object.entries(item.attributes)) {
-            if (attr === 'xu-exp:xu-for' || attr === 'xu-for') {
-              if (val?.includes(field_id)) {
-                // const parent_element_ui_id = node_id;
-                // debugger;
-                // let _$elem = $(`[xu-ui-id^=${parent_element_ui_id}]`);
-                // let _$elem = $(`[xu-node-id=${parent_element_ui_id}]`);
-                const _$elem = func.UI.utils.find_in_element_data('xuData', $(SESSION_OBJ[SESSION_ID].root_element), 'nodeid', parent_element_ui_id);
-                // const _elem_key = parent_element_ui_id;
-                const _elem_key = _$elem.attr('xu-ui-id');
-                const _elem_val = { attributes: [], $elm: _$elem };
-                if (!_$elem?.length) continue;
-
-                if (refreshed_ids.includes(_$elem.attr('xu-ui-id'))) break;
-
-                $.each(_$elem.data()?.xuAttributes, function (key, val) {
-                  _elem_val.attributes.push(key);
-                });
-                const obj = {
-                  ui_type: _elem_val.$elm.data().xuData.ui_type,
-                  SESSION_ID,
-                  elem_key: _elem_key,
-                  elem_val: _elem_val,
-                  fields_arr,
-                  xu_for_item_id: item.id,
-                };
-                if (avoid_xu_for_refresh) return;
-                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);
-
-                if (glb.DEBUG_MODE) {
-                  console.info('node execute_xu_for', obj, panel_val);
-                }
-
-                break;
-              }
-            }
-
-            // if (glb.new_xu_render) {
-            //   if (attr === 'xu-exp:xu-render') {
-            //     //|| attr === 'xu-render'
-            //     for await (const [key, val] of Object.entries(_$elem)) {
-            //       if (key === 'length') break;
-            //       if ($(val).data().xuData.node) {
-            //         for await (const node of $(val).data().xuData.node.children) {
-            //           if (item.id !== node.id) continue;
-
-            //           if (typeof node.xu_render_made !== 'undefined' && !node.xu_render_made) {
-            //             const node_data = UI_WORKER_OBJ.xu_render_cache[node.xu_render_xu_ui_id + node.xu_render_cache_id];
-            //             parent_element_ui_id;
-            //             const elem_key = node.xu_render_xu_ui_id;
-            //             const elem_val = { attributes: [attr], $elm: node_data.$div, data: node_data.data };
-            //             if (!elem_val.data?.xuData) continue;
-            //             elem_val.data.xuData.parent_element_ui_id = $(val).attr('xu-ui-id');
-            //             var res = await func.expression.get(SESSION_ID, elem_val.data.xuAttributes['xu-exp:xu-render'], elem_val.data.xuData.paramsP.dsSessionP, 'UI Property EXP', elem_val.data.xuData.recordid);
-
-            //             var attr_value = await func.common.get_cast_val(SESSION_ID, 'refresh xu-attributes', 'xu-render', 'bool', res.result);
-            //             try {
-            //               const obj = {
-            //                 ui_type: elem_val.data.xuData.ui_type,
-            //                 SESSION_ID,
-            //                 elem_key,
-            //                 elem_val,
-            //                 fields_arr,
-            //                 attr_value,
-            //               };
-            //               func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'execute_xu_render_attributes', obj, new_job, elem_val.$elm, elem_val.data.xuData.paramsP.dsSessionP);
-            //             } catch (error) {
-            //               debugger;
-            //             }
-            //           }
-            //         }
-            //       }
-            //     }
-            //   }
-            // }
-          }
-        }
-        if (found) break;
-
-        if (item.children) {
-          await iterate_progUi(item.children, item.id);
-        }
-      }
-    };
-    await iterate_progUi(progUi);
-    return found;
-  };
-
-  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);
-
-  for await (const field_id of fields_arr) {
-    // run root
-    if ($xu_embed_container.length) {
-      const progUi = $xu_embed_container?.data()?.xuData?.screenInfo?.progUi;
-      if (progUi) {
-        await iterate_field_in_progUi(progUi, field_id);
-      }
-    }
-    // run panels
-    for await (const [panel_wrapper_element_ui_id, panel_val] of Object.entries(panels_obj)) {
-      await iterate_field_in_progUi(panel_val.progUi, field_id, panel_val);
-    }
-  }
-
-  func.events.delete_job(SESSION_ID, jobNoP);
-
-  if (glb.DEBUG_MODE) {
-    console.info('===================================================');
-  }
-};
-
-func.UI.screen.refresh_screen = async function (SESSION_ID, fields_changed_arr, datasource_changed, fields_changed_datasource) {
-  var found, refresh_reason, refresh_details;
-  const validate_change = function (prog_doc, panelXuAttributes, skip_ui_check) {
-    found = null;
-    refresh_reason = null;
-    refresh_details = null;
-    const progDataSource_str = JSON.stringify(prog_doc.progDataSource);
-    for (const field_id of fields_changed_arr) {
-      // get panel attributes
-      const _attributes = panelXuAttributes || {};
-
-      // detect if program changed
-      found = _attributes['xu-exp:program']?.includes('@' + field_id);
-
-      if (found) {
-        refresh_reason = `program ${_attributes['xu-exp:program']} ${field_id} changed `;
-        refresh_details = _attributes;
-        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) {
-            refresh_reason = `field ${field_id} in progDataSource parameter_in changed`;
-            refresh_details = prog_doc?.progDataSource;
-
-            break;
-          }
-          if (!skip_ui_check) {
-            found = func.UI.find_field_in_progUi_attributes(prog_doc.progUi, parameter_in_field_id, 'xu-for').length;
-
-            if (found) {
-              refresh_reason = `field ${field_id} in progUi xu-for parameter_in changed`;
-              refresh_details = found;
-
-              break;
-            }
-          }
-        }
-      }
-
-      if (found) break;
-
-      // search field changed in the target program's progDataSource  // @code
-      found = progDataSource_str?.includes('@' + field_id);
-      if (found) {
-        refresh_reason = `field ${field_id} in progDataSource changed`;
-        refresh_details = prog_doc?.progDataSource;
-
-        break;
-      }
-      if (!skip_ui_check) {
-        found = func.UI.find_field_in_progUi_attributes(prog_doc.progUi, field_id, 'xu-for').length;
-        if (found) {
-          refresh_reason = `field ${field_id} in progUi xu-for changed`;
-          refresh_details = found;
-
-          break;
-        }
-      }
-
-      if (found) {
-        break;
-      }
-    }
-  };
-
-  // check the main program
-  if (fields_changed_datasource) {
-    const _session = SESSION_OBJ[SESSION_ID];
-    const _ds = _session.DS_GLB[fields_changed_datasource];
-    const prog_doc = await func.utils.DOCS_OBJ.get(SESSION_ID, _ds.prog_id);
-    if (prog_doc.progUi) {
-      validate_change(prog_doc, null, true);
-      if (found) {
-        const $elm = $(`#container_${_ds.prog_id}_0`);
-        if ($elm?.length) {
-          const elm_data = $elm.data();
-          const $wrapper = $elm.parent();
-
-          const refreshed_ds = _ds.dsSession;
-
-          $elm.empty();
-          if ($elm.data()) {
-            const new_$div = await func.UI.screen.render_ui_tree(
-              SESSION_ID,
-              $elm, // the wrapper
-              _.cloneDeep($elm.data().xuData.node), // the xu-panel node
-              {},
-              elm_data.xuData.paramsP, // the wrapper params
-              null,
-              null,
-              elm_data.xuData.key, // the wrapper key
-              refreshed_ds, // the refreshed_ds
-              elm_data.xuData.parent_node, // the wrapper parent node
-              null,
-              elm_data.xuData.$root_container, // the wrapper root container
-            );
-
-            if (glb.DEBUG_MODE) {
-              console.info('========= refresh main info ==============');
-              console.info('reason:', refresh_reason);
-              console.info('element:', $elm);
-              console.info('==========================================');
-            }
-
-            return;
-          }
-        }
-      }
-    }
-  }
-
-  const panels_obj = await func.UI.utils.get_panels_wrapper_from_dom(SESSION_ID, $(SESSION_OBJ[SESSION_ID].root_element), false);
-
-  for await (const [parent_element_ui_id, panel_val] of Object.entries(panels_obj)) {
-    // const progDataSource_str = JSON.stringify(panel_val.prog_doc.progDataSource);
-    if (!panel_val.$panel_div?.data()?.xuData) continue;
-
-    if (panel_val.$panel_div.data().xuData.pending_to_delete) continue;
-
-    if (fields_changed_arr) {
-      if (fields_changed_datasource && panel_val._ds.dsSession <= Number(fields_changed_datasource)) {
-        continue;
-      }
-      validate_change(panel_val.prog_doc, panel_val?.panelXuAttributes);
-    }
-
-    if (datasource_changed) {
-      if (panel_val._ds.dsSession == datasource_changed) {
-        refresh_reason = `panel datasource ${datasource_changed} changed`;
-        refresh_details = '';
-
-        found = true;
-      }
-    }
-    if (found) {
-      UI_WORKER_OBJ.cache = {};
-      const _session = SESSION_OBJ[SESSION_ID];
-      if (glb.DEBUG_MODE) {
-        console.info('========= refresh info ==============');
-        console.info('reason:', refresh_reason);
-        console.info('details:', refresh_details);
-        console.info('panel:', panel_val);
-        console.info('=====================================');
-      }
-      const $div_elm = panel_val.$panel_div;
-      const wrapper_data = $div_elm.data();
-
-      if (_.isEmpty(wrapper_data)) continue;
-
-      try {
-        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();
-        });
-
-        let refreshed_ds;
-        // check if ds exist and deleted by garbage collector
-
-        if (_session.DS_GLB[panel_val._ds.dsSession]) {
-          refreshed_ds = panel_val._ds.dsSession;
-        }
-        for await (const item of wrapper_data.xuData.node_org.children) {
-          if (item.tagName !== 'xu-panel') continue;
-
-          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();
-        });
-      } catch (error) {
-        debugger;
-      }
-      // continue;
-    }
-  }
-};
-
-const get_params_obj_new = async function (SESSION_ID, prog_id, nodeP, dsSession) {
-  const _prog = await func.utils.VIEWS_OBJ.get(SESSION_ID, prog_id);
-  if (!_prog) return;
-
-  // get in parameters
-  let params_res = {},
-    params_raw = {};
-  if (_prog?.properties?.progParams) {
-    for await (const [key, val] of Object.entries(_prog.properties.progParams)) {
-      if (!['in', 'out'].includes(val.data.dir)) continue;
-
-      if (nodeP.attributes) {
-        if (nodeP.attributes[val.data.parameter]) {
-          params_res[val.data.parameter] = nodeP.attributes[val.data.parameter];
-        } else if (nodeP.attributes[`xu-exp:${val.data.parameter}`]) {
-          if (val.data.dir == 'out') {
-            // only reference
-            params_res[val.data.parameter] = nodeP.attributes[`xu-exp:${val.data.parameter}`].replaceAll('@', '');
-          } else {
-            // in parameter
-            let ret = await func.expression.get(SESSION_ID, nodeP.attributes[`xu-exp:${val.data.parameter}`], dsSession, 'parameters');
-            params_res[val.data.parameter] = ret.result;
-            params_raw[val.data.parameter] = nodeP.attributes[`xu-exp:${val.data.parameter}`];
-          }
-        }
-        continue;
-      }
-      console.warn(`Warning: Program ${_prog.properties.menuName} expected In parameter: ${val.data.parameter} but received null instead`);
-    }
-  }
-  return { params_res, params_raw };
-};
-
-func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, xu_func, $elm, val, is_init, refreshed_ds) {
-  if (is_skeleton) return;
-
-  // console.log(nodeP.id, xu_func, val);
-  var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP];
-  const tag_fx = {
-    [`xu-panel`]: {
-      program: async function ($elm, val) {
-        var ret = {};
-        var _session = SESSION_OBJ[SESSION_ID];
-        var _ds = _session.DS_GLB[paramsP.dsSessionP];
-        const init_program = async function () {
-          async function render_panel() {
-            const prog_id = val.value?.prog || val.value;
-            const params_obj = await get_params_obj_new(SESSION_ID, prog_id, nodeP, paramsP.dsSessionP);
-            let ret_panel = await func.UI.screen.init(SESSION_ID, prog_id, paramsP.screenId, _ds, $elm, null, _ds.currentRecordId, null, true, params_obj.params_res, 'initXu_panel', undefined, prog_id !== _ds.prog_id ? null : refreshed_ds, params_obj.params_raw);
-            ret = { $new_div: ret_panel };
-            if ($container.data().xuData) {
-              $container.data().xuData.xuPanelProps = $elm.data().xuAttributes;
-              $container.data().xuData.xuPanelData = ret_panel.data();
-            }
-            return ret;
-          }
-
-          if (!val.value) {
-            val.value = '_empty_panel_program';
-          }
-
-          ret = await render_panel();
-
-          return ret;
-        };
-        const alter_program = async function () {
-          var _session = SESSION_OBJ[SESSION_ID];
-          var _ds = _session.DS_GLB[paramsP.dsSessionP];
-
-          /////////////////
-          async function render_panel() {
-            //   // if (!cache_str) {
-            //   //   await update_container(screen_ready_function);
-            //   // }
-            //   // if (cache_str && !CACHE_PROG_UI[cache_str]) {
-            //   //   await update_container(screen_ready_function);
-            //   //   save_cache();
-            //   // }
-            //   // if (callback) callback($div);
-            //   // $container.data().xuData.node.children =
-            //   //   $div.data().xuData.node.children;
-            //   // //swiper-wrapper
-            //   // var restore_slides_elements = async function () {
-            //   //   if ($tmp_div.children().length) {
-            //   //     $tmp_div
-            //   //       .find(".swiper-wrapper")
-            //   //       .empty()
-            //   //       .append($new_div.children());
-            //   //     $new_div.append($tmp_div.children());
-            //   //   }
-            //   // };
-            //   // // console.log($tmp_div);
-            //   // await restore_slides_elements();
-            //   // // CHANGE_PANEL_BUSY = false;
-            //   // func.events.delete_job(SESSION_ID, jobNo);
-            // };
-            const program = val.value?.prog || val.value;
-            var $wrapper = $('<div>');
-            var $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, nodeP.attributes, null, null, null, $wrapper, '');
-            const params_obj = await get_params_obj_new(SESSION_ID, program, nodeP, paramsP.dsSessionP);
-            let ret_init = await func.UI.screen.init(SESSION_ID, program, paramsP.screenId, _ds, $div, null, _ds.currentRecordId, jobNoP, true, params_obj.params_res, 'alterXu_panel', undefined, undefined, params_obj.params_raw);
-            ret = {
-              $new_div: ret_init,
-              abort: true,
-            };
-            await func.UI.screen.panel_post_render_handler(SESSION_ID, $elm, $new_div, nodeP, $div.clone(true), jobNoP);
-
-            return ret;
-          }
-          if (!val.value) {
-            return { abort: true };
-          }
-          await render_panel();
-          return ret;
-        };
-
-        if (is_init) {
-          let ret = await init_program();
-          return ret;
-        }
-        return alter_program();
-      },
-
-      'xu-render': async function ($elm, val) {
-        let ret = await common_fx['xu-render']($elm, val, true);
-        return ret;
-      },
-      'xu-ref': async function ($elm, val) {
-        let ret = await common_fx['xu-ref']($container, val, $container.data().xuData.xuPanelData.xuData.paramsP.dsSessionP);
-        return ret;
-      },
-    },
-    [`xu-teleport`]: {
-      to: async function ($elm, val) {
-        if (!glb.new_xu_render) {
-          if (val.value) {
-            // parent_infoP.is_xu_teleport;
-            if ($elm?.parent()?.data()?.xuData?.length) {
-              $elm.parent().data('xuTeleportData', []);
-              for (const [key, node] of Object.entries(nodeP.children)) {
-                const $teleport_elm = await func.UI.screen.render_ui_tree(SESSION_ID, $(val.value), node, parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, node, null, $root_container);
-
-                $elm.parent().data().xuTeleportData.push($teleport_elm.attr('xu-ui-id'));
-                $teleport_elm.attr('xu-teleport-parent-id', $elm.parent().attr('xu-ui-id'));
-              }
-              $elm.remove();
-            } else {
-              $elm.data('xuTeleportData', []).attr('hidden', true);
-              for (const [key, node] of Object.entries(nodeP.children)) {
-                const $to_container = $(val.value);
-                if (!$to_container?.length) {
-                  return console.error(`container ${val.value} for xuTeleportData not found`);
-                }
-                const $teleport_elm = await func.UI.screen.render_ui_tree(SESSION_ID, $to_container, node, parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, node, null, $root_container);
-
-                $elm.data().xuTeleportData.push($teleport_elm.attr('xu-ui-id'));
-                $teleport_elm.attr('xu-teleport-parent-id', $elm.attr('xu-ui-id'));
-              }
-            }
-          }
-          return { abort: true };
-        }
-
-        if (val.value) {
-          // // parent_infoP.is_xu_teleport;
-          // if ($elm?.parent()?.data()?.xuData?.length) {
-          //   $elm.parent().data('xuTeleportData', []);
-          //   for (const [key, node] of Object.entries(nodeP.children)) {
-          //     const $teleport_elm = await func.UI.screen.render_ui_tree(SESSION_ID, $(val.value), node, parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, node, null, $root_container);
-          //     $elm.parent().data().xuTeleportData.push($teleport_elm.attr('xu-ui-id'));
-          //     $teleport_elm.attr('xu-teleport-parent-id', $elm.parent().attr('xu-ui-id'));
-          //   }
-          //   $elm.remove();
-          // } else {
-          //   $elm.data('xuTeleportData', []).attr('hidden', true);
-          //   for (const [key, node] of Object.entries(nodeP.children)) {
-          //     const $to_container = $(val.value);
-          //     if (!$to_container?.length) {
-          //       return console.error(`container ${val.value} for xuTeleportData not found`);
-          //     }
-          //     const $teleport_elm = await func.UI.screen.render_ui_tree(SESSION_ID, $to_container, node, parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, node, null, $root_container);
-          //     $elm.data().xuTeleportData.push($teleport_elm.attr('xu-ui-id'));
-          //     $teleport_elm.attr('xu-teleport-parent-id', $elm.attr('xu-ui-id'));
-          //   }
-          // }
-        }
-        return {};
-      },
-      'xu-render': async function ($elm, val) {
-        let ret = await common_fx['xu-render']($elm, val, true);
-        return ret;
-      },
-      'xu-show': async function ($elm, val) {
-        let ret = await common_fx['xu-show']($elm, val, true);
-        return ret;
-      },
-    },
-  };
-
-  const load_cdn = async function (resource) {
-    // console.log("loading cdn", resource);
-    if (!_.isObject(resource) && _.isString(resource)) {
-      resource = { src: resource, type: 'js' };
-    }
-    if (!_.isObject(resource)) {
-      throw new Error('cdn resource in wrong format');
-    }
-    return new Promise(async (resolve) => {
-      try {
-        switch (resource.type) {
-          case 'js':
-            await func.utils.load_js_on_demand(resource.src);
-            break;
-          case 'css':
-            await func.utils.load_js_on_demand(resource.src);
-            break;
-          case 'module':
-            func.utils.load_js_on_demand(resource.src, 'module');
-            break;
-
-          default:
-            await func.utils.load_js_on_demand(resource.src);
-            break;
-        }
-        resolve();
-      } catch (error) {
-        func.utils.debug_report(SESSION_ID, 'xu-cdn', 'Fail to load: ' + resource, 'W');
-        resolve();
-      }
-
-      // if (resource.type === "js" || !resource.type) {
-      //   await func.utils.load_js_on_demand(resource.src);
-      //   return resolve();
-      // }
-      // if (resource.type === "css") {
-      //   func.utils.load_css_on_demand(resource.src);
-      //   return resolve();
-      // }
-      // if (resource.type === "module") {
-      //   func.utils.load_js_on_demand(resource.src, "module");
-      //   return resolve();
-      // }
-      // func.utils.debug_report(
-      //   SESSION_ID,
-      //   "xu-cdn",
-      //   "Fail to load: " + resource,
-      //   "W"
-      // );
-      // return resolve();
-    });
-  };
-
-  const common_fx = {
-    'xu-attrs': async function ($elm, val) {
-      if (!val.value) return {};
-      if (!_.isObject(val.value)) throw 'xu-attrs value us not an object';
-      for (const [attr_key, attr_val] of Object.entries(val.value)) {
-        nodeP.attributes[attr_key] = attr_val;
-      }
-
-      return {};
-    },
-    'xu-ref': async function ($elm, val, dsSession) {
-      if (!val.value) return {};
-
-      func.UI.update_xu_ref(SESSION_ID, dsSession || paramsP.dsSessionP, val.value, $elm);
-
-      // Select the node that will be observed for mutations
-      const targetNode = $elm[0];
-
-      if (!targetNode) return;
-
-      // Options for the observer (which mutations to observe)
-      const config = { attributes: true, childList: true, subtree: true };
-
-      // Callback function to execute when mutations are observed
-      const callback = (mutationList, observer) => {
-        func.UI.screen.refresh_xu_attributes(SESSION_ID, [val.value]);
-      };
-
-      // Create an observer instance linked to the callback function
-      const observer = new MutationObserver(callback);
-
-      // Start observing the target node for configured mutations
-      observer.observe(targetNode, config);
-
-      // Later, you can stop observing
-      // observer.disconnect();
-
-      return {};
-    },
-    'xu-bind': async function ($elm, val) {
-      if (is_skeleton) return;
-
-      let val_is_reference_field = false;
-
-      let _prog_id = $elm.data().xuData.paramsP.prog_id;
-      let _dsP = $elm.data().xuData.paramsP.dsSessionP;
-      const view_ret = await func.utils.VIEWS_OBJ.get(SESSION_ID, _prog_id);
-      if (!view_ret) return {};
-
-      let is_dynamic_field = false;
-      let field_prop;
-      let bind_field_id;
-
-      const input_field_type = $elm.attr('type');
-
-      const get_bind_field = async function (field_id) {
-        if (['_FOR_VAL', '_FOR_KEY'].includes(field_id)) {
-          is_dynamic_field = true;
-          field_prop = _ds.dynamic_fields[field_id];
-        } else {
-          field_prop = func.common.find_item_by_key(view_ret.progFields, 'field_id', field_id);
-          if (!field_prop) {
-            /// find the field everywhere in the chain Aug 30 2024
-            const ret_get_value = await func.datasource.get_value(SESSION_ID, field_id, _dsP);
-
-            if (ret_get_value.found) {
-              _dsP = ret_get_value.dsSessionP;
-              let _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_dsP];
-              _prog_id = _ds.prog_id;
-              const view_ret = await func.utils.VIEWS_OBJ.get(SESSION_ID, _prog_id);
-              if (!view_ret) return {};
-              field_prop = func.common.find_item_by_key(view_ret.progFields, 'field_id', field_id);
-            }
-            if (!field_prop) {
-              throw `field ${field_id} not found in the program scope`;
-            }
-          }
-        }
-        return field_id;
-      };
-
-      try {
-        bind_field_id = await get_bind_field(val.value.split('.')[0]);
-        val_is_reference_field = true;
-      } catch (err) {
-        console.error(err?.message || err);
-        return {};
-      }
-
-      const field_changed = async function (e) {
-        var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_dsP];
-
-        // update array for checkbox that not in xu-for
-        if (field_prop.props.fieldType === 'array' && input_field_type === 'checkbox' && val_is_reference_field) {
-          let arr_value_before_cast = _.clone((await func.datasource.get_value(SESSION_ID, bind_field_id, _dsP, _ds.currentRecordId)).ret.value);
-          let value_from_getter = bind.getter($elm[0]);
-          let value;
-          if (arr_value_before_cast.includes(value_from_getter)) {
-            value = arr_value_before_cast.filter((item) => !_.isEqual(item, value_from_getter));
-          } else {
-            arr_value_before_cast.push(value_from_getter);
-            value = arr_value_before_cast;
-          }
-
-          let datasource_changes = {
-            [_dsP]: {
-              [_ds.currentRecordId]: {
-                [bind_field_id]: value,
-              },
-            },
-          };
-
-          return await func.datasource.update(SESSION_ID, datasource_changes);
-        }
-
-        // update array for radio that not in xu-for
-        if (field_prop.props.fieldType === 'array' && input_field_type === 'radio' && val_is_reference_field) {
-          let value_from_getter = bind.getter($elm[0]);
-
-          let datasource_changes = {
-            [_dsP]: {
-              [_ds.currentRecordId]: {
-                [bind_field_id]: [value_from_getter],
-              },
-            },
-          };
-
-          return await func.datasource.update(SESSION_ID, datasource_changes);
-        }
-
-        var value = await func.common.get_cast_val(SESSION_ID, 'xu-bind', 'value', field_prop.props.fieldType, bind.getter($elm[0]));
-
-        if (field_prop.props.fieldType === 'object') {
-          value = await func.common.get_cast_val(SESSION_ID, 'xu-bind', 'value', input_field_type, bind.getter($elm[0]));
-        }
-
-        if (!_ds.currentRecordId) return;
-
-        let datasource_changes = {
-          [_dsP]: {
-            [_ds.currentRecordId]: {
-              [bind_field_id]: value,
-            },
-          },
-        };
-
-        await func.datasource.update(SESSION_ID, datasource_changes);
-        const iterate_info = $elm?.data()?.xuData?.iterate_info;
-        const reference_source_obj = iterate_info?.reference_source_obj;
-        if (reference_source_obj) {
-          if (reference_source_obj.ret.type === 'array') {
-            if (iterate_info.iterator_val === bind_field_id) {
-              const arr_idx = Number($elm?.data()?.xuData?.iterate_info._key);
-
-              const dataset_arr = await func.datasource.get_value(SESSION_ID, reference_source_obj.fieldIdP, _dsP, reference_source_obj.currentRecordId);
-              let new_arr = _.cloneDeep(dataset_arr.ret.value);
-
-              if (field_prop.props.fieldType === 'object' && val_is_reference_field) {
-                let obj_item = new_arr[arr_idx];
-
-                let e_exp = val.value.replace(bind_field_id, 'obj_item');
-
-                let new_val = eval(e_exp + (input_field_type === 'string' ? `="${value}"` : `=${value}`));
-
-                new_arr[arr_idx] = obj_item;
-              } else {
-                new_arr[arr_idx] = value;
-              }
-              // datasource_changes[_dsP][_ds.currentRecordId][reference_source_obj.fieldIdP] = new_arr;
-
-              let datasource_changes = {
-                [_dsP]: {
-                  [_ds.currentRecordId]: {
-                    [reference_source_obj.fieldIdP]: new_arr,
-                  },
-                },
-              };
-
-              await func.datasource.update(SESSION_ID, datasource_changes, null, true);
-            }
-          }
-        }
-
-        await func.datasource.update_changes_for_out_parameter(SESSION_ID, _dsP, _ds.parentDataSourceNo);
-      };
-
-      const bind = new UI_FRAMEWORK_PLUGIN.bind();
-
-      bind.listener($elm[0], field_changed);
-
-      const set_value = function () {
-        let _ds = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP];
-        if (!_ds.currentRecordId) return;
-        let value;
-        try {
-          if (val_is_reference_field) {
-            if (is_dynamic_field) {
-              value = _ds.dynamic_fields[bind_field_id].value;
-            } else {
-              const row_idx = func.common.find_ROWID_idx(_ds, _ds.currentRecordId);
-              value = _ds.data_feed.rows?.[row_idx]?.[bind_field_id];
-            }
-            if (field_prop.props.fieldType === 'array' && $elm.attr('type') === 'checkbox' && $elm.attr('value')) {
-              if (value.includes($elm.attr('value'))) {
-                value = true;
-              } else {
-                value = false;
-              }
-            } else if (field_prop.props.fieldType === 'array' && $elm.attr('type') === 'radio' && $elm.attr('value')) {
-              if (value.includes($elm.attr('value'))) {
-                value = $elm.attr('value');
-              } else {
-                value = false;
-              }
-            } else if (field_prop.props.fieldType === 'object' && val.value.split('.').length > 1) {
-              let str = val.value.replace(bind_field_id, '(' + JSON.stringify(value) + ')');
-              value = eval(str);
-            }
-          } else {
-            value = val.value;
-          }
-          if (typeof value === 'undefined') return;
-          bind.setter($elm[0], value);
-        } catch (err) {
-          console.error(err);
-        }
-      };
-      /// init value from ds
-      $('body').on('xu-bind-refresh.' + _ds.dsSession.toString(), () => {
-        set_value();
-      });
-
-      set_value();
-      return {};
-    },
-    'xu-render': async function ($elm, val, from_panel) {
-      const old_render = async function () {
-        var value = await func.common.get_cast_val(SESSION_ID, 'common fx', 'xu-render', 'bool', val.value);
-        const init_render = function () {
-          if (!value) {
-            var cloned_$div = $elm.clone(true);
-
-            let $xurender = $('<xurender>').attr('xu-ui-id', $elm.attr('xu-ui-id')).attr('hidden', true).appendTo($container); //.hide();
-            let original_data_obj = {
-              $container: cloned_$div,
-              nodeP: _.cloneDeep(nodeP),
-              parent_infoP,
-              paramsP,
-              keyP,
-              parent_nodeP,
-              $root_container,
-            };
-            $xurender.data('xuData', cloned_$div.data().xuData);
-            $xurender.data().xuData.original_data_obj = original_data_obj;
-            $xurender.data().xuData.xurender_node = cloned_$div;
-            $xurender.data().xuAttributes = nodeP.attributes || {};
-            // $xurender.hide();
-
-            $elm.remove();
-            return { abort: true };
-          }
-          return {};
-        };
-
-        const post_render = async function () {
-          if (value) {
-            try {
-              // abort if already rended
-              if ($elm[0].tagName !== 'XURENDER' && $elm?.length) {
-                return func.events.delete_job(SESSION_ID, jobNoP);
-              }
-
-              let original_data_obj = $elm.data().xuData.original_data_obj;
-
-              if (!original_data_obj) {
-                func.events.delete_job(SESSION_ID, jobNoP);
-                return { delete_job: jobNoP };
-              }
-
-              const new_$div = await func.UI.screen.render_ui_tree(
-                SESSION_ID,
-                $elm, //original_data_obj.$container,
-                _.cloneDeep(original_data_obj.nodeP),
-                original_data_obj.parent_infoP,
-                original_data_obj.paramsP,
-                jobNoP,
-                null,
-                original_data_obj.keyP,
-                null,
-                original_data_obj.parent_nodeP,
-                null,
-                original_data_obj.$root_container,
-              );
-
-              new_$div.data().xuData.original_data_obj = original_data_obj;
-              new_$div.data().xuData.xurender_node = $elm.clone(true);
-              new_$div.data().xuAttributes = $elm.data().xuAttributes || {};
-
-              const replace = async function () {
-                $elm.replaceWith(new_$div);
-                if (from_panel) {
-                  const xuPanelWrapper = _.clone(new_$div.data().xuPanelWrapper);
-                  $elm.parent().data().xuPanelWrapper = xuPanelWrapper;
-                  $elm.replaceWith(new_$div.children());
-                }
-
-                if (val.fields_arr) {
-                  return await func.UI.screen.refresh_xu_attributes(SESSION_ID, val.fields_arr, val.jobNoP, new_$div);
-                }
-                func.events.delete_job(SESSION_ID, jobNoP);
-              };
-              //  if ($elm && func.UI.utils.find_in_element_data('xuData', $(SESSION_OBJ[SESSION_ID].root_element), 'xu_id', $elm.data().xuData.xu_id).length) {
-              if ($elm && $(`[xu-ui-id="${$elm.attr('xu-ui-id')}"]`).length) {
-                if (new_$div.data().xuData.paramsP) {
-                  return await replace();
-                }
-
-                func.events.delete_job(SESSION_ID, jobNoP);
-              }
-            } catch (error) {
-              func.events.delete_job(SESSION_ID, jobNoP);
-            }
-            return;
-          }
-          // if (!value) {
-          if ($elm.prop('tagName') === 'XURENDER') {
-            func.events.delete_job(SESSION_ID, jobNoP);
-            return;
-          }
-
-          let tmp_$div = $('<div>');
-
-          let $xurender = $('<xurender>').attr('xu-ui-id', $elm.attr('xu-ui-id')).appendTo(tmp_$div); //.hide();
-          // was true before
-          if ($elm.data().xuData.xurender_node) {
-            $xurender.data({
-              xuAttributes: $elm.data().xuData.xurender_node.data().xuAttributes || {},
-              xuData: $elm.data().xuData.xurender_node.data().xuData || {},
-            });
-          } else {
-            // default new state
-
-            $xurender.data({
-              xuAttributes: $elm.data().xuAttributes || {},
-              xuData: $elm.data().xuData || {},
-            });
-            const original_data_obj = {
-              nodeP: _.cloneDeep($elm.data().xuData.node_org),
-              paramsP: $elm.data().xuData.paramsP,
-              $container: $elm.clone(true),
-              parent_infoP: parent_infoP,
-            };
-
-            $xurender.data().xuData.original_data_obj = original_data_obj;
-          }
-
-          //remove xu-teleport trace
-          $.each($elm.find('xu-teleport'), (key, val) => {
-            const xuTeleportData = $(val).data().xuTeleportData || [];
-            for (const teleported_elm_id of xuTeleportData) {
-              $(`[xu-ui-id="${teleported_elm_id}"]`).remove();
-            }
-          });
-
-          $elm.replaceWith(tmp_$div.children());
-          func.events.delete_job(SESSION_ID, jobNoP);
-          // }
-        };
-        if (is_init) {
-          return init_render();
-        }
-        return await post_render();
-      };
-
-      const new_render = async function () {
-        var value = await func.common.get_cast_val(SESSION_ID, 'common fx', 'xu-render', 'bool', val.value);
-        const has_xu_render_attribute = true;
-        const has_xu_exp_render_attribute = $elm.data()?.xuData?.attr_exp_info?.['xu-render'] ? true : false;
-        const init_render = async function () {
-          nodeP.xu_render_made = value;
-          if (!value) {
-            if (has_xu_exp_render_attribute) {
-              return { has_xu_exp_render_attribute, has_xu_render_attribute, xu_render_background_processing: true };
-            }
-            return { has_xu_render_attribute, abort: true };
-          }
-          return { has_xu_exp_render_attribute, has_xu_render_attribute };
-        };
-
-        const post_render = async function () {
-          // always come from refresh
-          let nodeP = $container.data().xuData.node.children[keyP];
-          nodeP.xu_render_made = value;
-          if (value) {
-            try {
-              const xu_render_cache_id = await get_xu_render_cache_str(SESSION_ID, paramsP.dsSessionP, Object.keys($elm.data()?.xuData?.attr_exp_info?.['xu-render']?.fields || {}));
-              const xu_ui_id = $elm.attr('xu-ui-id');
-              let new_$div = UI_WORKER_OBJ?.xu_render_cache?.[xu_ui_id + xu_render_cache_id]?.$div.clone(true);
-              let found_parent_vars = false;
-              if (new_$div) {
-                // validate if $div contains fields from parent ds
-                const parent_data = get_parent_ds_fields(SESSION_ID, paramsP.dsSessionP);
-                const parent_fields = Object.keys(parent_data);
-
-                $.each(new_$div.find('*'), (key, val) => {
-                  const _xuAttributes = $(val)?.data()?.xuAttributes;
-                  if (found_parent_vars || !_xuAttributes) return;
-                  for (const [attr_key, attr_val] of Object.entries(_xuAttributes)) {
-                    if (found_parent_vars) break;
-                    for (const [key, val] of Object.entries(parent_fields)) {
-                      if (attr_val.includes('@' + key)) {
-                        found_parent_vars = true;
-                        break;
-                      }
-                    }
-                  }
-                });
-              }
-
-              if (!new_$div || found_parent_vars) {
-                UI_WORKER_OBJ.xu_render_cache[xu_ui_id + xu_render_cache_id] = { paramsP };
-                nodeP.xu_render_xu_ui_id = xu_ui_id;
-                nodeP.xu_render_cache_id = xu_render_cache_id;
-                new_$div = await func.UI.screen.render_ui_tree(SESSION_ID, $container, nodeP, parent_infoP, paramsP, jobNoP, null, keyP, null, parent_nodeP, null, $root_container);
-                const _$div = new_$div.clone(true);
-                UI_WORKER_OBJ.xu_render_cache[xu_ui_id + xu_render_cache_id].$div = _$div;
-                UI_WORKER_OBJ.xu_render_cache[xu_ui_id + xu_render_cache_id].data = _$div.data();
-              }
-              // append order handling
-
-              if (!$container.children().length) {
-                new_$div.appendTo($container);
-              } else {
-                // iterate the container node
-                let $last_elm_found = [];
-                $.each($container.data().xuData.node.children, (item_key, item_val) => {
-                  // const $elm = $(`[xu-node-id="${item_val.id}"]`);
-                  const $elm = func.UI.utils.find_in_element_data('xuData', $(SESSION_OBJ[SESSION_ID].root_element), 'nodeid', item_val.id);
-                  if ($elm.length) {
-                    $last_elm_found = $elm;
-                  }
-                  if (keyP == item_key) {
-                    if ($last_elm_found.length) {
-                      new_$div.after($last_elm_found);
-                    } else {
-                      $container.prepend(new_$div);
-                    }
-                  }
-                });
-              }
-            } catch (error) {
-              func.events.delete_job(SESSION_ID, jobNoP);
-            }
-            return;
-          }
-
-          /////////// !value ///////////
-
-          const xu_ui_id = $elm.attr('xu-ui-id');
-
-          const cache_str = await get_xu_render_cache_str(SESSION_ID, paramsP.dsSessionP, Object.keys($elm.data()?.xuData?.attr_exp_info?.['xu-render']?.fields || {}));
-          const _$div = $elm.clone(true);
-          UI_WORKER_OBJ.xu_render_cache[xu_ui_id + cache_str] = { $div: _$div, data: _$div.data(), paramsP };
-          $elm.remove();
-          func.events.delete_job(SESSION_ID, jobNoP);
-        };
-        if (is_init) {
-          return await init_render();
-        }
-        return await post_render();
-      };
-
-      if (glb.new_xu_render) {
-        return new_render();
-      }
-      return old_render();
-    },
-    'xu-show': async function ($elm, val) {
-      var value = await func.common.get_cast_val(SESSION_ID, 'common fx', 'xu-show', 'bool', val.value);
-      if (value) {
-        $elm.show();
-      }
-      if (!value) {
-        $elm.hide();
-      }
-      return {};
-    },
-    'xu-content': async function ($elm, val) {
-      try {
-        $elm.html(val.value);
-      } catch (error) {
-        console.warn(e);
-      }
-      return;
-    },
-    'xu-text': async function ($elm, val) {
-      try {
-        $elm.text(val.value);
-      } catch (error) {
-        console.warn(e);
-      }
-      return;
-    },
-    'xu-html': async function ($elm, val) {
-      try {
-        $elm.html(val.value);
-      } catch (error) {
-        console.warn(e);
-      }
-      return;
-    },
-    'xu-for': async function ($elm, data) {
-      // exit if call from rendered xu-for item to prevent infante loop (parent_infoP?.iterate_info indicate call from rendered item)
-      if (parent_infoP?.iterate_info) return {};
-      if (!data.value) return {};
-      try {
-        // data.value (xu-for) can store actual values such as an array, a CSV, or a field_id that references a specific field within the dataset, initialized with values for the iteration.
-        let arr = data.value;
-
-        // find reference source field
-        let reference_source_obj;
-
-        const _progFields = await func.datasource.get_progFields(SESSION_ID, paramsP.dsSessionP);
-
-        let view_field_obj = func.common.find_item_by_key(_progFields, 'field_id', data.value);
-        // detect if data.value (xu-for) is reference field_id  by checking if exist in the dataset
-        if (view_field_obj) {
-          // xu-for is reference field_id
-          reference_source_obj = await func.datasource.get_value(SESSION_ID, data.value, paramsP.dsSessionP);
-          arr = reference_source_obj?.ret?.value;
-        } else {
-          // xu-for is actual data
-          if (typeof data.value === 'string') {
-            arr = eval(data.value.replaceAll('\\', ''));
-          }
-          if (typeof arr === 'number') {
-            arr = Array.from(Array(arr).keys());
-          }
-        }
-
-        const custom_iterator_key = $elm.data().xuData.iterator_key;
-        const custom_iterator_val = $elm.data().xuData.iterator_val;
-
-        let iterator_key = custom_iterator_key;
-        let iterator_val = custom_iterator_val;
-        let is_key_dynamic_field, is_val_dynamic_field;
-
-        // custom FOR_VAL name or namespaced default name
-        if (!custom_iterator_key) {
-          is_key_dynamic_field = true;
-
-          iterator_key = '_FOR_KEY';
-        }
-
-        if (!custom_iterator_val) {
-          is_val_dynamic_field = true;
-
-          iterator_val = '_FOR_VAL';
-        }
-
-        var i = 0;
-        for await (let [_key, _val] of Object.entries(arr)) {
-          if (_.isArray(arr)) {
-            _key = Number(_key);
-          }
-
-          const set_value = async function (is_dynamic_field, currentRecordId, field_id, value) {
-            if (is_dynamic_field) {
-              func.datasource.add_dynamic_field_to_ds(SESSION_ID, paramsP.dsSessionP, field_id, value);
-            } else {
-              const _progFields = await func.datasource.get_progFields(SESSION_ID, paramsP.dsSessionP);
-
-              let view_field_obj = func.common.find_item_by_key(_progFields, 'field_id', field_id);
-              if (view_field_obj) {
-                let _ds = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP];
-                try {
-                  const row_idx = func.common.find_ROWID_idx(_ds, currentRecordId);
-                  _ds.data_feed.rows[row_idx][field_id] = value;
-                } catch (err) {
-                  console.error(err);
-                }
-              } else {
-                console.error('field not exist in dataset for xu-for method');
-              }
-            }
-          };
-
-          var currentRecordId = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP].currentRecordId.toString();
-
-          await set_value(is_key_dynamic_field, currentRecordId, iterator_key, _key);
-          await set_value(is_val_dynamic_field, currentRecordId, iterator_val, _val);
-
-          var iterate_info = {
-            _val,
-            _key,
-            iterator_key,
-            iterator_val,
-            is_key_dynamic_field,
-            is_val_dynamic_field,
-            reference_source_obj,
-          };
-          let _parent_info = _.cloneDeep(parent_infoP) || {};
-          _parent_info.iterate_info = iterate_info;
-
-          const $divP = await func.UI.screen.render_ui_tree(
-            SESSION_ID,
-            $container,
-            nodeP,
-            _parent_info, //parent_infoP ? _.cloneDeep(_parent_info) : null,
-            paramsP,
-            jobNoP,
-            null,
-            i,
-            null,
-            nodeP,
-            null,
-            $root_container,
-          );
-
-          $.each($divP.children(), function (key, val) {
-            if ($(val)?.data()?.xuData) {
-              $(val).data().xuData.iterate_info = iterate_info;
-            }
-          });
-
-          i++;
-        }
-        $elm.remove();
-        return { abort: true };
-      } catch (e) {
-        console.error(' Iterator Arr parse error');
-        return { abort: true };
-      }
-    },
-    'xu-for-key': async function ($elm, val) {
-      $elm.data().xuData.iterator_key = val.value;
-      return {};
-    },
-    'xu-for-val': async function ($elm, val) {
-      $elm.data().xuData.iterator_val = val.value;
-      return {};
-    },
-    'xu-class': async function ($elm, val) {
-      try {
-        const classes_string = val.value;
-        // let obj = _.isString(classes_string) ? JSON.parse(classes_string) : _.defaults(classes_string, {});
-
-        const classes_obj = _.isString(classes_string) ? JSON.parse(classes_string) : _.defaults(classes_string, {});
-        for await (const [cla, cond] of Object.entries(classes_obj)) {
-          let res = await func.expression.get(
-            SESSION_ID,
-            cond,
-            paramsP.dsSessionP,
-            'UI Attr EXP',
-            $elm.data().xuData.currentRecordId, // SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP].currentRecordId
-            null,
-            null,
-            null,
-            null,
-            null,
-            $elm.data().xuData.iterate_info,
-          );
-
-          if (res.result) {
-            $elm.addClass(cla);
-          } else {
-            $elm.removeClass(cla);
-          }
-
-          $elm.data().xuData.debug_info.attribute_stat['xu-class'] = $elm.attr('class');
-        }
-        return {};
-      } catch (e) {
-        console.warn('parse error:' + val.value);
-        return { abort: true };
-      }
-    },
-    'xu-exp': async function ($elm, val) {
-      let exp = val.value === null ? true : val.value;
-
-      let exp_ret = await func.expression.get(SESSION_ID, exp, paramsP.dsSessionP, 'UI Attr EXP', SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP].currentRecordId, null, null, null, null, null, $elm.data().xuData.iterate_info);
-
-      let value = func.UI.screen.fix_val_defaults(val.key, exp_ret.result);
-
-      var new_val = {
-        key: val.key,
-        value,
-      };
-
-      if (nodeP.tagName.substr(0, 3) === 'xu-') {
-        if (tag_fx[nodeP.tagName][new_val.key]) {
-          return await tag_fx[nodeP.tagName][new_val.key]($elm, new_val);
-        }
-        console.warn(`attribute ${new_val.key} not found for ${nodeP.tagName}`);
-        return {};
-      }
-      if (!$elm.data().xuData) return;
-
-      $elm.data().xuData.debug_info.attribute_stat[new_val.key] = new_val.value;
-
-      // IGNORE UNDEFINED or NULL ATTRIBUTES
-      if (typeof new_val.value === 'undefined' || new_val.value === null) {
-        return {};
-      }
-
-      // IGNORE ATTRIBUTES WITH EMPTY VALUES
-      if (glb.solid_attributes.includes(new_val.key) && !new_val.value) {
-        return {};
-      }
-
-      if (new_val.key.substr(0, 2) === 'xu') {
-        return await common_fx[new_val.key]($elm, new_val);
-      }
-
-      $elm.attr(new_val.key, ($elm.attr(new_val.key) || '') + new_val.value);
-      return {};
-    },
-    'xu-on': async function ($elm, val) {
-      CLIENT_ACTIVITY_TS = Date.now();
-      const trigger = val.key.split('xu-on:')[1].toLowerCase();
-      $elm.on(trigger, async function (evt) {
-        const _$elm = $(evt.currentTarget);
-        if (_.isEmpty(_$elm.data().xuAttributes)) return;
-
-        for await (const [key, val] of Object.entries(_$elm.data().xuAttributes['xu-on:' + evt.type])) {
-          if (!_.isEmpty(val.props.condition)) {
-            const expCond = await func.expression.get(SESSION_ID, val.props.condition, paramsP.dsSessionP, 'condition', paramsP.recordid); // execute expression
-            if (!expCond.result) continue;
-          }
-
-          if (val.event_modifiers && evt[val.event_modifiers]) {
-            evt[val.event_modifiers]();
-          }
-
-          // if (val.handler === 'custom') {
-          if (val.workflow) {
-            // do BL
-            for await (const [key2, val2] of Object.entries(val.workflow)) {
-              // var cond = val2.data.enabled;
-              // if (val2.data.enabled && val2.props.condition) {
-              // expCond = await func.expression.get(SESSION_ID, val2.props.condition, paramsP.dsSessionP, 'condition', paramsP.recordid); // execute expression
-              // cond = expCond.result;
-              // }
-              // if (!cond) continue;
-
-              if (!val2.data.enabled) continue; // added Jul 3, 25 - condition validate on execution
-
-              func.events.add_to_queue(SESSION_ID, 'element event', val2.id, evt.type, val2.data.action, val2.data.name, null, _$elm.attr('xu-ui-id'), null, evt, null, null, null, paramsP.dsSessionP, null, null, null, evt.type, val2.data.name, null, null, val2, null, null, null, null, null, null);
-            }
-          }
-        }
-      });
-      return {};
-    },
-    'xu-script': async function ($elm, val) {
-      var checkExist = setInterval(function () {
-        if ($elm.is(':visible')) {
-          try {
-            // var res = eval('(' + val.value + ')');
-            const fn = `(function(el, evt) {
-             ${val.value} 
-             })(document.querySelector(\`[xu-ui-id="${$elm.attr('xu-ui-id')}"]\`),evt));`;
-
-            var res = eval(fn);
-            // if (typeof res === 'function') {
-            //   res($elm[0]);
-            // }
-          } catch (e) {
-            eval(val.value);
-          }
-
-          clearInterval(checkExist);
-        }
-      }, 100); // check every 100ms
-
-      return {};
-    },
-    'xu-style-global': async function ($elm, val) {
-      $('head').append(`<style>${val.value}</style>`);
-      return {};
-    },
-    'xu-style': async function ($elm, val) {
-      var cssString = val.value;
-
-      var parser = new cssjs();
-
-      var parsed = parser.parseCSS(cssString);
-      var xuUiId = `[xu-ui-id="${$elm.attr('xu-ui-id')}"]`;
-
-      $.each(parsed, function (key, val) {
-        var selectors_arr = val.selector.split(',');
-
-        $.each(selectors_arr, function (key2, val2) {
-          selectors_arr[key2] = `${xuUiId} ${val2}, ${xuUiId}${val2}`;
-          // console.log(new_selector);
-        });
-
-        val.selector = selectors_arr.join(',');
-        // console.log(parsed);
-      });
-
-      var newCSSString = parser.getCSSForEditor(parsed);
-
-      $('head').append(`<style>${newCSSString}</style>`);
-      return {};
-    },
-    'xu-cdn': async function ($elm, val) {
-      for await (const [key, resource] of Object.entries(val.value)) {
-        await load_cdn(resource);
-      }
-
-      return {};
-    },
-    'xu-ui-plugin': async function ($elm, val) {
-      var _session = SESSION_OBJ[SESSION_ID];
-
-      for await (const [plugin_name, value] of Object.entries(val.value)) {
-        const _plugin = APP_OBJ[_session.app_id]?.app_plugins_purchased?.[plugin_name];
-        if (_plugin?.installed && _plugin?.manifest?.['runtime.mjs']?.exist && _plugin?.manifest?.['index.mjs']?.exist && value.enabled) {
-          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);
-          }
-
-          const plugin_index_src = await func.utils.get_plugin_npm_cdn(SESSION_ID, plugin_name, `${_plugin.manifest['index.mjs'].dist ? 'dist/' : ''}index.mjs`);
-
-          const plugin_index_resources = await import(plugin_index_src);
-
-          let properties = _.cloneDeep(plugin_index_resources.properties);
-          for await (let [prop_name, prop_val] of Object.entries(properties)) {
-            prop_val.value = value?.attributes?.[prop_name];
-            if (value?.attributes?.[`xu-exp:${prop_name}`]) {
-              const res = await func.expression.get(SESSION_ID, value?.attributes?.[`xu-exp:${prop_name}`], paramsP.dsSessionP, 'UI Attr EXP');
-              prop_val.value = res.result;
-            }
-          }
-          // $elm.data().xu_ui_plugin = { properties };
-          const plugin_runtime_src = await func.utils.get_plugin_npm_cdn(SESSION_ID, plugin_name, `${_plugin.manifest['runtime.mjs'].dist ? 'dist/' : ''}runtime.mjs`);
-
-          const plugin_runtime_resources = await import(plugin_runtime_src);
-
-          if (plugin_runtime_resources.cdn && typeof _.isArray(plugin_runtime_resources.cdn)) {
-            for await (const resource of plugin_runtime_resources.cdn) {
-              await load_cdn(resource);
-            }
-          }
-
-          if (plugin_runtime_resources.fn) {
-            await plugin_runtime_resources.fn(plugin_name, $elm?.[0], properties);
-            // await plugin_runtime_resources.fn(plugin_name, $elm?.[0], $elm.data().xu_ui_plugin.properties);
-          }
-        }
-      }
-
-      return {};
-    },
-    'xu-store': async function ($elm, val) {
-      try {
-        const fields_obj = JSON5.parse(val.value);
-        for (const [field_id, value] of Object.entries(fields_obj)) {
-          func.datasource.add_dynamic_field_to_ds(SESSION_ID, paramsP.dsSessionP, field_id, value);
-        }
-      } catch (err) {
-        console.error(err);
-      }
-      return {};
-    },
-    'xu-viewport': async function ($elm, val) {
-      // functionality in draw_html_element
-      return {};
-    },
-  };
-
-  if (nodeP.tagName.substr(0, 3) === 'xu-') {
-    if (xu_func === 'xu-exp') {
-      return common_fx[xu_func]($elm, val);
-    }
-
-    if (tag_fx?.[nodeP.tagName]?.[xu_func]) {
-      let ret = await tag_fx[nodeP.tagName][xu_func]($elm, val);
-      return ret;
-    }
-    // if (xu_func !== "tree_id")
-    console.warn(`attribute ${xu_func} not found for ${nodeP.tagName}`);
-    return {};
-  }
-  if (_.isEmpty($elm.data())) {
-    return {};
-  }
-  if (!$elm.data().xuData.debug_info.attribute_stat) {
-    $elm.data().xuData.debug_info.attribute_stat = {};
-  }
-  if (xu_func !== 'xu-exp') {
-    $elm.data().xuData.debug_info.attribute_stat[xu_func] = val.value;
-  }
-  try {
-    if (!common_fx[xu_func]) {
-      console.warn('invalid xu-tag', xu_func, error);
-      return {};
-    }
-
-    return await common_fx[xu_func]($elm, val);
-  } catch (error) {
-    debugger;
-  }
-};
-
-func.UI.screen.fix_val_defaults = function (key, val) {
-  var ret = val;
-  if (
-    key === 'xu-render' &&
-    (typeof val === 'undefined' || val === null || val === '') //|| val === ""
-  ) {
-    // ret = 'Y'; // was ret = "N";
-    ret = true;
-  }
-  if (
-    key === 'xu-show' &&
-    (typeof val === 'undefined' || val === null || val === '') //|| val === ""
-  ) {
-    // ret = 'Y';
-    ret = true;
-  }
-  return ret;
-};
-
-func.UI.screen.set_attributes_new = async function (SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $elm, is_init, execute_attributes = [], refreshed_ds) {
-  var done_exp = [];
-
-  const _ds = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP];
-  if (!_ds) return { abort: true };
-
-  const get_attr_value = async function (key) {
-    let ret = func.UI.screen.fix_val_defaults(key, nodeP.attributes[key]);
-    if (nodeP?.attributes?.hasOwnProperty(`xu-exp:${key}`)) {
-      ret = await get_xuExp(key);
-    }
-    return ret;
-  };
-
-  const get_xuExp = async function (attrib) {
-    if (is_skeleton) return;
-    if (glb.new_xu_render) {
-      let _xuData = $elm.data().xuData;
-      if (!_xuData.attr_exp_info) {
-        _xuData.attr_exp_info = {};
-      }
-    }
-    const attr = `xu-exp:${attrib}`;
-
-    if (!nodeP?.attributes?.hasOwnProperty(attr)) return;
-    // const attr = `xu-exp-${attrib}`;
-    var exp = nodeP.attributes[attr];
-    // if (!value) return func.UI.screen.fix_val_defaults(attrib, exp || nodeP.attributes[attrib]);
-
-    var res = await func.expression.get(SESSION_ID, exp, paramsP.dsSessionP, 'UI Attr EXP', _ds.currentRecordId);
-    if (glb.new_xu_render) {
-      _xuData.attr_exp_info[attrib] = res;
-    }
-    // nodeP.attributes[attr] = value; //{ value: value, res: res };
-    done_exp.push(attr);
-    return res.result; //func.UI.screen.fix_val_defaults(attrib, res.result);
-  };
-
-  var _ret = {};
-  if (nodeP.type !== 'element' || !nodeP.attributes) return _ret;
-
-  for (let [key, val] of Object.entries(nodeP.attributes)) {
-    // REMOVE STATIC ATTRIBUTES IF EXP EXISTS to avoid dup
-    if (key.substring(0, 6) === 'xu-exp') {
-      if (_.isEmpty(val)) {
-        delete nodeP.attributes[key];
-        continue;
-      }
-      const clean_key = key.split(':')[1];
-      if (typeof nodeP.attributes[clean_key] !== 'undefined') {
-        delete nodeP.attributes[clean_key];
-      }
-    }
-    // FIX abbreviations
-    if (glb.attr_abbreviations_arr.includes(key)) {
-      nodeP.attributes[`xu-on:${key.substring(3)}`] = [
-        {
-          handler: 'custom',
-          props: {},
-          event: [
-            {
-              id: Date.now(),
-              data: {
-                action: 'update',
-                name: { value: val },
-                enabled: true,
-              },
-              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];
-    }
-  }
-
-  // XU-ATTRS
-  if (nodeP?.attributes?.['xu-attrs'] || nodeP?.attributes?.['xu-exp:xu-attrs']) {
-    const attr = 'xu-attrs';
-    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_attr_value(attr),
-      },
-      is_init,
-    );
-  }
-
-  // BEFORE
-  if (!_.isEmpty(nodeP.attributes)) {
-    for await (const [key, attr] of Object.entries(glb.run_xu_before)) {
-      if (_ret.abort || $container?.data()?.xuData?.pending_to_delete) break;
-      if (glb.html5_events_handler.includes(attr) || execute_attributes.includes(attr)) {
-        continue;
-      }
-
-      if (!nodeP?.attributes?.hasOwnProperty(attr) && !nodeP?.attributes?.hasOwnProperty(`xu-exp:${attr}`)) {
-        continue;
-      }
-
-      if (!nodeP.attributes[`xu-exp:${attr}`] && nodeP?.attributes?.hasOwnProperty(attr) && typeof func.UI.screen.fix_val_defaults(attr, nodeP.attributes[attr]) === 'undefined') {
-        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_attr_value(attr),
-        },
-        is_init,
-      );
-      _ret = _.assignIn(_ret, ret);
-    }
-  }
-
-  // ALL
-
-  for await (const [key, val] of Object.entries(nodeP.attributes)) {
-    if (_ret.abort || $container?.data()?.xuData?.pending_to_delete) 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 {
-      if ($elm?.data()?.xuAttributes) {
-        // in some cases xu data delete in purpose when refreshing the screen
-        $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)) || func.UI.screen.fix_val_defaults(key, val),
-          value: await get_attr_value(key),
-        },
-        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)) || func.UI.screen.fix_val_defaults(key, val),
-        value: await get_attr_value(key),
-      },
-      is_init,
-      refreshed_ds,
-    );
-
-    _ret = _.assignIn(_ret, ret);
-  }
-
-  // EXP for
-
-  for await (const [key, val] of Object.entries(nodeP.attributes)) {
-    if (_ret.abort || $container?.data()?.xuData?.pending_to_delete) 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 ($container?.data()?.xuData?.pending_to_delete) 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: (await get_xuExp(attr)) || func.UI.screen.fix_val_defaults(attr, nodeP.attributes[attr]),
-        value: await get_attr_value(attr),
-      },
-      is_init,
-      refreshed_ds,
-    );
-    _ret = _.assignIn(_ret, ret);
-  }
-
-  // REGISTER EVENTS ATTRIBUTES
-
-  for await (const [key, val] of Object.entries(nodeP.attributes)) {
-    if ($container?.data()?.xuData?.pending_to_delete) break;
-    if (!glb.html5_events_handler.includes(key)) break;
-    // $elm.attr(key, await get_xuExp(key)) || val;
-    $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;
-};
-
-const generate_xu_ui_id = async function (SESSION_ID, nodeP, $container, paramsP, keyP) {
-  const _paramsP = _.cloneDeep(paramsP);
-  var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_paramsP.dsSessionP];
-
-  const currentRecordId = $container?.data?.()?.xuData?.recordid || (_ds ? _ds.currentRecordId : '');
-  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 ||
-
-  const new_ui_id = await func.common.sha256(ui_id);
-  return new_ui_id;
-};
-
-func.UI.screen.create_container = async function (SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, classP, elem_propP, div_typeP, $appendToP, attr_str, is_placeholder) {
-  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 = $container?.data?.()?.xuData?.recordid || (_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 : ''}>`);
-    }
-
-    // // Returns a 32-bit unsigned integer hash of a string (FNV-1a)
-    // function hash32(str) {
-    //   let h = 0x811c9dc5; // FNV offset basis
-    //   for (let i = 0; i < str.length; i++) {
-    //     h ^= str.charCodeAt(i);
-    //     // multiply by FNV prime (2^24 + 2^8 + 0x93) with 32-bit overflow
-    //     h += (h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24);
-    //   }
-    //   // Convert to unsigned 32-bit
-    //   return h >>> 0;
-    // }
-
-    // function hash32hex(str) {
-    //   return (hash32(str) >>> 0).toString(16).padStart(8, '0');
-    // }
-
-    // const new_ui_id = hash32hex(ui_id);
-    // const new_ui_id = await func.common.sha256(ui_id);
-    const new_ui_id = await generate_xu_ui_id(SESSION_ID, nodeP, $container, paramsP, keyP);
-
-    $div
-      .attr('xu-ui-id', new_ui_id)
-      // .attr('xu-node-id', nodeP.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: new_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 (is_placeholder) {
-      $div.addClass('display_none');
-    }
-
-    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,
-          _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.workflow)) 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.workflow) {
-        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;
-  };
-  try {
-    let count = await get_view_events_count('screen_ready');
-
-    if (!count) return;
-    return await execute_view_events(sourceP);
-  } catch (error) {
-    debugger;
-  }
-};
-func.UI.screen.screen_loading_done = async function (SESSION_ID, paramsP, $div, jobNoP) {
-  // console.log($div.attr('xu-ui-id'));
-
-  // await
-  let retries = 0;
-  let interval = setInterval(() => {
-    if (!$(SESSION_OBJ[SESSION_ID].root_element).find(`[xu-ui-id=${$div.attr('xu-ui-id')}]`).length && !$(SESSION_OBJ[SESSION_ID].root_element).find(`[xu-panel-wrapper-id=${$div.attr('xu-ui-id')}]`).length && !$div.attr('xu-ui-id') && $div.attr('xu-ui-id')) {
-      retries++;
-      if (retries > 100) {
-        console.warn('deadlock detected for screen ready');
-      } else {
-        return $div;
-      }
-    }
-
-    clearInterval(interval);
-
-    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,
-        });
-        // }
-      }
-    }
-  }, 100);
-
-  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;
-
-  const 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, $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) {
-      let node_promises = [];
-      for (const [key, val] of Object.entries(nodeP.children)) {
-        node_promises.push(
-          new Promise(async (resolve, reject) => {
-            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);
-
-            resolve();
-          }),
-        );
-      }
-      await Promise.all(node_promises);
-    }
-    return await done($divP);
-  };
-
-  //   const iterate_child = async function ($divP, nodeP, parent_infoP, $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 || !glb.DEBUG_MODE) return $elm;
-      const $el = $(`[xu-ui-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, e) {
-    if (is_skeleton || (e && (EXP_BUSY || UI_WORKER_OBJ.jobs.length))) 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.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>'); //.attr('xu-ui-id', SESSION_ID);
-          $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 = await 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 = fieldIdP in props ? 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 () {
-          const get_css_path = function (resource) {
-            if (_session.worker_type === 'Dev') {
-              return `../../plugins/${plugin_name}/${resource}`;
-            }
-            return `https://${_session.domain}/plugins/${plugin_name}/${APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name].manifest[resource].dist ? 'dist/' : ''}${resource}?gtp_token=${_session.gtp_token}&app_id=${_session.app_id}`;
-          };
-          let path = get_css_path('style.css');
-          func.utils.load_css_on_demand(path);
-        };
-
-        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 = await 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();
-            // func.UI.screen.hover_in(SESSION_ID, null, $container, paramsP, is_skeleton);
-          },
-          function (e) {
-            // func.UI.screen.hover_out(SESSION_ID, $container, is_skeleton, paramsP);
-            hover_out();
-          },
-        );
-      }
-
-      const ret = await iterate_child($div, nodeP, 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 }, $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 = await 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) {
-        // render N
-        return (ret.$new_div = $('<template>').append($div));
-      }
-
-      let $ret_panel_div = ret.$new_div;
-
-      if (!$ret_panel_div?.children()?.length) {
-        ////// render default children tree
-        if (nodeP.children.length) {
-          $ret_panel_div = await func.UI.screen.render_ui_tree(SESSION_ID, $container, nodeP.children[0], parent_infoP, paramsP, jobNoP, null, 0, null, nodeP, null, $root_container);
-        }
-      }
-
-      let ret_done = await done($ret_panel_div);
-
-      return ret_done;
-    },
-  };
-
-  const draw_html_element_org = async function (element) {
-    const done = async function (ret = {}) {
-      return $div;
-    };
-    if (!element || element === 'script') return await done();
-    let str = '';
-
-    var $div = await 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, e);
-      },
-      function (e) {
-        hover_out();
-      },
-    );
-    if (paramsP.paramsP === 'grid' || parent_infoP?.iterate_info) {
-      $div.on('click contextmenu', function (e) {
-        hover_in($div, e);
-      });
-    }
-
-    // let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $container, nodeP, $div, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true);
-    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 || nodeP.tagName === 'svg' || !_.isEmpty(nodeP?.attributes?.['xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-html']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-html'])) {
-      return await done(ret);
-    }
-    // check if iterator made to prevent children render
-
-    if (nodeP?.attributes?.['xu-viewport'] == 'true') {
-      // const xu_viewport = async function () {
-      //   const data = { $div: $div.clone(true), nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container };
-      //   const container_id = $container.attr('xu-ui-id');
-      //   if (!UI_WORKER_OBJ.pending_for_viewport_render[container_id]) {
-      //     UI_WORKER_OBJ.pending_for_viewport_render[container_id] = { base_$div: $div, data: [], $container };
-      //     await iterate_child($div, nodeP, parent_infoP, $root_container);
-      //   } else {
-      //     $div.remove();
-      //   }
-      //   UI_WORKER_OBJ.pending_for_viewport_render[container_id].data.push(data);
-
-      //   // if (!$div.children().length) {
-      //   //   // render the first element to determine height
-      //   //   await iterate_child($div, nodeP, parent_infoP, $root_container);
-      //   //   // hover_in($div);
-      //   //   // func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', data, null, null, paramsP.dsSessionP);
-      //   // } else {
-      //   // }
-      // };
-      const xu_viewport = function () {
-        const observer_inViewport = new IntersectionObserver(
-          function (entries) {
-            entries.forEach((entry) => {
-              if (entry.isIntersecting) {
-                $(entry.target).trigger('inViewport');
-
-                // Optional: stop observing once triggered
-                observer_inViewport.unobserve(entry.target);
-              }
-            });
-          },
-          {
-            threshold: 0.1, // Trigger when 10% of element is visible
-          },
-        );
-
-        const observer_outViewport = new IntersectionObserver(
-          function (entries) {
-            entries.forEach((entry) => {
-              if (!entry.isIntersecting) {
-                // Element is OUT of viewport - trigger custom event
-                $(entry.target).trigger('outViewport');
-
-                // Optional: stop observing once triggered
-                // observer_outViewport.unobserve(entry.target);
-              }
-            });
-          },
-          {
-            threshold: 0, // Trigger when element is completely out of view
-          },
-        );
-
-        let ui_job_id;
-        $div.on('inViewport', function () {
-          if ($div.children().length) {
-            $div.removeClass('skeleton');
-            return;
-          }
-
-          // if (UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]) {
-          //   $div[0].style.removeProperty('height');
-          //   $div.removeClass('skeleton');
-          //   $div.html(UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]);
-          // } else {
-          hover_in($div);
-          ui_job_id = func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', { $div, nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container }, null, null, paramsP.dsSessionP);
-          // }
-          observer_outViewport.observe($div[0]);
-        });
-
-        $div.on('outViewport', function () {
-          func.UI.worker.delete_job(SESSION_ID, ui_job_id);
-
-          if ($div.children().length) {
-            // UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')] = $div.children().clone(true);
-            $div.empty();
-            const height = $div?.data()?.xuData?.viewport_height || 10;
-            if (typeof height !== 'undefined') {
-              $div.css('height', height);
-            }
-          }
-          // $div.addClass('skeleton');
-          observer_inViewport.observe($div[0]);
-        });
-        $div.addClass('skeleton');
-        observer_inViewport.observe($div[0]);
-      };
-      xu_viewport();
-    } else {
-      await iterate_child($div, nodeP, parent_infoP, $root_container);
-    }
-
-    // const ret_iterate_child = await iterate_child($div, nodeP, parent_infoP, null, $root_container);
-    return await done(ret);
-  };
-
-  const draw_html_element = async function (element) {
-    const done = async function (ret = {}) {
-      const xu_ui_id = $div.attr('xu-ui-id');
-      $div.removeClass('display_none');
-      if (ret.has_xu_exp_render_attribute) {
-        // $div.css('display', 'unset');
-
-        const xu_render_cache_id = await get_xu_render_cache_str(SESSION_ID, paramsP.dsSessionP, Object.keys($div.data()?.xuData?.attr_exp_info?.['xu-render']?.fields || {}));
-        const _$div = $div.clone(true);
-        UI_WORKER_OBJ.xu_render_cache[xu_ui_id + xu_render_cache_id] = { $div: _$div, paramsP, data: _$div.data() };
-        nodeP.xu_render_xu_ui_id = xu_ui_id;
-        nodeP.xu_render_cache_id = xu_render_cache_id;
-
-        if (ret.xu_render_background_processing) {
-          temp_$div.remove();
-          // $container.find(`[xu-ui-id="${xu_ui_id}"]`).remove();
-          return $div;
-        } else {
-          // $div.css('display', 'unset');
-          temp_$div.replaceWith($div);
-          return $div;
-        }
-      } else {
-        if (ret.has_xu_render_attribute) {
-          temp_$div.remove();
-          return $div;
-        }
-        // $div.css('display', 'unset');
-        temp_$div.replaceWith($div);
-        return $div;
-      }
-    };
-    if (!element || element === 'script') return await done();
-    let str = '';
-
-    var temp_$div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, element, null, str, true);
-
-    let temp_$container = $('<tmp>').data('xuData', $container.data().xuData);
-    let $div = temp_$div.clone(true);
-
-    // $div.css('display', 'none');
-
-    $div.hover(
-      function (e) {
-        hover_in($div, e);
-      },
-      function (e) {
-        hover_out();
-      },
-    );
-    if (paramsP.paramsP === 'grid' || parent_infoP?.iterate_info) {
-      $div.on('click contextmenu', function (e) {
-        hover_in($div, e);
-      });
-    }
-
-    let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, temp_$container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true);
-    if (ret.abort || nodeP.tagName === 'svg' || !_.isEmpty(nodeP?.attributes?.['xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-html']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-html'])) {
-      return await done(ret);
-    }
-    // check if iterator made to prevent children render
-
-    if (nodeP?.attributes?.['xu-viewport'] == 'true') {
-      // const xu_viewport = async function () {
-      //   const data = { $div: $div.clone(true), nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container };
-      //   const container_id = $container.attr('xu-ui-id');
-      //   if (!UI_WORKER_OBJ.pending_for_viewport_render[container_id]) {
-      //     UI_WORKER_OBJ.pending_for_viewport_render[container_id] = { base_$div: $div, data: [], $container };
-      //     await iterate_child($div, nodeP, parent_infoP, $root_container);
-      //   } else {
-      //     $div.remove();
-      //   }
-      //   UI_WORKER_OBJ.pending_for_viewport_render[container_id].data.push(data);
-
-      //   // if (!$div.children().length) {
-      //   //   // render the first element to determine height
-      //   //   await iterate_child($div, nodeP, parent_infoP, $root_container);
-      //   //   // hover_in($div);
-      //   //   // func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', data, null, null, paramsP.dsSessionP);
-      //   // } else {
-      //   // }
-      // };
-      const xu_viewport = function () {
-        const observer_inViewport = new IntersectionObserver(
-          function (entries) {
-            entries.forEach((entry) => {
-              if (entry.isIntersecting) {
-                $(entry.target).trigger('inViewport');
-
-                // Optional: stop observing once triggered
-                observer_inViewport.unobserve(entry.target);
-              }
-            });
-          },
-          {
-            threshold: 0.1, // Trigger when 10% of element is visible
-          },
-        );
-
-        const observer_outViewport = new IntersectionObserver(
-          function (entries) {
-            entries.forEach((entry) => {
-              if (!entry.isIntersecting) {
-                // Element is OUT of viewport - trigger custom event
-                $(entry.target).trigger('outViewport');
-
-                // Optional: stop observing once triggered
-                // observer_outViewport.unobserve(entry.target);
-              }
-            });
-          },
-          {
-            threshold: 0, // Trigger when element is completely out of view
-          },
-        );
-
-        let ui_job_id;
-        $div.on('inViewport', function () {
-          if ($div.children().length) {
-            $div.removeClass('skeleton');
-            return;
-          }
-
-          // if (UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]) {
-          //   $div[0].style.removeProperty('height');
-          //   $div.removeClass('skeleton');
-          //   $div.html(UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]);
-          // } else {
-          hover_in($div);
-          ui_job_id = func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', { $div, nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, temp_$container }, null, null, paramsP.dsSessionP);
-          // }
-          observer_outViewport.observe($div[0]);
-        });
-
-        $div.on('outViewport', function () {
-          func.UI.worker.delete_job(SESSION_ID, ui_job_id);
-
-          if ($div.children().length) {
-            // UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')] = $div.children().clone(true);
-            $div.empty();
-            const height = $div?.data()?.xuData?.viewport_height || 10;
-            if (typeof height !== 'undefined') {
-              $div.css('height', height);
-            }
-          }
-          // $div.addClass('skeleton');
-          observer_inViewport.observe($div[0]);
-        });
-        $div.addClass('skeleton');
-        observer_inViewport.observe($div[0]);
-      };
-      xu_viewport();
-    } else {
-      // if (ret.xu_render_background_processing) {
-      //   // let temp_$div = $div.clone(true);
-      //   iterate_child($div, nodeP, parent_infoP, $root_container);
-      // } else {
-      //   await iterate_child($div, nodeP, parent_infoP, $root_container);
-      // }
-      if (!ret.xu_render_background_processing) {
-        iterate_child($div, nodeP, parent_infoP, $root_container);
-      }
-    }
-
-    // const ret_iterate_child = await iterate_child($div, nodeP, parent_infoP, null, $root_container);
-    return await done(ret);
-  };
-
-  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]();
-  }
-  // const xu_viewport = async function () {
-  //   const data = { $div, nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container };
-  //   const container_id = $container.attr('xu-ui-id');
-  //   if (!UI_WORKER_OBJ.pending_for_viewport_render[container_id]) {
-  //     UI_WORKER_OBJ.pending_for_viewport_render[container_id] = { base_$div: $div, data: [], $container };
-  //     await iterate_child($div, nodeP, parent_infoP, $root_container);
-  //   }
-  //   UI_WORKER_OBJ.pending_for_viewport_render[container_id].data.push(data);
-  // };
-
-  // if (nodeP?.attributes?.['xu-viewport'] == 'true') {
-  //   return await xu_viewport();
-  // } else {
-  if (!glb.new_xu_render) {
-    return await draw_html_element_org(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
-
-        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);
-      }
-    }
-  }
-
-  if (glb.new_xu_render) {
-    for (const [ui_cache_key, ui_cache_val] of Object.entries(UI_WORKER_OBJ.xu_render_cache)) {
-      let prog_obj = await func.utils.VIEWS_OBJ.get(SESSION_ID, ui_cache_val.paramsP.prog_id);
-      if (prog_obj?.progDataSource?.dataSourceTableId === doc_change.table_id) {
-        ui_cache_val.$div = null;
-      }
-    }
-  }
-};
-
-const get_parent_ds_fields = function (SESSION_ID, dsSessionP) {
-  var _session = SESSION_OBJ[SESSION_ID];
-  var _ds = _session.DS_GLB[dsSessionP];
-
-  const idx = func.common.find_ROWID_idx(_ds, _ds.currentRecordId);
-  const data = _ds.data_feed.rows[idx];
-
-  let obj = {};
-
-  if (typeof _ds.parentDataSourceNo !== 'undefined') {
-    obj = get_parent_ds_fields(SESSION_ID, _ds.parentDataSourceNo);
-  }
-
-  return { ...data, ...obj };
-};
-
-const get_xu_render_cache_str = async function (SESSION_ID, dsSessionP, exclude_vars = []) {
-  const fields_obj = get_parent_ds_fields(SESSION_ID, dsSessionP);
-
-  let str = '';
-
-  for (const [key, val] of Object.entries(fields_obj)) {
-    if (exclude_vars.includes(key)) continue;
-    str += typeof val !== 'undefined' ? JSON.stringify(val) : '';
-  }
-
-  return 'C-' + (await func.common.sha256(str));
-};
- func.UI.component = {};
+  func.UI.component = {};
 
 func.UI.component.create_app_modal_component = function (
   SESSION_ID,