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 you 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 will live
  • 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:

  • component.html: The HTML for the component’s user interface
  • component.scss: The styling for the HTML
  • component.theme.scss: The styling which relies on the theme settings in Alma. See the Components & Theme tutorial for more information.
  • 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.

Page Load Listener

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 two ways to retrieve information about the page loaded in Alma: the getPageMetadata method and the onPageLoad event. When the main component of our starter app initializes, we subscribe to the onPageLoad event in order to receive information from Alma about pages as they’re opened.

Our onPageLoad handler receives a PageInfo object which includes a list of the open entities on the page. The method sets the pageEntities local variable which is bound to a text area in the HTML and displayed in the starter app. In addition, if there is one entity listed, we use the RestService to retrieve additional information about that entity, populate the apiResult variable, and display the result.

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 the onPageLoad method sees that there is one entity listed on the open page, it uses the RestService to call the API for the provided link. 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. When the refresh completes, we use the ToastrService 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!