Creating a custom CosmicJS extension

Problem

Previously we created the survey app using CosmicJS and AngularJS. Now we have our app up and running, however we’re not completely satisfied how survey answers looks like in admin dashboard. So we have to customize this. We’ll solve this problem using CosmicJS extension. It’s a SPA, so let’s use Angular again. Source of this app is available at https://github.com/ivanthecrazy/cosmic-survey-extension.git.

Creating new app

Configuration

Do you remember CosmicConfigService we used in our app? Let’s copy it here, we’re going to reuse it, but with some modification:

Here we’re trying to extract bucket parameters from the url. That’s how these params are passed to extension.

Main Component

This extension is simple, we’ll have only one page and will use AppComponent:

It’s very easy – just receive a list of objects from CosmicJS and display them in table.

Building an extension

Now we have to build extension package for installation:

Than copy extension.json to dist folder:

And zip the dist folder. Your newly created zip archive is your extension package for installation, upload it via CosmicJS dashboard (Your bucket -> Settings -> Extensions -> Upload). Once package is uploaded, you’ll see new Answers List menu item.

Leave a Reply

Your email address will not be published. Required fields are marked *