@zohodesk/library-platform 1.1.12 → 1.1.13

package/es/platform/client-scripts/behaviour/zclient-scripts-execution/domain/entities/ClientScriptExecutor.js

@@ -1,6 +1,5 @@
-import { CLIENT_SCRIPT_ARGUMENT, CLIENT_SCRIPT_ERROR_MESSAGE, CLIENT_SCRIPT_EXECUTION_TIMED_OUT_ERROR_MESSAGE, CLIENT_SCRIPT_INVALID_SCRIPT_ERROR_MESSAGE, CLIENT_SCRIPT_NO_MAPPING_FOUND_ERROR_MESSAGE, CLIENT_SCRIPT_RUNTIME_ERROR_MESSAGE, CLIENT_SCRIPT_TIMOUT_LIMIT } from "../../../../bc/zclient-scripts-execution/Constants";
+import { CLIENT_SCRIPT_ARGUMENT, CLIENT_SCRIPT_ERROR_MESSAGE, CLIENT_SCRIPT_ID_PREFIX, CLIENT_SCRIPT_INVALID_SCRIPT_ERROR_MESSAGE, CLIENT_SCRIPT_NO_MAPPING_FOUND_ERROR_MESSAGE } from "../../../../bc/zclient-scripts-execution/Constants";
 import { platformSDK } from "../../../../../sdk/frameworks/Sdk";
