Selecting Multiple Entities

As a part of the use case supported by our Cloud App, we may want to allow the user to specify which of the entities displayed in Alma should be operated on. For example, we may want to edit particular item or user records from within a list. Support for selecting multiple entities in Alma is evolving. A more consistent multi-select user experience is expected as part of upcoming improvements to the Alma interface. In the meantime, we can provide an interface in our Cloud App to allow the user to select the entities s/he wishes to work with.

In this tutorial, we will implement a re-usable component which shows the entities displayed on the page in Alma as a checklist. The user can then select the entities of interest. The component supports selecting across pages in Alma, allowing the user to select entities from different pages of the Alma list. First, follow the instructions in the “Adding additional routes” tutorial to add a new component and route called “multi-select”.

In our multi-select.component.html file, we reference another component called select-entities.  We’ll discuss the component below, but in the meantime,  we pass into the component 3 parameters:

  • A function called onEntitySelected to handle the entitySelected event
  • A list of displayed entities in the entityList parameter
  • A list of selected entity IDs in the selectedEntities parameter
multi-select.component.htmlView on Github

In the multi-select.component.ts file, we listen on the onPageLoad event and set the component variable entities to the list of entities from the loaded page in Alma. We also create the onEntitySelected function to handle when an entity is selected in our select-entities component. In the handler we add or remove the id from our set of ids based on whether the user checked or unchecked the entity.

multi-select.component.tsView on Github

That’s all we need in our main component. To add the re-usable select-entities component, create a new component and add the code from the select-entities.component.html and select-entities.component.ts files.

Now when you navigate to a list in Alma, you have a multi-select list in your app that allows users to select the entities they’re interested in.

multi select

Note: Displaying the entity description is available as of the June 2020 Alma release