Initialize a container

To utilize a container, you must initialize it. You can initialize a container in a Store using the initializeContainers API in the ContainerManager class. For more information, see initializeContainers(containerInfo).

After initialization, the containers entry will have the following structure:

{
    containers: {
        'app/primary': {
          type: 'multiple',
          accessedOrder: [],
          items: {}
        }
    }
}

Add items to a container

You can add items to an initialized container to populate it with data. You can add items to a container using the addContainerItem API in the ContainerManager class. For more information, see addContainerItem(containerInfo).

The payload passed through the addContainerItem API contains the context that can be obtained through the getContextName API and the key that is the unique ID for the container item.

Consider an item added to a container:

const containerManager = getPConnect().getContainerManager();
containerManager.addContainerItem({
   context: 'app/primary_1',
   key: 'OE7UD6-SPACETRAVEL-WORK RA-123',

   data: {
    caseInfo: {
      ...
    }
  }
});

After adding the item to the container, the containers entry will have the following structure:

{
  data: {
    app/primary_1: {
      caseInfo: {
        ...
      }
    }
  },
  containers: {
    'app/primary': {
      type: 'multiple',
      accessedOrder: [
        'app/primary_1'
      ],
      items: {
        'app/primary_1': {
          view: {
            type: 'reference',
            config: {
              name: 'pyHome',
              type: 'view',
              ruleClass: 'Data-Portal'
            }
          },
          key: ' OE7UD6-SPACETRAVEL-WORK RA-123',
          context: 'app/primary_1'
        }
      }
    }
  }
}

Update items in a container

You can update an item in a container using the updateContainerItem API in the ContainerManager class. For more information, see updateContainerItem(containerInfo).

The payload passed through the updateContainerItem API contains the context that can be obtained through the getContextName API and the key that is the unique ID for the container item.

Usage example

In this example, the containerInfo object contains the data to update the workarea_0 item in the app/primary_0/workarea container.

getPConnect().getContainerManager().updateContainerItem(containerInfo);

The payload in the containerInfo object contains the target container that contains the item to be updated and the containerItemID of the item to be updated.

The APIs in the ContainerUtils module can be used to prepare the argument for the updateContainerItem API. The data can be obtained using DX APIs or external sources based on the item to be updated.

The containerInfo object has the following structure:

{
    target:"app/primary_0/workarea",
    containerItemID:"app/primary_0/workarea_0",
    context:"app/primary_0",
    data: {…}
}

The state before the updateContainerItem API is called is as shown below:

{
  data: {
    app/primary_2: {
      content: {
        FirstName: "",
        Lastname: "",
        Email: ""
      }
    }
  },
  containers: {
    'app/primary': {
      type: 'multiple',
      accessedOrder: [
        'app/primary_1'
      ],
      items: {
        'app/primary_2': {
          view: {
            type: 'reference',
            config: {
              name: 'pyApplication',
              type: 'view',
              ruleClass: 'Data-Portal'
            }
          },
          key: 'OE7UD6-SPACETRAVEL-WORK RA-12',
          context: 'app/primary_2'
        }
      }
    }
  }
}

The containerInfo object is passed as shown below:

{
    target: 'app/primary_2/workarea',
    containerItemID: 'app/primary_2/workarea_1'',
    context: 'app/primary_2',
    data: {
      content: {
        FirstName: "James",
        Lastname: "Cameron",
        Email: "[email protected]"
      }
    }
}

The state after the updateContainerItem API is called is as shown below:

{
  data: {
    app/primary_2: {
      content: {
        FirstName: "James",
        Lastname: "Cameron",
        Email: "[email protected]"
      }
    }
  },
  containers: {
    'app/primary': {
      type: 'multiple',
      accessedOrder: [
        'app/primary_1'
      ],
      items: {
        'app/primary_2': {
          view: {
            type: 'reference',
            config: {
              name: 'pyApplication',
              type: 'view',
              ruleClass: 'Data-Portal'
            }
          },
          key: 'OE7UD6-SPACETRAVEL-WORK RA-12',
          context: 'app/primary_2'
        }
      }
    }
  }
}

Activate items in a container

When an item in a container is activated, the container displays the data or context associated with the target container and the containerItemID. You must activate an item before updating or deleting data in it.

Usage example

In this example, the containerInfo object contains the data to activate the app/primary_1 item in the 'app/primary' container.

getPConnect().getContainerManager().activateContainerItem(containerInfo);

The containerInfo object has the following structure:

{
    target: 'app/primary',  // Target of the view container
    containerItemID: 'app/primary_1' // view container Context name to be activated
}

Delete items from a container

You can delete an item from a container using the removeContainerItem API in the ContainerManager class. For more information, see removeContainerItem(containerInfo).

When an item is deleted from a container, the item is removed from the accessedOrder array. If the deleted item was being displayed, the last entry in the accessedOrder array is now displayed.

Usage example

In this example, the containerInfo object contains the data to delete the app/primary_2 item in the app/primary container.

getPConnect().getContainerManager().removeContainerItem(containerInfo);

The containerInfo object has the following structure:

{
    target: 'app/primary',
    containerItemID: 'app/primary_2'
}