Box Developer Blog
Published in

Box Developer Blog

Box UI Elements with Angular

In my previous post, I explored the integration of Box UI Elements with Vue 3. Now let’s take a look at integrating them with another popular frontend framework: Angular. In this article, I’ll demonstrate how to build a universal component capable of displaying six different Box UI Element thanks to passing a configuration object. If you’d like to see a demo app, the code is available in this repository.

Prerequisites: Box developer account; node.js

What are UI Box Elements?

Quick recap: UI Box Elements are a set of pre-built UI components that allow developers to add elements of the main Box web application into their own applications, e.g., upload content, preview files, and folders stored in Box.

A view in Angular demo app featuring Content Uploader component

Steps to create the app

  1. Set up the Angular app
  2. Create the Box app in the Developer Console
  3. Write a service that injects CDN assets to the document’s head
  4. Create a new Angular component using the CLI
  5. Initialize the Box UI Element
  6. Display the selected Box UI Element

1. Set up the Angular app

Install the Angular CLI and create a new project. Choose a name for your project and adjust settings. In my demo app, I included SCSS and routing.

npm install -g @angular/cli
ng new my-app

For additional information, visit the Angular documentation site. Once the project is created, change the directory and run it!

cd <my-app>
ng serve --open

The project default link is http://localhost:4200, and we’ll use it in the next step to set CORS domains in the Box Developer Console.

2. Create the Box app in the Developer Console

Log into your developer account and in the bottom left corner, click Dev Console. If you don’t have an account, visit the signup page. Fill out the text boxes and click Get Started. You’ll need to set up two-factor authentication to make changes to apps.

Now you can create a new app or use an existing one.

Set up CORS

Go to your app’s configuration tab, scroll down to CORS domains, and paste the local address of your Angular project: http://localhost:4200. Remember to remove the trailing slash.

Set access rights

This step is useful when using, for example, the Content Uploader component. By default, access from an external app is read-only; optionally, to allow file upload or removal from your custom app, navigate to Applications Scopes and check the Write all files and folders stored in Box option.

Generate a token and add it to your app

Scroll to the Developer Token section and generate one. Remember, the token is valid for just one hour. ⚠️ When the token is no longer valid, go back to the Box Developer Console to revoke it and replace the old one in your project.

In the src folder of the Angular project, create an environment folder and environment.ts file to store the developer token for authentication.

export const environment = {
production: false,
BoxDeveloperToken: 'YourDeveloperToken'
};

3. Write a service that injects CDN assets into the document’s head

Inside the app folder, let’s create a service folder containing a head.service.ts file. The service will be responsible for loading scripts and stylesheet links to the document’s head using Renderer2. To achieve this, we need to import:

  • Renderer2: “Extend this base class to implement custom rendering.”
  • DOCUMENT: “A dependency injection token representing the main rendering context. In a browser this is the DOM Document.”
  • Inject: “Parameter decorator on a dependency parameter of a class constructor that specifies a custom provider of the dependency.”
  • Injectable: “Decorator that marks a class as available to be provided and injected as a dependency.”

The HeadService contains four public methods. The first two methods load the given resource; the remaining two methods check to see if the given resource is already loaded.

The HeadService has to be declared in the app.module.ts file.

"baseUrl": "./",
"paths": {
"@app/*": ["./src/app/*"],
"@environment/*": ["./src/environment/*"]
},

4. Create a new Angular component using the CLI

Using the Angular CLI, create a box component. For a clearer project structure, it’s worth creating a components folder to store all of them in one place.

ng generate component box

I changed the generic component selector from app-box-component to box-component.

This component is going to be a generic wrapper that accepts configuration object, with properties like the component name, folder id, or links to the CDN resources for a particular Box UI Element.

5. Initialize the Box UI Element

To restrict the values of the component name, I created an additional file that includes an enum with content UI Elements names. Visit our developer documentation to read more about each of them and check out additional features.

Next, import our box-component:

  • BoxComponentsTypes: to access the enum with UI Elements names
  • environment: to access the developer token
  • HeadService: the service created in step 3 to inject CDN resources
  • Input: to define our component configuration object
  • AfterViewInit: hook for initialization of the component

The component accepts a componentData input; its interface includes the fonderId, boxCdnJS, boxCdnCss, and name of the component (values declared in the BoxComponentsType enum).

The passed component name in the initialiseComponent method is dynamic and can initialise one of six components defined in BoxComponentsTypes enum.

Lastly, in the component’s HTML file, provide a container with an id related to the component name.

6. Display the selected Box UI Element

In order to display the generic Box component created in the previous step, pass the configuration object matching the BoxComponentInterface. To get the CDN links for one of the Box UI Elements, go to the documentation site. Since we are building an app that has no React library included, choose the script link marked as “JS with React.” If you’re aiming to utilise all Box UI Elements in your app, an improvement worth implementing is keeping all CDN links in one file.

In my demo app, I created a separate folder for pages and added a new component, content-explorer. In the app-routing.module.ts file, I also defined it as a route.

Finally, in the content-explorer HTML file bind the configuration object with component data input.

To display a different component, like the Content Uploader, just simply create a new component, similarly declare one of the BoxComponentTypes, and add appropriate CDN links to the configuration object.

That’s it, happy coding!

For more information go to our developer documentation site. Feel free to reach out to us on the developer forum for support, or via Box Pulse to make suggestions on how to improve Box UI Elements.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store