B2B Commerce Organization

B2B Commerce Organization requires the Organization feature library. For more information, see Installing Additional Composable Storefront Libraries.

A number of default routes are defined for B2B Commerce Organization. You can see the routes in the config.ts files of the following components:

• budget

• cost-center

• permission (also known as purchase limits)

• unit

• user

• user-group

For example, the routes for budgets are defined in feature-libs/organization/administration/components/budget/budget.config.ts.

You can override these routes, as shown in the following example:

imports: [
  // ...
  B2bStorefrontModule.withConfig({
    // ...
    routing: {
      routes: {
        orgBudgetCreate: {
          paths: ['organization/budgets/custom-create'],
        },
      },
    },    
  )},
  // ...
]

For more information on overriding routes, see Route Configuration.

In the Organization library, you can override the following CMS components:

• ManageBudgetsListComponent

• ManageCostCentersListComponent

• ManagePermissionsListComponent

• ManageUnitsListComponent

• ManageUsersListComponent

• ManageUserGroupsListComponent

The following is an example:

imports: [
  // ...
  B2bStorefrontModule.withConfig({
    // ...
    cmsComponents: {
      ManageBudgetsListComponent: {
        // ...
        childRoutes: {
          children: [
            {
              path: 'custom-create',
              component: MyFormComponent,
            },
            // ...
          ],
        },
        // ...
      },
    },    
  )},
]

All of the list components in the Organization library use split view, which means all the components inside the split view component are ordered in a nested hierarchy. As a result, even small changes require overwriting the entire configuration. For more information, see Split View Component.

For more information on overriding CMS configurations, see Customizing CMS Components.

All of the table configurations in the Organization library are listed in the OrganizationTableType enum in feature-libs/organization/administration/components/shared/organization.model.ts.

You can override any of these table configurations, as shown in the following example, which overrides the name cell in the orgBudget table with a previously prepared MyComponent data component:

export const myTableConfig: TableConfig = {
  table: {
    [OrganizationTableType.BUDGET]: {
      options: {
        cells: {
          name: {
            dataComponent: MyComponent,
          },
        },
      },
    },
  },
};

Now you can add the configuration to your providers list. The following is an example:

providers: [
  //...
  provideConfig(myTableConfig)
],

For more information, see Table Component.

Messages in the Organization library similarly to global messages, but are displayed directly in the component of the subject they are related to. For normal cases, composable storefront uses NotificationMessageComponent to display information about the success or failure of an action. The ConfirmationMessageComponent is designed to ask a question that ensures users are aware of any consequences that may result from their actions. The ConfirmationMessageComponent is used in the ToggleStatusComponent and DeleteItemComponent, for example.

Messages in the Organization library similarly to global messages, but are displayed directly in the component of the subject they are related to. For normal cases, composable storefront uses NotificationMessageComponent to display information about the success or failure of an action. The ConfirmationMessageComponent is designed to ask a question that ensures users are aware of any consequences that may result from their actions. The ConfirmationMessageComponent is used in the ToggleStatusComponent and DeleteItemComponent, for example.

The following core models are used in the Organization library:

• Address

• Currency

• B2BApprovalProcess

• B2BUserRole

• B2BUserRight

• OrderApprovalPermissionType

The following core models are used for structure:

• ListModel

• SearchConfig

• StateUtils

The models are augmented from core models:

• B2BUnit

• B2BUser

• CostCenter

The following are dedicated models for the Organization library:

• B2BUnitNode

• Budget

• Permission

• Period

• UserGroup

The following models are use for processes:

• LoadStatus

• OrganizationItemStatus

The following model is used for components:

• B2BUnitTreeNode

You can see all the endpoints that the Organization library makes use of in feature-libs/organization/administration/occ/config/default-occ-organization-config.ts.

For more information, see Configuring Endpoints.

The following adapters are used in the Organization library:

• BudgetAdapter

• OrgUnitAdapter

• UserGroupAdapter

• PermissionAdapter

• CostCenterAdapter

• B2BUserAdapter

For more information, see Adapter.

The Organization library uses the following core serializers:

• ADDRESS_SERIALIZER

• COST_CENTER_SERIALIZER

The following are serializers in the Organization library:

• BUDGET_SERIALIZER

• B2B_USER_SERIALIZER

• B2BUNIT_SERIALIZER

• PERMISSION_SERIALIZER

• USER_GROUP_SERIALIZER

The Organization library uses the following core normalizers:

• COST_CENTERS_NORMALIZER

