impaktapps-ui-builder 1.0.621 → 1.0.622-copy.2

package/src/impaktapps-ui-builder/builder/services/component.ts

@@ -8,40 +8,52 @@ import { StyleSection } from "../build/uischema/styleSection";
 import { TableSection } from "../build/uischema/tableSection";
 import { ValueTab } from "../build/uischema/valueTab";
 import { ValidationSection } from "../build/uischema/validationSections";
-import { getFormdataFromSessionStorage, okHandler, saveFormdataInSessionStorage, saveHandler } from "./utils";
+import { getFormdataFromSessionStorage, validateAndShowErrors, okHandler, saveFormdataInSessionStorage, saveHandler } from "./utils";
 const sectionLabels = {
   Select: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
   MultipleSelect: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
-  Table: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
-  LeaderBoard: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
-  WrapperSection: ["Core", "Components", "Properties", "Style", "Validation"],
-  TabSection: ["Core", "Components", "Properties", "Style", "Validation"],
-  SpeedoMeter: ["Core", "Properties", "Events", "Style", "Validation"],
+  Table: ["Core", "Components", "Properties", "Events", "Style",],
+  LeaderBoard: ["Core", "Components", "Properties", "Events", "Style",],
+  WrapperSection: ["Core", "Components", "Properties", "Style",],
+  HorizontalLayout: ["Core", "Components", "Properties", "Style",],
+  TabSection: ["Core", "Components", "TabTitles", "Properties", "Style", "Validation"],
+  SpeedoMeter: ["Core", "Properties", "Events", "Style",],
   card: ["Core", "Properties", "Events", "Style", "Validation"],
   UploadFile: ["Core", "Events", "Style", "Validation"],
   Graph: ["Core", "Properties", "Events", "Style", "Validation"],
   DownloadFile: ["Core", "Events", "Style", "Validation"],
-  Box: ["Core", "Events", "Style", "Validation"],
+  Box: ["Core", "Properties", "Events", "Style", "Validation"],
   Properties: ["Core", "Properties", "Events", "Style", "Validation"],
-  ProgressBarCard: ["Core", "Properties", "Events", "Style", "Validation"],
-  RankCard: ["Core", "Properties", "Events", "Style", "Validation"],
+  ProgressBarCard: ["Core", "Properties", "Events", "Style"],
+  ProgressBar: ["Core", "Properties", "Events", "Style",],
+  RankCard: ["Core", "Properties", "Events", "Style",],
+  MetricCard: ["Core", "Properties", "Events", "Style", "Validation"],
+  HierarchyChart: ["Core","Components","Properties", "Events", "Style", "Validation"],
   Slider: ["Core", "Components", "Events", "Style", "Validation"],
-  Timer: ["Core", "Events", "Style", "Validation"],
-  Rank: ["Core", "Events", "Style", "Validation"],
+  Timer: ["Core", "Events", "Style",],
+  Rank: ["Core", "Events", "Style",],
   Button: ["Core", "Properties", "Events", "Style", "Validation"],
-  Array: ["Core", "Components",  "Properties","Validation"],
+  ButtonGroup: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
+  Array: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
   Radio: ["Core", "Properties", "Events", "Style", "Validation"],
   Text: ["Core", "Properties", "Events", "Style", "Validation"],
   TextArea: ["Core", "Properties", "Events", "Style", "Validation"],
-  PopUp: ["Core", "Components", "Properties", "Style"],
+  PopUp: ["Core", "Components", "Properties", "Events", "Style"],
+  PopOver: ["Core", "Components", "Properties", "Style"],
+  PdfViewer: ["Core", "Properties", "Style"],
   Stepper: ["Core", "Components", "Properties", "Events", "Style"],
   DataGrid: ["Core", "Components", "Properties", "Events", "Style"],
   InputSlider: ["Core", "Properties", "Events", "Style", "Validation"],
   TreeMap: ["Core", "Components", "Properties", "Events", "Style"],
   ColumnGroup: ["Core", "Components"],
-  Thought: ["Core", "Properties", "Events", "Style", "Validation"]
+  Thought: ["Core", "Properties", "Events", "Style",],
+  Date: ["Core", "Properties", "Events", "Style", "Validation"],
+  DateTime: ["Core", "Properties", "Events", "Style", "Validation"],
+  Image: ["Core", "Properties", "Events", "Style"],
+  FileInput: ["Core", "Properties", "Events", "Style", "Validation"],
+  Camera: ["Core", "Properties", "Events", "Style", "Validation"],
+  OTP_Input: ["Core", "Properties", "Events", "Style", "Validation"],
 }
