@xuda.io/runtime-bundle 1.0.1256 → 1.0.1258

package/js/xuda-runtime-bundle.js

@@ -31903,1137 +31903,1138 @@ const get_params_obj_new = async function (SESSION_ID, prog_id, nodeP, dsSession
   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;
-//           }
+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;
 
-//           if (!val.value) {
-//             val.value = '_empty_panel_program';
-//           }
+  // 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;
+          }
 
-//           ret = await render_panel();
+          if (!val.value) {
+            val.value = '_empty_panel_program';
+          }
 
-//           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;
-//         };
+          ret = await render_panel();
 
-//         if (is_init) {
-//           let ret = await init_program();
-//           return ret;
-//         }
-//         return alter_program();
-//       },
+          return ret;
+        };
+        const alter_program = async function () {
+          var _session = SESSION_OBJ[SESSION_ID];
+          var _ds = _session.DS_GLB[paramsP.dsSessionP];
 
-//       '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);
+          /////////////////
+          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);
 
-//                 $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 };
-//         }
+            return ret;
+          }
+          if (!val.value) {
+            return { abort: true };
+          }
+          await render_panel();
+          return ret;
+        };
 
-//         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;
-//       },
-//     },
-//   };
+        if (is_init) {
+          let ret = await init_program();
+          return ret;
+        }
+        return alter_program();
+      },
 
-//   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();
-//       }
+      'xu-render': async function ($elm, val) {
+        let ret = await common_fx['xu-render']($elm, val, true);
+        return ret;
+      },
+      'xu-ref': async function ($elm, val) {
+        if (!val.value) return {};
+        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);
 
-//       // 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();
-//     });
-//   };
+                $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 };
+        }
 
-//   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;
-//       }
+        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;
+      },
+    },
+  };
 
-//       return {};
-//     },
-//     'xu-ref': async function ($elm, val, dsSession) {
-//       if (!val.value) return {};
+  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;
 
-//       func.UI.update_xu_ref(SESSION_ID, dsSession || paramsP.dsSessionP, val.value, $elm);
+          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();
+      }
 
-//       // Select the node that will be observed for mutations
-//       const targetNode = $elm[0];
+      // 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();
+    });
+  };
 
-//       if (!targetNode) return;
+  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;
+      }
 
-//       // Options for the observer (which mutations to observe)
-//       const config = { attributes: true, childList: true, subtree: true };
+      return {};
+    },
+    'xu-ref': async function ($elm, val, dsSession) {
+      if (!val.value) return {};
 
-//       // Callback function to execute when mutations are observed
-//       const callback = (mutationList, observer) => {
-//         func.UI.screen.refresh_xu_attributes(SESSION_ID, [val.value]);
-//       };
+      func.UI.update_xu_ref(SESSION_ID, dsSession || paramsP.dsSessionP, val.value, $elm);
 
-//       // Create an observer instance linked to the callback function
-//       const observer = new MutationObserver(callback);
+      // Select the node that will be observed for mutations
+      const targetNode = $elm[0];
 
-//       // Start observing the target node for configured mutations
-//       observer.observe(targetNode, config);
+      if (!targetNode) return;
 
-//       // Later, you can stop observing
-//       // observer.disconnect();
+      // Options for the observer (which mutations to observe)
+      const config = { attributes: true, childList: true, subtree: true };
 
-//       return {};
-//     },
-//     'xu-bind': async function ($elm, val) {
-//       if (is_skeleton) return;
+      // Callback function to execute when mutations are observed
+      const callback = (mutationList, observer) => {
+        func.UI.screen.refresh_xu_attributes(SESSION_ID, [val.value]);
+      };
 
-//       let val_is_reference_field = false;
+      // Create an observer instance linked to the callback function
+      const observer = new MutationObserver(callback);
 
-//       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 {};
+      // Start observing the target node for configured mutations
+      observer.observe(targetNode, config);
 
-//       let is_dynamic_field = false;
-//       let field_prop;
-//       let bind_field_id;
+      // Later, you can stop observing
+      // observer.disconnect();
 
-//       const input_field_type = $elm.attr('type');
+      return {};
+    },
+    'xu-bind': async function ($elm, val) {
+      if (is_skeleton) return;
 
-//       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;
-//       };
+      let val_is_reference_field = false;
 
-//       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 {};
-//       }
+      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 {};
 
-//       const field_changed = async function (e) {
-//         var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_dsP];
+      let is_dynamic_field = false;
+      let field_prop;
+      let bind_field_id;
 
-//         // 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;
-//           }
+      const input_field_type = $elm.attr('type');
 
-//           let datasource_changes = {
-//             [_dsP]: {
-//               [_ds.currentRecordId]: {
-//                 [bind_field_id]: value,
-//               },
-//             },
-//           };
+      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);
 