• COST_CENTER_NORMALIZER

The following are normalizers in the Organization library:

• BUDGET_NORMALIZER

• BUDGETS_NORMALIZER

• B2BUNIT_NORMALIZER

• B2BUNIT_NODE_NORMALIZER

• B2BUNIT_NODE_LIST_NORMALIZER

• B2BUNIT_APPROVAL_PROCESSES_NORMALIZER

• USER_GROUP_NORMALIZER

• USER_GROUPS_NORMALIZER

• PERMISSION_NORMALIZER

• PERMISSIONS_NORMALIZER

• PERMISSION_TYPE_NORMALIZER

• PERMISSION_TYPES_NORMALIZER

• B2B_USER_NORMALIZER

• B2B_USERS_NORMALIZER

For more information, see Converter.

The following are standard behaviors in the Organization library:

• Every PATCH and POST action cleans the entire state of the Organization library to ensure that composable storefront always has data that is up-to-date.

• Components and their services have the responsibility of routing redirects.

• In facades, composable storefront tries to load data only if the data were not already loaded.

The following are exceptions:

• composable storefront avoids cleaning users list when an approver is assigned or unassigned for a user. This is to avoid a race condition in split view.

• The ID is missing when a user is being created, and as a result, some routing redirects are applied directly in effects.

Composable storefront stores everything related to Organization in entities and lists of IDs separately. Associated data for a subsection is stored with its own feature, but for specific views, composable storefront uses a combination of ID and query parameters to store a list of IDs and other information.

You can see how this is implemented in composable storefront in feature-libs/organization/administration/core/store/organization-state.ts.

The following is an example of the user group structure:

userGroup:
    entities:
        entities: {edited-entity-a33xc5fnn: {…}, edited-entity-xi4yvmatz: {…}, edited-entity-f88ca37gt: {…}, edited-entity-cfew7374i: {…}, edited-entity-jjajzn4na: {…}, …}
    list:
        entities:
            ?pageSize=10&currentPage=&sort=:
                error: false
                loading: false
                success: true
                value: {ids: Array<String>(10), pagination: {…}, sorts: Array(3)}
    customers:
        entities:
            edited-entity-a33xc5fnn?pageSize=10&currentPage=&sort=: {loading: false, error: false, success: true, value: {…}}
            edited-entity-a33xc5fnn?pageSize=2147483647&currentPage=&sort=: {loading: false, error: false, success: true, value: {…}}
    permissions:
        entities:
            edited-entity-a33xc5fnn?pageSize=10&currentPage=&sort=: {loading: false, error: false, success: true, value: {…}}
            edited-entity-a33xc5fnn?pageSize=2147483647&currentPage=&sort=: {loading: false, error: false, success: true, value: {…}}

The various elements in the structure are described as follows:

• entities stores real user group objects, which are key mapped to status flags and values

• list stores a list of user groups IDs for specified pages, with keys based on query parameters, such as pagination and sorts

• customers stores IDs for a subsection, with keys based on the ID of the user group and query parameters

• permisions stores IDs for a subsection, with keys based on the ID of the user group and query parameters

• pageSize=2147483647 indicates that composable storefront fetches all possible items, up to the maximum safe Java integer

For more information, see Loader Meta Reducer.

The Organization homepage contains a set of links that allow users to access all of the My Company functionality.

All of the links on the Organization homepage correspond to standard banner components that are created in the back end.

If you want to override the default Organization styles, first ensure that the organization.scss file is generated properly by schematics, or else you can add your own. Your angular.json file should include the following path in the build styles:

"styles": [
  "src/styles.scss",
  "src/styles/spartacus/organization.scss"
],

In src/styles/spartacus/organization.scss, you should import the Organization styles, and then you can add your own styles below. The following is an example:

@import "@spartacus/organization";

// Your custom styles
%organizationList {
    cx-org-toggle-link-cell {
        button.tree-item-toggle {
            background-color: blue;
        }
    }
}

For more information, see Component Styles.

Organization translation resources can be overridden following the same rules as for other composable storefront chunks. The following is an example:

provideConfig({
  i18n: {
    resources: organizationTranslations,
    chunks: organizationTranslationChunksConfig,
  },
}),
provideConfig({
  i18n: {
    resources: {
      en: {
        organization: {
          organization: { // general chunks
            enabled: 'Enabled',
          },
          orgUserGroup: { // specified sub-feature chunks
            header: 'List of user groups ({{count}})',
          }
        },
      },
    },
  },
}),

For more information, see Extending Translations.