-
 export function refreshPage(type: string, store: any) {
   const UiSchema = _.cloneDeep(componentBasicUiSchema(store.theme.myTheme))
   const currentConfig = JSON.parse(sessionStorage.getItem("pageFormdata"));
@@ -52,6 +64,7 @@ export function refreshPage(type: string, store: any) {
       Style: StyleSection,
       Events: EventSection(store.theme.myTheme),
       Components: TableSection(store.theme.myTheme),
+      TabTitles: TableSection(store.theme.myTheme, "tabLabelElements"),
       Properties: buildPropertiesSection(type),
       Validation: ValidationSection
     }
@@ -63,12 +76,12 @@ export function refreshPage(type: string, store: any) {
   // Get Widget Type of parent
   const path = store.searchParams?.get("path");
   const lastDotIndex = path.lastIndexOf('.')
-  const parentPath = path.slice(0,lastDotIndex)
+  const parentPath = path.slice(0, lastDotIndex)
 
   const parentObj = _.get(currentConfig, parentPath)
 
-  if(parentObj?.type === "Table"){
-    UiSchema.elements[0].elements[0].elements[4] = 
+  if (parentObj?.type === "Table" || parentObj?.type === "ColumnGroup") {
+    UiSchema.elements[0].elements[0].elements[4] =
     {
       type: "Control",
       scope: "#/properties/columnFormat",
@@ -83,7 +96,7 @@ export function refreshPage(type: string, store: any) {
         },
       },
     };
-    UiSchema.elements[0].elements[0].elements[6] = 
+    UiSchema.elements[0].elements[0].elements[6] =
     {
       type: "Control",
       scope: "#/properties/filteringOptions",
@@ -98,7 +111,7 @@ export function refreshPage(type: string, store: any) {
         },
       },
     };
-    UiSchema.elements[0].elements[0].elements[5] = 
+    UiSchema.elements[0].elements[0].elements[5] =
     {
       type: "Control",
       scope: "#/properties/enableFilter",
@@ -113,52 +126,91 @@ export function refreshPage(type: string, store: any) {
         },
       },
     },
-    UiSchema.elements[0].elements[0].elements[7] = 
-    {
-      type: "Control",
-      scope: "#/properties/enableSorting",
-      options: {
-        widget: "RadioInputField",
+      UiSchema.elements[0].elements[0].elements[7] =
+      {
+        type: "Control",
+        scope: "#/properties/enableSorting",
+        options: {
+          widget: "RadioInputField",
+        },
+        config: {
+          layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+          main: {
+            label: "Enable Sorting",
+            options: ["Yes", "No"],
+          },
+        },
       },
-      config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
-        main: {
-          label: "Enable Sorting",
-          options: ["Yes", "No"],
+      UiSchema.elements[0].elements[0].elements[8] =
+      {
+        type: "Control",
+        scope: "#/properties/columnKey",
+        config: {
+          layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+          main: {
+            label: "Column Key",
+          },
+        },
+        options: {
+          widget: "InputField",
         },
       },
-    },
-    UiSchema.elements[0].elements[0].elements[8] = 
-    {
+      UiSchema.elements[0].elements[0].elements[9] =
+      {
+        type: "Control",
+        scope: "#/properties/elementType",
+        options: {
+          widget: "SelectInputField",
+        },
+        config: {
+          layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+          main: {
+            label: "Element Type",
+          },
+        },
+      }
+    UiSchema.elements[0].elements[0].elements[10] = {
       type: "Control",
-      scope: "#/properties/columnKey",
+      scope: "#/properties/dateFormat",
+      options: {
+        widget: "SelectInputField",
+      },
       config: {
         layout: { xs: 6, sm: 6, md: 4, lg: 3 },
         main: {
-          label: "Column Key",
+          label: "Date Time Format",
         },
       },
+    }
+    UiSchema.elements[0].elements[0].elements[11] = {
+      type: "Control",
+      scope: "#/properties/emptyBox",
       options: {
-        widget: "InputField",
+        widget: "EmptyBox",
       },
-    },
-    UiSchema.elements[0].elements[0].elements[9] = 
-     {
+      config: {
+        layout: { xs: 0, sm: 0, md: 0, lg: 6 },
+      },
+    }
+  }
+  if (parentObj?.type === "LeaderBoard") {
+    UiSchema.elements[0].elements[0].elements[4] =
+    {
       type: "Control",
-      scope: "#/properties/elementType",
+      scope: "#/properties/columnFormat",
       options: {
         widget: "SelectInputField",
       },
       config: {
         layout: { xs: 6, sm: 6, md: 4, lg: 3 },
         main: {
-          label: "Element Type",
+          label: "Column Format",
         },
       },
-    }
+    };
   }
 
-  if (sessionStorage.getItem("copiedConfig") ) {
+  if (sessionStorage.getItem("copiedConfig")) {
     this.ElementPathSetter(UiSchema);
   }
   store.setUiSchema(UiSchema);
@@ -184,33 +236,33 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       if (sessionStorage.getItem("copiedConfig")) {
         schema.properties.RemoveItemButton.disabled = false;
       }
-      
+
       const config = JSON.parse(sessionStorage.getItem("pageFormdata"));
       const path = store.searchParams?.get("path");
       const id = store.searchParams?.get("id")
 
-      let pathArray = [{label: config.name ?? "NewPage", path: `/PageMaster${id ? `?id=${id}` : ''}`}];
+      let pathArray = [{ label: config.name ?? "NewPage", path: `/PageMaster${id ? `?id=${id}` : ''}` }];
 
       if (path) {
-              const pathArrayAll = path.split(".");
-              const arr: any = []
-              pathArrayAll.map((e: string, i: number) => {
-                  if (i === 0) {
-                      arr.push(e)
-                      return;
-                  }
-                  arr.push(`${arr[i - 1]}.${e}`)
-              })
+        const pathArrayAll = path.split(".");
+        const arr: any = []
+        pathArrayAll.map((e: string, i: number) => {
+          if (i === 0) {
+            arr.push(e)
+            return;
+          }
+          arr.push(`${arr[i - 1]}.${e}`)
+        })
 
 
-              arr.map((e) => {
-                  const data = _.get(config, e)
-                  pathArray.push({
-                    label: data?.name || data?.eventType || "NewComponent",
-                    path: `/Component?path=${e}${id ? `&id=${id}` : ''}`
-                  });
-              })
-          }
+        arr.map((e) => {
+          const data = _.get(config, e)
+          pathArray.push({
+            label: data?.name || data?.eventType || "NewComponent",
+            path: `/Component?path=${e}${id ? `&id=${id}` : ''}`
+          });
+        })
+      }
 
       schema.properties.pageName.path = pathArray
       return schema;
@@ -226,13 +278,19 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       }
     },
     editComponents: function () {
+
+      if (validateAndShowErrors(store)) return;
       const rowId = dynamicData.path.split(".")[1];
       const path = store.searchParams?.get("path");
       const id = store.searchParams?.get("id");
       saveFormdataInSessionStorage(store.ctx.core.data, path)
       if (path) {
-        const path = store.searchParams?.get("path");
-        const finalPath = `${path}.elements[${rowId}]`
+        let finalPath = `${path}`;
+        if (dynamicData?.path?.startsWith("tabLabel")) {
+          finalPath = `${finalPath}.tabLabelElements[${rowId}]`
+        } else {
+          finalPath = `${finalPath}.elements[${rowId}]`
+        }
         store.searchParams.set("path", finalPath)
         store.setSearchParams(store.searchParams)
         this.setPage()
@@ -243,7 +301,12 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     deleteComponents: function (shouldUpdateDialog: boolean = true) {
       const path = store.searchParams?.get("path");
       const rowId = sessionStorage.getItem('rowId');
-      store.formData.elements.splice(rowId, 1);
+      const isTabLabelElements = sessionStorage.getItem('isTabLabelElements') === "true";
+      if (isTabLabelElements) {
+        store.formData.tabLabelElements.splice(rowId, 1);
+      } else {
+        store.formData.elements.splice(rowId, 1);
+      }
       const response = saveFormdataInSessionStorage(store.ctx.core.data, path)
       const data = path ? _.get(response, path) : response;
       store.setFormdata(data);
@@ -251,6 +314,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
         store.updateDialog("popUpComponentSection");
       }
       sessionStorage.removeItem('rowId');
+      sessionStorage.removeItem('isTabLabelElements');
     },
     deleteEvent: function (shouldUpdateDialog: boolean = true) {
       const path = store.searchParams?.get("path");
@@ -264,18 +328,29 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       sessionStorage.removeItem('rowId');
     },
     widgetAddClickHandler: function () {
+
+      if (validateAndShowErrors(store)) return;
       if (!Array.isArray(store.formData.elements)) {
         store.formData.elements = []
       }
+      if (!Array.isArray(store.formData.tabLabelElements)) {
+        store.formData.tabLabelElements = []
+      }
       const path = store.searchParams?.get("path");
       saveFormdataInSessionStorage(store.ctx.core.data, path)
-      const finalPath = `${path}.elements[${store.formData.elements.length}]`
+      let finalPath = `${path}`;
+      if (dynamicData.path.startsWith("tabLabel")) {
+        finalPath = `${finalPath}.tabLabelElements[${store.formData.tabLabelElements.length}]`
+      } else {
+        finalPath = `${finalPath}.elements[${store.formData.elements.length}]`
+      }
       store.searchParams.set("path", finalPath)
       store.setSearchParams(store.searchParams)
       this.setPage()
 
     },
     eventEditHandler: function () {
+      if (validateAndShowErrors(store)) return;
       const rowId = dynamicData.path.split(".")[1];
       const path = store.searchParams?.get("path");
       const id = store.searchParams?.get("id");
@@ -284,6 +359,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       store.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`)
     },
     eventAddHandler: function () {
+      if (validateAndShowErrors(store)) return;
       const path = store.searchParams?.get("path");
       const id = store.searchParams?.get("id");
       if (!Array.isArray(store.formData.events)) {
@@ -299,6 +375,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     deletePopUpComponent: function () {
       const rowId = dynamicData.path.split(".")[1];
       sessionStorage.setItem('rowId', rowId);
+      sessionStorage.setItem('isTabLabelElements', dynamicData.path.startsWith("tabLabel") ? "true" : "false");
       store.updateDialog("popUpComponentSection");
     },
     deletePopUpEvent: function () {
@@ -309,9 +386,11 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
 
     copyPasteElement: function (paramStore: any, setPage: any = this.setPage.bind(this)) {
       const [actionType, elementType] = dynamicData.path.split('.').pop()?.split('_');
+      console.log("BEFORE FUNCTION");
       actionType === "Copy" ? this.CopyElement(paramStore, elementType) : this.PasteElement(setPage, elementType);
     },
     CopyElement: function (paramStore: any = store, elementType: string) {
+      console.log("START FUNCTION");
       const schema = cloneDeep(paramStore.schema);
       const uiSchema = cloneDeep(paramStore.uiSchema);
       schema.properties.RemoveItemButton.disabled = false;
@@ -321,14 +400,15 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       const copiedElementPath = this.elementPathHandler(parentPathOfCopiedComponent, rowId, elementType);
       const copiedFormData = getFormdataFromSessionStorage(copiedElementPath);
 
-      this.ElementPathSetter(uiSchema,copiedFormData);
-      sessionStorage.setItem('copiedConfig',JSON.stringify(copiedFormData));
+      this.ElementPathSetter(uiSchema, copiedFormData);
+      sessionStorage.setItem('copiedConfig', JSON.stringify(copiedFormData));
       store.setNotify({
         SuccessMessage: `${elementType} Copied Successfully`,
         Success: true,
       })
       store.setSchema(schema);
       store.setUiSchema(uiSchema);
+      console.log("END FUNCTION");
     },
     PasteElement: function (setPage: any, elementType: string) {
       if (!sessionStorage.getItem("copiedConfig")) {
@@ -345,9 +425,17 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       if (!Array.isArray(store.formData.events)) {
         store.formData.events = []
       }
+      if (!Array.isArray(store.formData.tabLabelElements)) {
+        store.formData.tabLabelElements = []
+      }
       saveFormdataInSessionStorage(store.ctx.core.data, pastedElementParentPath);
       const formData = getFormdataFromSessionStorage(pastedElementParentPath);
-      const insertElementIndex = elementType === "Component" ? formData.elements.length : formData.events.length;
+      const currentLength = {
+        "TabsComponent": formData.tabLabelElements.length,
+        "Component": formData.elements.length,
+        "Events": formData.events.length
+      };
+      const insertElementIndex = currentLength[elementType] || 0;
       const pastedElementPath = this.elementPathHandler(pastedElementParentPath, insertElementIndex, elementType);
 
       const copiedConfig = JSON.parse(sessionStorage.getItem("copiedConfig"));
@@ -361,7 +449,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
           Fail: true,
         });
       }
-      else if(copiedConfig.name && elementType === "Events"){
+      else if (copiedConfig.name && elementType === "Events") {
         store.setNotify({
           FailMessage: notificationMessages.Component,
           Fail: true,
@@ -384,34 +472,37 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     elementPathHandler: function (parentPath: string, rowId: any, elementType: string) {
       if (elementType === "Component") {
         return parentPath ? `${parentPath}.elements[${rowId}]` : `elements[${rowId}]`;
+      }
+        if(elementType === "TabsComponent"){
+        return `${parentPath}.tabLabelElements[${rowId}]` 
       }
       return parentPath ? `${parentPath}.events[${rowId}]` : `events[${rowId}]`;
     },
     ElementPathSetter: function (uiSchema: any, copiedFormData?: any) {
       const formData = copiedFormData || JSON.parse(sessionStorage.getItem("copiedConfig"));
-      if(uiSchema?.elements?.[1]?.elements?.[0]?.config?.main?.headerIcons){
-        uiSchema.elements[1].elements[0].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage  = `Copied Component: ${formData.name}`;
+      if (uiSchema?.elements?.[1]?.elements?.[0]?.config?.main?.headerIcons) {
+        uiSchema.elements[1].elements[0].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage = `Copied Component: ${formData.name}`;
       }
-      else if(uiSchema?.elements?.[0]?.elements?.[1]?.elements?.[0]?.config?.main?.headerIcons){
-        uiSchema.elements[0].elements[1].elements[0].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage  = `Copied Component: ${formData.name}`;
+      else if (uiSchema?.elements?.[0]?.elements?.[1]?.elements?.[0]?.config?.main?.headerIcons) {
+        uiSchema.elements[0].elements[1].elements[0].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage = `Copied Component: ${formData.name}`;
       }
 
-      
-      if(uiSchema?.elements?.[1]?.elements?.[1]?.config?.main?.headerIcons){
-        uiSchema.elements[1].elements[1].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage  = `Copied Event: ${formData.eventType}`;
+
+      if (uiSchema?.elements?.[1]?.elements?.[1]?.config?.main?.headerIcons) {
+        uiSchema.elements[1].elements[1].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage = `Copied Event: ${formData.eventType}`;
       }
-      else if(uiSchema?.elements?.[0]?.elements?.[1]?.config?.main?.headerIcons){
-        uiSchema.elements[0].elements[1].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage  = `Copied Component: ${formData.eventType}`;
+      else if (uiSchema?.elements?.[0]?.elements?.[1]?.config?.main?.headerIcons) {
+        uiSchema.elements[0].elements[1].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage = `Copied Component: ${formData.eventType}`;
       }
     },
 
-    
-    onNavigatePopupYes: function() {
-      try{
+
+    onNavigatePopupYes: function () {
+      try {
         store.navigate(sessionStorage.getItem("pendingNavigatePath"))
         store.updateDialog(`pageNamepopup`)
       }
-      catch(e){
+      catch (e) {
         store.updateDialog(`pageNamepopup`)
         store.setNotify({
           FailMessage: "Couldn't navigate page",
@@ -419,8 +510,8 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
         })
       }
     },
-    onNavigatePopupNo: function() {
-        store.updateDialog(`pageNamepopup`)
+    onNavigatePopupNo: function () {
+      store.updateDialog(`pageNamepopup`)
     }
   }
 };

package/src/impaktapps-ui-builder/builder/services/event.ts

@@ -6,6 +6,7 @@ import {
   saveFormdataInSessionStorage,
   saveHandler,
   getFormdataFromSessionStorage,
+  validateAndShowErrors,
 } from "./utils";
 import { APISection } from "../build/uischema/apiSection";
 import {
@@ -210,6 +211,7 @@ export default (
       }
     },
     addEvent: function () {
+      if (validateAndShowErrors(store)) return; 
       const path = store.searchParams?.get("path");
       if (!Array.isArray(store.formData.events)) {
         store.formData.events = [];
@@ -221,6 +223,7 @@ export default (
       this.setPage();
     },
     editEvent: function () {
+      if (validateAndShowErrors(store)) return; 
       const rowId = dynamicData.path.split(".")[1];
       const path = store.searchParams?.get("path");
       saveFormdataInSessionStorage(store.ctx.core.data, path);

package/src/impaktapps-ui-builder/builder/services/pageMaster.ts

@@ -2,7 +2,7 @@ import { PageMasterSchema } from "../elements/UiSchema/PageMaster/schema";
 import { PageMasterUiSchema } from "../elements/UiSchema/PageMaster/uiSchema";
 import _ from "lodash";
 import Component from "./component";
-import { getFormdataFromSessionStorage, saveFormdataInSessionStorage, saveHandler } from "./utils";
+import { getFormdataFromSessionStorage, validateAndShowErrors, saveFormdataInSessionStorage, saveHandler } from "./utils";
 
 
 interface funcParamsProps {
@@ -31,18 +31,18 @@ export default (funcParams: funcParamsProps) => {
         return formData;
       }
       saveFormdataInSessionStorage(config)
-      return config
+      return { ...config, type: "page" }
     },
     getUiSchema: function () {
       const UiSchema = _.cloneDeep(PageMasterUiSchema(store.theme.myTheme));
-      if (sessionStorage.getItem("copiedConfig") ) {
+      if (sessionStorage.getItem("copiedConfig")) {
         Component(store, dynamicData, submitHandler, service).ElementPathSetter(UiSchema)
       }
       return UiSchema;
     },
     getSchema: () => {
       const schema = _.cloneDeep(PageMasterSchema);
-      if (sessionStorage.getItem("copiedConfig") ) {
+      if (sessionStorage.getItem("copiedConfig")) {
         schema.properties.RemoveItemButton.disabled = false;
       }
       return schema;
@@ -52,6 +52,7 @@ export default (funcParams: funcParamsProps) => {
       store.navigate("/PageMasterRecords");
     },
     onAddClickHandler: function () {
+      if (validateAndShowErrors(store)) return; 
       const id = store.searchParams?.get("id");
       if (!Array.isArray(store.formData.elements)) {
         store.formData.elements = []
@@ -70,12 +71,13 @@ export default (funcParams: funcParamsProps) => {
     },
     saveHandler: async () => await saveHandler(store, service, submitHandler),
     Edit_Components: Component(store, dynamicData, submitHandler, service).editComponents,
-    
-    Delete_Components: async function() {
+
+    Delete_Components: async function () {
       await Component(store, dynamicData, submitHandler, service).deleteComponents(false);
       store.updateDialog("popUpPageMasterComponent");
     },
     eventAddHandler: function () {
+      if (validateAndShowErrors(store)) return; 
       const id = store.searchParams?.get("id");
       if (!Array.isArray(store.formData.events)) {
         store.formData.events = []
@@ -85,6 +87,7 @@ export default (funcParams: funcParamsProps) => {
       store.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`)
     },
     editEvent: function () {
+      if (validateAndShowErrors(store)) return; 
       const rowId = dynamicData.path.split(".")[1];
       const id = store.searchParams?.get("id");
       saveFormdataInSessionStorage(store.ctx.core.data)
@@ -99,25 +102,25 @@ export default (funcParams: funcParamsProps) => {
       store.updateDialog("popUpPageMasterEvent");
       sessionStorage.removeItem('rowId');
     },
-    deletePopUpComponent: function(){
+    deletePopUpComponent: function () {
       const rowId = dynamicData.path.split(".")[1];
-      sessionStorage.setItem('rowId',rowId);
+      sessionStorage.setItem('rowId', rowId);
       store.updateDialog("popUpPageMasterComponent");
     },
-    deletePopUpEvent: function(){
+    deletePopUpEvent: function () {
       const rowId = dynamicData.path.split(".")[1];
-      sessionStorage.setItem('rowId',rowId);
+      sessionStorage.setItem('rowId', rowId);
       store.updateDialog("popUpPageMasterEvent");
     },
 
 
-    copyPasteElement:  function(){
-      Component(store, dynamicData, submitHandler, service).copyPasteElement(store,this.setPage.bind(this));
+    copyPasteElement: function () {
+      Component(store, dynamicData, submitHandler, service).copyPasteElement(store, this.setPage.bind(this));
     },
-    
-    RemoveItemButton: function(){
+
+    RemoveItemButton: function () {
       Component(store, dynamicData, submitHandler, service).RemoveItemButton(store)
     },
-    
+
   }
 };

package/src/impaktapps-ui-builder/builder/services/utils.ts

@@ -5,6 +5,16 @@ const clearFromSessionStorage = () => {
     sessionStorage.removeItem("pageFormdata")
 }
 export default clearFromSessionStorage;
+
+export const validateAndShowErrors = (store: any): boolean => {
+    if (_.isEmpty(store.ctx.core.errors)) return false;
+    store.setValidation("ValidateAndShow");
+    store.setNotify({
+        Fail: true,
+        FailMessage: "Error on Page"
+    });
+    return true;
+};
 export const getNavigationHistory = (config: any, path: string | undefined) => {
     if (path) {
         let urlRoutes: string = config.name;
@@ -67,12 +77,14 @@ export async function saveHandler(store, service, submitHandler) {
             const saveReturn = await submitHandler(store, service, config);
             navigateHandler(store, true,"/PageMasterRecords")
         } catch (err) {
-            navigateHandler(store, false)
+            navigateHandler(store, false, undefined, err.message);
         }
+    }else{
+        navigateHandler(store, false)
     }
 }
 
-export const navigateHandler = (store, isSubmitted, pageName?: string | boolean) => {
+export const navigateHandler = (store, isSubmitted,pageName?: string | boolean, errorMessage?: string) => {
     if (isSubmitted) {
         sessionStorage.removeItem("pageFormdata");
         store.navigate(pageName || -1)
@@ -84,7 +96,7 @@ export const navigateHandler = (store, isSubmitted, pageName?: string | boolean)
         store.setValidation("ValidateAndShow");
         store.setNotify({
             Fail: true,
-            FailMessage: "Errors on Page"
+            FailMessage: errorMessage || "Errors on Page"
         });
     }
 };