-//           return await func.datasource.update(SESSION_ID, datasource_changes);
-//         }
+            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;
+      };
 
-//         // 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]);
+      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 {};
+      }
 
-//           let datasource_changes = {
-//             [_dsP]: {
-//               [_ds.currentRecordId]: {
-//                 [bind_field_id]: [value_from_getter],
-//               },
-//             },
-//           };
+      const field_changed = async function (e) {
+        var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_dsP];
 
-//           return await func.datasource.update(SESSION_ID, datasource_changes);
-//         }
+        // 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;
+          }
 
-//         var value = await func.common.get_cast_val(SESSION_ID, 'xu-bind', 'value', field_prop.props.fieldType, bind.getter($elm[0]));
+          let datasource_changes = {
+            [_dsP]: {
+              [_ds.currentRecordId]: {
+                [bind_field_id]: value,
+              },
+            },
+          };
 
-//         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]));
-//         }
+          return await func.datasource.update(SESSION_ID, datasource_changes);
+        }
 
-//         if (!_ds.currentRecordId) return;
+        // 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,
-//             },
-//           },
-//         };
+          let datasource_changes = {
+            [_dsP]: {
+              [_ds.currentRecordId]: {
+                [bind_field_id]: [value_from_getter],
+              },
+            },
+          };
 
-//         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);
+          return await func.datasource.update(SESSION_ID, datasource_changes);
+        }
 
-//               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);
+        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' && val_is_reference_field) {
-//                 let obj_item = new_arr[arr_idx];
+        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]));
+        }
 
-//                 let e_exp = val.value.replace(bind_field_id, 'obj_item');
+        if (!_ds.currentRecordId) return;
 
-//                 let new_val = eval(e_exp + (input_field_type === 'string' ? `="${value}"` : `=${value}`));
+        let datasource_changes = {
+          [_dsP]: {
+            [_ds.currentRecordId]: {
+              [bind_field_id]: 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);
+        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);
 
-//               await func.datasource.update(SESSION_ID, datasource_changes, null, true);
-//             }
-//           }
-//         }
+              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);
 
-//         await func.datasource.update_changes_for_out_parameter(SESSION_ID, _dsP, _ds.parentDataSourceNo);
-//       };
+              if (field_prop.props.fieldType === 'object' && val_is_reference_field) {
+                let obj_item = new_arr[arr_idx];
 
-//       const bind = new UI_FRAMEWORK_PLUGIN.bind();
+                let e_exp = val.value.replace(bind_field_id, 'obj_item');
 
-//       bind.listener($elm[0], field_changed);
+                let new_val = eval(e_exp + (input_field_type === 'string' ? `="${value}"` : `=${value}`));
 
-//       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();
-//       });
+                new_arr[arr_idx] = obj_item;
+              } else {
+                new_arr[arr_idx] = value;
+              }
+              // datasource_changes[_dsP][_ds.currentRecordId][reference_source_obj.fieldIdP] = new_arr;
 
-//       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 {};
-//         };
+              let datasource_changes = {
+                [_dsP]: {
+                  [_ds.currentRecordId]: {
+                    [reference_source_obj.fieldIdP]: new_arr,
+                  },
+                },
+              };
 
-//         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);
-//               }
+              await func.datasource.update(SESSION_ID, datasource_changes, null, true);
+            }
+          }
+        }
 
-//               let original_data_obj = $elm.data().xuData.original_data_obj;
+        await func.datasource.update_changes_for_out_parameter(SESSION_ID, _dsP, _ds.parentDataSourceNo);
+      };
 
-//               if (!original_data_obj) {
-//                 func.events.delete_job(SESSION_ID, jobNoP);
-//                 return { delete_job: jobNoP };
-//               }
+      const bind = new UI_FRAMEWORK_PLUGIN.bind();
 
-//               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,
-//               );
+      bind.listener($elm[0], field_changed);
 
-//               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 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();
+      });
 
-//               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());
-//                 }
+      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);
 
