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 leverage 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”.

First we need to follow the instructions on the readme of the select entities shared component. We install the component using the npm command:

$ npm install eca-components --save

And then we add a reference to the component in our app.module.ts file:

import { SelectEntitiesModule } from 'eca-components';

...

@NgModule({
  imports: [
  ...
    SelectEntitiesModule,
  ],

Now we’re ready to implement the component in our page. In the multi-select.component.ts file, we create a new array to collect the selected entities:

Then in our multi-select.component.html file, we add the eca-select-entities element and pass the variable we defined above:

That’s all we need! 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.