@xuda.io/runtime-bundle 1.0.1148 → 1.0.1150

package/js/xuda-runtime-bundle.js

@@ -30952,7 +30952,1740 @@ func.datasource.get_args_property_value = async function (SESSION_ID, dsSession,
 
   return _value;
 };
-  func.UI.component = {};
+ 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,
+           func.UI.component = {};
 
 func.UI.component.create_app_modal_component = function (
   SESSION_ID,