-//                 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();
-//                 }
+            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();
 
-//                 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;
-//           }
+            $elm.remove();
+            return { abort: true };
+          }
+          return {};
+        };
 
-//           let tmp_$div = $('<div>');
+        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 $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
+              let original_data_obj = $elm.data().xuData.original_data_obj;
 
-//             $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;
-//           }
+              if (!original_data_obj) {
+                func.events.delete_job(SESSION_ID, jobNoP);
+                return { delete_job: jobNoP };
+              }
 
-//           //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();
-//             }
-//           });
+              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,
+              );
 
-//           $elm.replaceWith(tmp_$div.children());
-//           func.events.delete_job(SESSION_ID, jobNoP);
-//           // }
-//         };
-//         if (is_init) {
-//           return init_render();
-//         }
-//         return await post_render();
-//       };
+              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 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 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());
+                }
 
-//         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 (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();
+                }
 
-//               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
+                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;
+          }
 
-//               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;
-//           }
+          let tmp_$div = $('<div>');
 
-//           /////////// !value ///////////
+          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
 
-//           const xu_ui_id = $elm.attr('xu-ui-id');
+            $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,
+            };
 
-//           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();
-//       };
+            $xurender.data().xuData.original_data_obj = original_data_obj;
+          }
 
-//       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;
+          //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();
+            }
+          });
 
-//         // find reference source field
-//         let reference_source_obj;
+          $elm.replaceWith(tmp_$div.children());
+          func.events.delete_job(SESSION_ID, jobNoP);
+          // }
+        };
+        if (is_init) {
+          return init_render();
+        }
+        return await post_render();
+      };
 
-//         const _progFields = await func.datasource.get_progFields(SESSION_ID, paramsP.dsSessionP);
+      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 };
+        };
 
-//         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 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;
+                      }
+                    }
+                  }
+                });
+              }
 
-//         const custom_iterator_key = $elm.data().xuData.iterator_key;
-//         const custom_iterator_val = $elm.data().xuData.iterator_val;
+              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
 
-//         let iterator_key = custom_iterator_key;
-//         let iterator_val = custom_iterator_val;
-//         let is_key_dynamic_field, is_val_dynamic_field;
+              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;
+          }
 
-//         // custom FOR_VAL name or namespaced default name
-//         if (!custom_iterator_key) {
-//           is_key_dynamic_field = true;
+          /////////// !value ///////////
 
-//           iterator_key = '_FOR_KEY';
-//         }
+          const xu_ui_id = $elm.attr('xu-ui-id');
 
-//         if (!custom_iterator_val) {
-//           is_val_dynamic_field = true;
+          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();
+      };
 
-//           iterator_val = '_FOR_VAL';
-//         }
+      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;
 
-//         var i = 0;
-//         for await (let [_key, _val] of Object.entries(arr)) {
-//           if (_.isArray(arr)) {
-//             _key = Number(_key);
-//           }
+        // find reference source field
+        let reference_source_obj;
 
-//           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');
-//               }
-//             }
-//           };
+        const _progFields = await func.datasource.get_progFields(SESSION_ID, paramsP.dsSessionP);
 
-//           var currentRecordId = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP].currentRecordId.toString();
+        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());
+          }
+        }
 
-//           await set_value(is_key_dynamic_field, currentRecordId, iterator_key, _key);
-//           await set_value(is_val_dynamic_field, currentRecordId, iterator_val, _val);
+        const custom_iterator_key = $elm.data().xuData.iterator_key;
+        const custom_iterator_val = $elm.data().xuData.iterator_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) || {};
-//           let _parent_info = klona.klona(parent_infoP) || {};
-//           _parent_info.iterate_info = iterate_info;
+        let iterator_key = custom_iterator_key;
+        let iterator_val = custom_iterator_val;
+        let is_key_dynamic_field, is_val_dynamic_field;
 
-//           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,
-//           );
+        // custom FOR_VAL name or namespaced default name
+        if (!custom_iterator_key) {
+          is_key_dynamic_field = true;
 
-//           $.each($divP.children(), function (key, val) {
-//             if ($(val)?.data()?.xuData) {
-//               $(val).data().xuData.iterate_info = iterate_info;
-//             }
-//           });
+          iterator_key = '_FOR_KEY';
+        }
 
-//           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, {});
+        if (!custom_iterator_val) {
+          is_val_dynamic_field = true;
 
-//         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,
-//           );
+          iterator_val = '_FOR_VAL';
+        }
 
