Explore the Sample App

The starter app is a great way to learn about Cloud Apps and the functionality provided by the Cloud Apps API. This section will walk through the starter app to help you understand the features it demonstrates. It will reference the relevant sections of the documentation. For more even more details and demos, see the tutorials section.

Directory Structure

Since Cloud Apps are built in Angular, the directory structure of a Cloud App is similar to that of a regular Angular app with some elements hidden to simplify the development process.

The main folder is cloudapp/src. That folder contains three subfolders:

• app: This is where all of your application code will live, including components, services, models. It also contains the standard Angular App component and module.
• assets: This is for all of your assets, such as images
• i18n: This folder contains your strings which can be translated in order to make your app available in additional languages. For more information see the Internationalization tutorial.

Main Component

The starter app routes to the main component by default. The main component includes the following files:

• main.component.html: The HTML for the component’s user interface
• main.component.scss: The styling for the HTML
• main.component.theme.scss: The styling which relies on the theme settings in Alma. See the Components & Theme tutorial for more information.
• main.component.ts: The main code file which defines the functionality of the starter app

Starter App Features

This section describes the functionality included in the starter app.

Entities Observable

One powerful feature of Cloud Apps is the ability to interact with the page which the user has opened in Alma. Based on the open page our Cloud App can inspect the entities and offer additional relevant functionality. In order to provide this interface, we need to receive information about the open page and the entities displayed on that page.

The Event Service includes several ways to retrieve information about the page loaded in Alma:

• the getPageMetadata method
• the onPageLoad event
• the entities$ Observable

In our main component class, we declare a local variable from the entities$ Observable. The Observable changes whenever the pages in Alma display different entities. In our component’s HTML, we check the length of the asynchronous entities array. When the array length is greater than zero, we display the entity descriptions in a radio button group.

API Calls

Another powerful feature of Cloud Apps is the ability to call any of the hundreds of REST APIs without the need for additional authentication such as an API key. The APIs are run in the context of the logged-in user and therefore inherit the permissions of that user.

The RestService includes a single method: call. The method takes a link or a full Request. In our starter app, when an entity is selected from the radio button group, we display the full entity and then use the RestService to call the GET API for the link provided on the entity. The result of the API call is placed in the apiResult local variable, which is bound to a text area in the HTML and displayed in the starter app.

The API result text area is editable, allowing the user to make changes to the object displayed. When the user clicks the “Update” button, the update method is called. The update method parses the user input and creates a Request object, setting the url and requestBody properties and the method property to PUT (which updates the entity). The request is sent using the call method. If the request fails, we display an error message to the user. If the request succeeds, we call the local refreshPage method.

Refresh the page

The Events Service includes a refreshPage method which can be used to refresh the currently displayed page in Alma. After we successfully update the entity in Alma, we call the refreshPage method, and once the refresh completes, we use the AlertService to display a success message to the user.

Summing Up

The starter app shows off some of the main building blocks that you can use to learn about Cloud Apps and begin to build your own. You’re now ready to explore the detailed tutorials or the Cloud App API documentation. Enjoy writing your Cloud App to extend the functionality of Alma!