-import { ClientScriptExecutionStatus } from "./types/ClientScriptExectionTypeDefintions";
 export default class ClientScriptExecutor {
   constructor(clientScriptsMapping, context) {
     this.clientScriptsMapping = clientScriptsMapping;
@@ -33,77 +32,51 @@ export default class ClientScriptExecutor {
     };
   }
 
-  handleClientScriptExecutionResult(result) {
-    const {
-      status
-    } = result;
-
-    switch (status) {
-      case ClientScriptExecutionStatus.FAILURE:
-        const {
-          error: {
-            message
-          }
-        } = result;
-        console.error(CLIENT_SCRIPT_ERROR_MESSAGE, message);
-        break;
+  executeClientScript(targetEvent) {
+    const clientScript = window.__CLIENT_SCRIPTS__[targetEvent];
 
-      case ClientScriptExecutionStatus.TIMEDOUT:
-        console.error(CLIENT_SCRIPT_EXECUTION_TIMED_OUT_ERROR_MESSAGE);
-        break;
+    if (!clientScript) {
+      console.error(CLIENT_SCRIPT_NO_MAPPING_FOUND_ERROR_MESSAGE, targetEvent);
     }
-  }
-
-  getClientScriptExecutionPromise(clientScript, clientScriptArguments) {
-    return new Promise((resolve, reject) => {
-      try {
-        clientScript(clientScriptArguments);
-        resolve({
-          status: ClientScriptExecutionStatus.SUCCESS
-        });
-      } catch (e) {
-        resolve({
-          status: ClientScriptExecutionStatus.FAILURE,
-          error: e
-        });
-      }
-    });
-  }
-
-  getClientScriptTimeoutPromise(timeout) {
-    return new Promise((resolve, reject) => {
-      setTimeout(() => {
-        resolve({
-          status: ClientScriptExecutionStatus.TIMEDOUT
-        });
-      }, timeout);
-    });
-  }
 
-  async executeClientScript(clientScript, clientScriptArguments, timeout) {
-    const clientScriptExecutionPromise = this.getClientScriptExecutionPromise(clientScript, clientScriptArguments);
-    const clientScriptTimeoutPromise = this.getClientScriptTimeoutPromise(timeout);
-    return Promise.race([clientScriptTimeoutPromise, clientScriptExecutionPromise]);
+    try {
+      clientScript(this.getClientScriptArguments(targetEvent));
+    } catch (err) {
+      console.error(CLIENT_SCRIPT_ERROR_MESSAGE, err);
+    }
   }
 
-  constructClientScriptFunction(clientScriptFnBody) {
+  constructClientScriptFunction(targetEvent, clientScriptFnBody) {
     try {
-      const clientScriptFn = new Function(CLIENT_SCRIPT_ARGUMENT, `${clientScriptFnBody}`);
-      return clientScriptFn;
+      const scriptElement = document.createElement("script");
+      scriptElement.nonce = window.nonce;
+      scriptElement.textContent = `    
+      window.__CLIENT_SCRIPTS__ = window.__CLIENT_SCRIPTS__ || {};
+      window.__CLIENT_SCRIPTS__["${targetEvent}"] = function (${CLIENT_SCRIPT_ARGUMENT}) {
+      "use strict";
+      ${clientScriptFnBody}
+    };
+  `;
+      scriptElement.id = `${CLIENT_SCRIPT_ID_PREFIX}-${targetEvent}`;
+      document.head.appendChild(scriptElement);
     } catch (e) {
       console.error(CLIENT_SCRIPT_INVALID_SCRIPT_ERROR_MESSAGE, e.message);
     }
   }
 
+  cleanupClientScript(targetEvent) {
+    const scriptElement = document.getElementById(`${CLIENT_SCRIPT_ID_PREFIX}-${targetEvent}`);
+
+    if (scriptElement) {
+      document.head.removeChild(scriptElement);
+    }
+  }
+
   handleClientScriptExecution(targetEvent, clientScript) {
     if (!clientScript) return;
-    const dynamicFunction = this.constructClientScriptFunction(clientScript);
-    const clientScriptArguments = this.getClientScriptArguments(targetEvent);
-    this.executeClientScript(dynamicFunction, clientScriptArguments, CLIENT_SCRIPT_TIMOUT_LIMIT).then(result => {
-      this.handleClientScriptExecutionResult(result);
-    }).catch(error => {
-      console.error(CLIENT_SCRIPT_RUNTIME_ERROR_MESSAGE, error);
-    });
+    this.constructClientScriptFunction(targetEvent, clientScript);
+    this.executeClientScript(targetEvent);
+    this.cleanupClientScript(targetEvent);
   }
 
   executeTargetAction() {

package/es/platform/client-scripts/behaviour/zclient-scripts-fetch/domain/entities/interfaces/ClientScriptModel.js

@@ -1 +1,5 @@
-export {};
+export let ClientScriptType = /*#__PURE__*/function (ClientScriptType) {
+  ClientScriptType["SYSTEM"] = "SYSTEM";
+  ClientScriptType["USER"] = "USER";
+  return ClientScriptType;
+}({});

package/es/platform/components/index.js

@@ -1,2 +1,3 @@
 export { default as TableConnectedFactory } from "./table-connected/frameworks/TableConnectedFactory";
-export { default as FormConnectedFactory } from "./form-connected/frameworks/FormConnectedFactory";
+export { default as FormConnectedFactory } from "./form-connected/frameworks/FormConnectedFactory";
+export { default as SmartActionBandFactory } from "./smart-action-band/frameworks/SmartActionBandFactory";

package/es/platform/components/smart-action-band/adapters/presenters/ActionBandTranslator.js

@@ -0,0 +1,73 @@
+import ClientActionsTranslator from "../../../../client-actions/translators/client-actions-translator";
+import DefaultClientActions from "./utils/DefaultClientActions";
+import { ActionBandLocations } from "../../../../../bc/action-band/Constants";
+export default class ActionBandTranslator {
+  static transformState(state) {
+    const {
+      instanceName,
+      moduleName,
+      reloadConfig,
+      searchConfig,
+      sortConfig
+    } = state.properties;
+    const {
+      zclientAction,
+      zclientScriptsEventMapping,
+      zfield,
+      sortBy
+    } = state.behaviours;
+    const {
+      context
+    } = state.behaviours.appContext;
+    const {
+      clientActions,
+      isFetching: isClientActionsFetching
+    } = zclientAction || {};
+    let sorttableFields = zfield.fields.filter(field => field.isSortable === true);
+    const combinedClientActions = Array.isArray(clientActions) ? [...clientActions] : [];
+
+    if (reloadConfig?.isEnabled) {
+      combinedClientActions.push(DefaultClientActions.createReloadAction());
+    }
+
+    if (searchConfig?.isEnabled) {
+      combinedClientActions.push(DefaultClientActions.createSearchAction());
+    }
+
+    if (sortConfig?.isEnabled) {
+      combinedClientActions.push(DefaultClientActions.createSortByAction(sortBy, sortConfig, sorttableFields));
+    }
+
+    const mappedClientActions = mapper(combinedClientActions || []);
+    const transformedClientActions = {};
+    Object.entries(mappedClientActions).forEach(_ref => {
+      let [key, value] = _ref;
+      let bandActions = ClientActionsTranslator.transform(value, instanceName, moduleName, { ...context,
+        defaultSortField: sortConfig.defaultSortField
+      });
+      transformedClientActions[key] = bandActions;
+    });
+    const {
+      clientScripts,
+      isFetching: isClientScriptsFetching
+    } = zclientScriptsEventMapping;
+    const {
+      actionBandLeftActions,
+      actionBandRightActions
+    } = transformedClientActions;
+    return { ...state,
+      ...zclientAction,
+      viewModel: {
+        actionBandLeftActions,
+        actionBandRightActions,
+        clientScripts
+      }
+    };
+  }
+
+}
+
+const mapper = clientAction => ({
+  actionBandLeftActions: clientAction.filter(action => action.location === ActionBandLocations.LEFT_ACTIONS),
+  actionBandRightActions: clientAction.filter(action => action.location === ActionBandLocations.RIGHT_ACTIONS)
+});

package/es/platform/components/smart-action-band/adapters/presenters/translators/interfaces/ActionBandTranslatorState.js

@@ -0,0 +1 @@
+export {};

package/es/platform/components/smart-action-band/adapters/presenters/utils/DefaultClientActions.js

@@ -0,0 +1,147 @@
+/* eslint-disable max-lines-per-function */
+import { i18NProviderUtils } from '@zohodesk/i18n';
+import { SORT_BY_UPDATE_REQUESTED } from "../../../../../../bc/sort-by/Constants";
+import { SortOrder } from "../../../../../../bc/zlist/Types";
+import { SmartActionBandConstants } from "../../../../../../cc/action-band";
+import { SortDropdownConstants } from "../../../../../../cc/sort-dropdown";
+import ClientAction from "../../../../../client-actions/behaviour/zclient-actions/domain/entities/ClientAction";
+import { SortModelOrder } from "../../../../../zlist/domain/entities/interfaces/Properties";
+import { IconButtonConstants } from "../../../../../../cc/icon-button";
+import { SEARCH_TYPE_UPDATED } from "../../../../../../bc/search-box/Constants";
+import { ActionBandLocations } from "../../../../../../bc/action-band/Constants";
+import { getFieldTypeSortLabels } from "../../../../../zlist/adapters/presenters/utils/fieldSortLabels";
+import { SMART_ACTION_BAND_COMPONENT_NAME } from "../../../../../../cc/action-band/constants/ExternalConstants"; // import SortDropdownConstants from "@cc/sort-dropdown/Constants";
+
+class DefaultClientActions {
+  static constructAction(clientAction) {
+    return new ClientAction({ ...clientAction,
+      modules: ['MODULE'],
+      component: SMART_ACTION_BAND_COMPONENT_NAME,
+      modifiedTime: '2024-11-21T06:11:59.000Z',
+      createdTime: '2024-11-21T06:11:59.000Z'
+    }).toObject();
+  }
+
+  static createSearchAction() {
+    return this.constructAction({
+      uiComponentMapping: {
+        component: 'Search',
+        name: 'Action Band Search Action',
+        id: '4000000080003',
+        propertiesValueMapping: {},
+        eventMappings: [{
+          payloadValueMapping: {
+            searchQuery: '{{@payload.searchQuery}}'
+          },
+          sourceEvent: SEARCH_TYPE_UPDATED,
+          id: '4000000080005',
+          targetEvent: SmartActionBandConstants.ExternalConstants.SMART_ACTION_BAND_SEARCH_ON_TYPE
+        }]
+      },
+      conditions: {
+        fields: [],
+        pattern: '1'
+      },
+      location: ActionBandLocations.LEFT_ACTIONS,
+      id: '4000000080009',
+      name: 'SEARCH ACTION'
+    });
+  }
+
+  static createReloadAction() {
+    return this.constructAction({
+      uiComponentMapping: {
+        component: 'IconButton',
+        name: 'Action Band Reload Action',
+        id: '4000000080003',
+        propertiesValueMapping: {
+          iconName: 'ZD-reload',
+          iconSize: '12',
+          title: 'Refresh'
+        },
+        eventMappings: [{
+          payloadValueMapping: {},
+          sourceEvent: IconButtonConstants.ICON_BUTTON_CLICKED,
+          id: '4000000080005',
+          targetEvent: SmartActionBandConstants.ExternalConstants.SMART_ACTION_BAND_RELOAD_CLICKED
+        }]
+      },
+      conditions: {
+        fields: [],
+        pattern: '1'
+      },
+      location: ActionBandLocations.RIGHT_ACTIONS,
+      id: '4000000080009',
+      name: 'RELOAD ACTION'
+    });
+  }
+
+  static createSortByAction(sortBy, sortConfigFromProps, sorttableFields) {
+    const {
+      defaultSortField,
+      defaultSortOrder,
+      sortI18NLabels
+    } = sortConfigFromProps;
+    const {
+      order,
+      fieldName
+    } = sortBy;
+    const currentSortOrder = order === SortOrder.DES ? SortModelOrder.DES : SortModelOrder.ASC;
+    const currentSortFieldName = fieldName !== undefined ? fieldName : defaultSortField;
+    const defaultFieldObj = sorttableFields.find(field => field.name === defaultSortField);
+    const currentSortField = sorttableFields.find(field => field.name === currentSortFieldName);
+    const fieldOptions = sorttableFields.map(field => ({
+      name: field.name,
+      label: field.i18NLabel
+    }));
+    const fieldLabels = sortI18NLabels?.find(fieldObj => fieldObj.fieldName === currentSortFieldName);
+    const defaultSortLabels = getFieldTypeSortLabels(currentSortField?.type);
+    const ascendingLabel = (fieldLabels?.ascending === undefined ? fieldLabels?.ascending : i18NProviderUtils.getI18NValue('support.platform.smart.libraries.sort.tooltip', fieldLabels.ascending)) ?? defaultSortLabels?.ascendLabel;
+    const descendingLabel = (fieldLabels?.descending === undefined ? fieldLabels?.descending : i18NProviderUtils.getI18NValue('support.platform.smart.libraries.sort.tooltip', fieldLabels.descending)) ?? defaultSortLabels?.descendLabel;
+    return this.constructAction({
+      uiComponentMapping: {
+        component: 'SortDropdown',
+        name: 'Action Band Sort Action',
+        id: '4000000080003',
+        propertiesValueMapping: {
+          options: fieldOptions,
+          selectedOption: {
+            name: currentSortFieldName,
+            label: currentSortField?.i18NLabel || currentSortFieldName,
+            order: currentSortOrder
+          },
+          taggedOption: defaultSortField,
+          isResetDisabled: currentSortFieldName === defaultSortField && currentSortOrder === defaultSortOrder ? true : false,
+          iconTooltip: currentSortOrder === SortModelOrder.ASC ? descendingLabel : ascendingLabel
+        },
+        eventMappings: [{
+          payloadValueMapping: {
+            fieldName: '{{@payload.name}}',
+            order: '{{@payload.order}}'
+          },
+          sourceEvent: SortDropdownConstants.SORT_DROPDOWN_SORT_REQUESTED,
+          id: '4000000080005',
+          targetEvent: SORT_BY_UPDATE_REQUESTED
+        }, {
+          payloadValueMapping: {
+            fieldName: defaultSortField,
+            order: defaultSortOrder
+          },
+          sourceEvent: SortDropdownConstants.SORT_DROPDOWN_RESET_REQUESTED,
+          id: '4000000080005',
+          targetEvent: SORT_BY_UPDATE_REQUESTED
+        }]
+      },
+      conditions: {
+        fields: [],
+        pattern: '1'
+      },
+      location: ActionBandLocations.LEFT_ACTIONS,
+      id: '4000000080009',
+      name: 'SORT ACTION'
+    });
+  }
+
+}
+
+export default DefaultClientActions;

package/es/platform/components/smart-action-band/adapters/resources/SmartActionBandResource.js

@@ -0,0 +1,46 @@
+import { AbstractResource } from "../../../../sdk/application/interfaces/gateways/AbstractResource";
+import SortByRepository from "../../../../../library/behaviours/sort-by/adapters/gateway/Repository";
+import SortByPresenters from "../../../../../library/behaviours/sort-by/adapters/presenter/Presenter";
+import { SdkContracts } from "../../../../../cc/action-band/SdkContract";
+import UpdateSortByUseCase from "../../../../../library/behaviours/sort-by/applications/usecases/UpdateSortByUseCase";
+export class SmartActionBandResource extends AbstractResource {
+  initialize() {}
+
+  destroy() {}
+
+  getSortByDependencies() {
+    const dependencies = {
+      repository: new SortByRepository(),
+      presenter: new SortByPresenters()
+    };
+    return dependencies;
+  }
+
+  createUseCase(dependencies, UseCaseClass) {
+    const {
+      state,
+      updateState
+    } = this.dependencies;
+    const usecase = new UseCaseClass(dependencies);
+    usecase.updateDependency?.(state, updateState);
+    usecase.updateDependencies?.(state, updateState);
+    return usecase;
+  }
+
+  updateSortBy(sortBy) {
+    this.validateInput('updateSortBy', {
+      sortBy
+    }, SdkContracts.updateSortByInputMeta);
+    const {
+      dispatch
+    } = this.dependencies;
+    const dependencies = this.getSortByDependencies();
+    const usecase = this.createUseCase(dependencies, UpdateSortByUseCase);
+    usecase.execute({
+      fieldName: sortBy.fieldName,
+      order: sortBy.order,
+      dispatch
+    });
+  }
+
+}

package/es/platform/components/smart-action-band/applications/interfaces/ISmartActionBandResource.js

@@ -0,0 +1 @@
+export {};

package/es/platform/components/smart-action-band/applications/interfaces/State.js

@@ -0,0 +1 @@
+export {};

package/es/platform/components/smart-action-band/applications/interfaces/UseCaseDependencies.js

@@ -0,0 +1 @@
+export {};

package/es/platform/components/smart-action-band/applications/interfaces/output/IPresenter.js

@@ -0,0 +1 @@
+export {};

package/es/platform/components/smart-action-band/applications/usecases/AbstractUseCase.js

@@ -0,0 +1,18 @@
+class AbstractUseCase {
+  constructor(dependencies) {
+    this.dependencies = dependencies;
+    this.execute = this.execute.bind(this);
+  }
+
+  updateDependency(state, updateState) {
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    repository.init(state);
+    presenter.updateDependencies(state, updateState);
+  }
+
+}
+
+export default AbstractUseCase;

package/es/platform/components/smart-action-band/domain/entities/interfaces/Properties.js

@@ -0,0 +1 @@
+export {};

package/es/platform/components/smart-action-band/frameworks/EventHandlersFactory.js

@@ -0,0 +1,106 @@
+// import Repository from '../adapters/gateways/Repository';
+// import Presenter from '../adapters/presenters/Presenters';
+// import Service from '../adapters/gateways/Service';
+import { platformSDK } from "../../../sdk/frameworks/Sdk";
+import ActionBandSdkFactory from "./SmartActionBandSdkFactory";
+import { SEARCH_TYPE_CLEARED } from "../../../../bc/search-box/Constants";
+import { SmartActionBandConstants } from "../../../../cc/action-band";
+import { SORT_BY_UPDATED } from "../../../../bc/sort-by/Constants"; // NOTE: Remove unused import
+// import SortByInitializeController from '@platform/components/smart-action-band/adapters/controllers/SortByInitializeController';
+
+function createHandlerWithSdk(handler) {
+  return input => {
+    const {
+      state
+    } = input;
+    const instanceName = state.properties.instanceName;
+    handler({ ...input,
+      platformSDK
+    }, ActionBandSdkFactory.create({
+      instanceName
+    }));
+  };
+}
+
+export default class EventHandlersFactory {
+  static getSdkWrappedEventHandler(eventHandlers) {
+    return Object.fromEntries(Object.keys(eventHandlers).map(eventName => {
+      const handler = createHandlerWithSdk(eventHandlers[eventName]);
+      return [eventName, handler];
+    }));
+  }
+
+  static create(eventHandlers, name) {
+    const wrapped = EventHandlersFactory.getSdkWrappedEventHandler(eventHandlers); // TODO: Remove unused code
+    // const repository = new Repository();
+    // const presenter = new Presenter();
+    // const service = new Service({ repository, presenter });
+
+    const defaultEventHandlers = {
+      // [SEARCH_TYPE_UPDATED]: ({ action, dispatch }) => {
+      //   const { payload } = action;
+      //   dispatch({ type: SmartActionBandConstants.ExternalConstants.SMART_ACTION_BAND_SEARCH_ON_TYPE, payload });
+      // },
+      // [`${name}#MOUNT`]: new SortByInitializeController(service).handle,
+      [SEARCH_TYPE_CLEARED]: _ref => {
+        let {
+          action,
+          dispatch
+        } = _ref;
+        const {
+          payload
+        } = action;
+        dispatch({
+          type: SmartActionBandConstants.ExternalConstants.SMART_ACTION_BAND_SEARCH_CLEARED,
+          payload
+        });
+      },
+      [SORT_BY_UPDATED]: _ref2 => {
+        let {
+          action,
+          dispatch
+        } = _ref2;
+        const {
+          payload
+        } = action;
+        dispatch({
+          type: SmartActionBandConstants.ExternalConstants.SMART_ACTION_BAND_SORT_APPLIED,
+          payload
+        });
+      }
+    };
+    return mergeEventHandlers([defaultEventHandlers, wrapped]);
+  }
+
+}
+
+function mergeEventHandlers(eventHandlersList) {
+  const mergedEventHandlers = {};
+  const allEventNames = new Set();
+
+  for (const handlers of eventHandlersList) {
+    Object.keys(handlers).forEach(eventName => allEventNames.add(eventName));
+  }
+
+  for (const eventName of allEventNames) {
+    mergedEventHandlers[eventName] = createMergedHandler(eventHandlersList, eventName);
+  }
+
+  return mergedEventHandlers;
+}
+
+function createMergedHandler(eventHandlersList, eventName) {
+  return function () {
+    for (const handlers of eventHandlersList) {
+      const handler = handlers[eventName];
+
+      if (typeof handler === 'function') {
+        try {
+          handler(...arguments);
+        } catch (error) {
+          __DEVELOPMENT__ && console.error(error);
+        }
+      }
+    }
+  };
+}

package/es/platform/components/smart-action-band/frameworks/SmartActionBand.js

@@ -0,0 +1,5 @@
+import SmartActionBandFactory from "./SmartActionBandFactory";
+const SmartActionBand = SmartActionBandFactory.create({
+  name: 'ActionBandConnected'
+});
+export default SmartActionBand;

package/es/platform/components/smart-action-band/frameworks/SmartActionBandFactory.js

@@ -0,0 +1,55 @@
+import Properties from "../../../../cc/action-band/Properties";
+import defaultDataSource from "../../../data-source";
+import { createCustomComponent } from "../../../../library/custom-component";
+import EventHandlersFactory from "./EventHandlersFactory";
+import DataBrokerBehaviourFactory from "../../../zdata-source/frameworks/DataBrokerBehaviourFactory";
+import ActionBandConnectedView from "./SmartActionBandView";
+import SdkBehaviourFactory from "../../../sdk-behaviour/frameworks/SdkBehaviourFactory";
+import ResourceNamesEnum from "../../../../bc/sdk/ResourceNamesEnum";
+import ActionBandTranslator from "../adapters/presenters/ActionBandTranslator";
+import ClientActionsBehaviourFactory from "../../../client-actions/behaviour/zclient-actions/frameworks/ClientActionsBehaviourFactory";
+import ClientScriptsBehaviourFactory from "../../../client-scripts/behaviour/zclient-scripts-fetch/frameworks/ClientScriptsBehaviourFactory";
+import AppContextBehaviourFactory from "../../../app-context-behaviour/frameworks/AppContextBehaviourFactory";
+import ZHttpBehaviourFactory from "../../../zhttp/frameworks/ZHttpBehaviourFactory";
+import ActionBandBehaviourFactory from "../../../../library/behaviours/action-band/frameworks/ActionBandBehaviourFactory";
+import ZFieldBehaviourFactory from "../../../zfield/frameworks/ZFieldBehaviourFactory";
+import SortByBehaviourFactory from "../../../../library/behaviours/sort-by/frameworks/ui/SortByBehaviourFactory";
+
+function combineDataSourceWithDefault(dataSource) {
+  return { ...defaultDataSource,
+    ...dataSource,
+    httpTemplates: { ...defaultDataSource.httpTemplates,
+      ...dataSource?.httpTemplates
+    }
+  };
+}
+
+export default class SmartActionBandFactory {
+  static create(_ref) {
+    let {
+      name,
+      dataSource,
+      eventHandlers = {},
+      View = ActionBandConnectedView
+    } = _ref;
+
+    const _dataSource = combineDataSourceWithDefault(dataSource);
+
+    return createCustomComponent({
+      name: name,
+      View: View,
+      properties: Properties,
+      eventHandlers: EventHandlersFactory.create(eventHandlers, name),
+      transformState: ActionBandTranslator.transformState,
+      behaviours: [SdkBehaviourFactory.create([ResourceNamesEnum.SMART_ACTION_BAND, ResourceNamesEnum.SMART_TABLE]), ZHttpBehaviourFactory.create(), DataBrokerBehaviourFactory.create(), AppContextBehaviourFactory.create(), ClientActionsBehaviourFactory.create({
+        getClientActions: _dataSource.httpTemplates.getClientActions
+      }), ClientScriptsBehaviourFactory.create({
+        getClientScripts: _dataSource.httpTemplates.getClientScripts
+      }), ZFieldBehaviourFactory.create({
+        availableFields: _dataSource.httpTemplates.getAvailableFields,
+        selectedFields: _dataSource.httpTemplates.getSelectedFields
+      }), ActionBandBehaviourFactory.create(), SortByBehaviourFactory.create()]
+    });
+  }
+
+}

package/es/platform/components/smart-action-band/frameworks/SmartActionBandSdkFactory.js

@@ -0,0 +1,24 @@
+// /* eslint-disable max-lines-per-function */
+import { platformSDK_old } from "../../../sdk/frameworks/Sdk";
+import ResourceNamesEnum from "../../../../bc/sdk/ResourceNamesEnum";
+export default class ActionBandSdkFactory {
+  static getActionBandSdks(smartActionBand) {
+    return {
+      updateSortBy: sortBy => smartActionBand.updateSortBy(sortBy)
+    };
+  }
+
+  static create(_ref) {
+    let {
+      instanceName
+    } = _ref;
+    const smartActionBand = platformSDK_old[ResourceNamesEnum.SMART_ACTION_BAND](instanceName);
+    const actionBandSdks = ActionBandSdkFactory.getActionBandSdks(smartActionBand);
+    return {
+      actionBand: {
+        updateSortBy: actionBandSdks.updateSortBy
+      }
+    };
+  }
+
+}