-//           if (res.result) {
-//             $elm.addClass(cla);
-//           } else {
-//             $elm.removeClass(cla);
-//           }
+        var i = 0;
+        for await (let [_key, _val] of Object.entries(arr)) {
+          if (_.isArray(arr)) {
+            _key = Number(_key);
+          }
 
-//           $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;
+          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 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 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');
+              }
+            }
+          };
 
-//       let value = func.UI.screen.fix_val_defaults(val.key, exp_ret.result);
+          var currentRecordId = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP].currentRecordId.toString();
 
-//       var new_val = {
-//         key: val.key,
-//         value,
-//       };
+          await set_value(is_key_dynamic_field, currentRecordId, iterator_key, _key);
+          await set_value(is_val_dynamic_field, currentRecordId, iterator_val, _val);
 
-//       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;
+          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) || {};
+          let _parent_info = klona.klona(parent_infoP) || {};
+          _parent_info.iterate_info = iterate_info;
 
-//       $elm.data().xuData.debug_info.attribute_stat[new_val.key] = new_val.value;
+          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,
+          );
 
-//       // IGNORE UNDEFINED or NULL ATTRIBUTES
-//       if (typeof new_val.value === 'undefined' || new_val.value === null) {
-//         return {};
-//       }
+          $.each($divP.children(), function (key, val) {
+            if ($(val)?.data()?.xuData) {
+              $(val).data().xuData.iterate_info = iterate_info;
+            }
+          });
 
-//       // IGNORE ATTRIBUTES WITH EMPTY VALUES
-//       if (glb.solid_attributes.includes(new_val.key) && !new_val.value) {
-//         return {};
-//       }
+          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, {});
 
-//       if (new_val.key.substr(0, 2) === 'xu') {
-//         return await common_fx[new_val.key]($elm, new_val);
-//       }
+        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,
+          );
 
-//       $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 (res.result) {
+            $elm.addClass(cla);
+          } else {
+            $elm.removeClass(cla);
+          }
 
-//           if (val.event_modifiers && evt[val.event_modifiers]) {
-//             evt[val.event_modifiers]();
-//           }
+          $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;
 
-//           // 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;
+      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);
 
-//               if (!val2.data.enabled) continue; // added Jul 3, 25 - condition validate on execution
+      let value = func.UI.screen.fix_val_defaults(val.key, exp_ret.result);
 
-//               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(async function () {
-//         if ($elm.is(':visible')) {
-//           try {
-//             // var res = eval('(' + val.value + ')');
-//             // const fn = `(function(el) {
-//             //  ${val.value}
-//             //  })(document.querySelector(\`[xu-ui-id="${$elm.attr('xu-ui-id')}"]\`));`;
-
-//             const fn = `async (el)=>{${val.value} };`;
-
-//             var res = eval(fn);
-//             await res($elm[0]);
-//             // if (typeof res === 'function') {
-//             //   res($elm[0]);
-//             // }
-//           } catch (e) {
-//             eval(val.value);
-//           }
+      var new_val = {
+        key: val.key,
+        value,
+      };
 
-//           clearInterval(checkExist);
-//         }
-//       }, 100); // check every 100ms
+      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;
 
-//       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;
+      $elm.data().xuData.debug_info.attribute_stat[new_val.key] = new_val.value;
 
-//       var parser = new cssjs();
+      // IGNORE UNDEFINED or NULL ATTRIBUTES
+      if (typeof new_val.value === 'undefined' || new_val.value === null) {
+        return {};
+      }
 
-//       var parsed = parser.parseCSS(cssString);
-//       var xuUiId = `[xu-ui-id="${$elm.attr('xu-ui-id')}"]`;
+      // IGNORE ATTRIBUTES WITH EMPTY VALUES
+      if (glb.solid_attributes.includes(new_val.key) && !new_val.value) {
+        return {};
+      }
 
-//       $.each(parsed, function (key, val) {
-//         var selectors_arr = val.selector.split(',');
+      if (new_val.key.substr(0, 2) === 'xu') {
+        return await common_fx[new_val.key]($elm, new_val);
+      }
 
-//         $.each(selectors_arr, function (key2, val2) {
-//           selectors_arr[key2] = `${xuUiId} ${val2}, ${xuUiId}${val2}`;
-//           // console.log(new_selector);
-//         });
+      $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;
 
-//         val.selector = selectors_arr.join(',');
-//         // console.log(parsed);
-//       });
+        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;
+          }
 
-//       var newCSSString = parser.getCSSForEditor(parsed);
+          if (val.event_modifiers && evt[val.event_modifiers]) {
+            evt[val.event_modifiers]();
+          }
 
-//       $('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);
-//       }
+          // 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;
 
-//       return {};
-//     },
-//     'xu-ui-plugin': async function ($elm, val) {
-//       var _session = SESSION_OBJ[SESSION_ID];
+              if (!val2.data.enabled) continue; // added Jul 3, 25 - condition validate on execution
 
-//       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);
-//           }
+              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(async function () {
+        if ($elm.is(':visible')) {
+          try {
+            // var res = eval('(' + val.value + ')');
+            // const fn = `(function(el) {
+            //  ${val.value}
+            //  })(document.querySelector(\`[xu-ui-id="${$elm.attr('xu-ui-id')}"]\`));`;
 
-//           const plugin_index_src = await func.utils.get_plugin_npm_cdn(SESSION_ID, plugin_name, `${_plugin.manifest['index.mjs'].dist ? 'dist/' : ''}index.mjs`);
+            const fn = `async (el)=>{${val.value} };`;
 
-//           const plugin_index_resources = await import(plugin_index_src);
+            var res = eval(fn);
+            await res($elm[0]);
+            // if (typeof res === 'function') {
+            //   res($elm[0]);
+            // }
+          } catch (e) {
+            eval(val.value);
+          }
 
-//           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`);
+          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);
+          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.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);
-//           }
-//         }
-//       }
+          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 {};
-//     },
-//   };
+      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 (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 {};
-//     }
+    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;
-//   }
-// };
+    return await common_fx[xu_func]($elm, val);
+  } catch (error) {
+    debugger;
+  }
+};
 
-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) {
+func.UI.screen.execute_xu_functions_bad = 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;
 
   // Cache frequently accessed values
@@ -33793,6 +33794,7 @@ func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $
       },
 
       'xu-ref': async function ($elm, val) {
+        if (!val.value) return {};
         return await common_fx['xu-ref']($container, val, $container?.data?.()?.xuData?.xuPanelData?.xuData?.paramsP?.dsSessionP);
       },
     },
@@ -33890,335 +33892,335 @@ func.UI.screen.fix_val_defaults = function (key, val) {
   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 = [];
+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 _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_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}`;
+  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]);
+    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 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;
+  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)) {
+    // 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);
+  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 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];
-//     }
-//   }
+    // 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,
-//     );
-//   }
+  // 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;
-//       }
+  // 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?.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;
-//       }
+      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,
+      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);
-//     }
-//   }
+          value: await get_attr_value(attr),
+        },
+        is_init,
+      );
+      _ret = _.assignIn(_ret, ret);
+    }
+  }
 
-//   // ALL
+  // 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;
-//     }
+  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);
-//       }
+    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);
-//     }
+      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-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;
-//     }
+    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,
-//     );
+    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);
-//   }
+    _ret = _.assignIn(_ret, ret);
+  }
 
-//   // EXP for
+  // EXP for
 
-//   for await (const [key, val] of Object.entries(nodeP.attributes)) {
-//     if (_ret.abort || $container?.data()?.xuData?.pending_to_delete) break;
+  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];
+    const attr = key.split('xu-exp:')[1];
 
-//     if (!attr) {
-//       continue;
-//     }
+    if (!attr) {
+      continue;
+    }
 
-//     if (glb.html5_events_handler.includes(attr) || execute_attributes.includes(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);
-//   }
+    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
+  // AFTER
 
-//   for await (const [key, attr] of Object.entries(glb.run_xu_after)) {
-//     if ($container?.data()?.xuData?.pending_to_delete) break;
+  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 (glb.html5_events_handler.includes(attr) || execute_attributes.includes(attr)) continue;
 
-//     if (!nodeP.attributes || !nodeP.attributes[attr] & !nodeP.attributes[`xu-exp:${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);
-//   }
+    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
+  // 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;
-//   }
+  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;
-// };
+  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) {
+func.UI.screen.set_attributes_new_bad = async function (SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $elm, is_init, execute_attributes = [], refreshed_ds) {
   const done_exp = new Set(); // Use Set for O(1) lookups instead of array
 
   const _ds = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP];