How to Build a Custom App With Agility

Ready to build your custom app with Agility CMS?

Harmonie Poirier
Harmonie Poirier
Nov 20, 2022
Custom App With Agility CMS

To succeed in the rapidly changing digital ecosystem, enterprise companies must create and test custom apps as quickly as possible. However, using a traditional content management system for custom app development is a strenuous, time-consuming effort.

In order to stay agile, forward-thinking companies across all major industries are leveraging headless architecture to develop custom apps using the framework and technology of their choice. 

Agility CMS App Framework allows developers to build applications using the CMS or integrate with existing custom apps. App Framework offers a zero-constraints playground where developers and designers can get creative and build custom software to solve the customers’ pain points. 

This guide will show you how to use Agility CMS App Framework and the resources you need to build your own custom app.

What is an App Framework?

Agility CMS App Framework aids custom app development by providing resources that simplify custom application development. This includes reusable code and libraries that developers can use to build a custom application and tools for testing, debugging, and managing app development. 

Also, with App Framework, you can extend and customize a web application by connecting your favourite tools and modern framework with Agility CMS. App Framework creates a communication layer between Agility CMS and a single-page app that the CMS will load in an iFrame. In addition, using the SDK allows you to integrate with the CMS using JavaScript easily.

Agility CMS App Framework features

  • Build custom UIs that can be shown in Agility CMS
  • Define one or more custom fields and flyout actions
  • Secure iFrame communication between the CMS and your custom application
  • Support for additional UI components such as Sidebar Apps coming soon
  • Support for modern frameworks such as React or Vue as well as vanilla JavaScript

Advantages of App Framework

Agility CMS App Framework is a developer/friendly way of including unique application features to make them as friendly, fast, and flexible as possible. Let’s discuss some of the advantages of App Framework for developers: 

  • Built-in app versioning: With Agility CMS, you can always revert to a previous version of your software application if something goes wrong. As you upload new versions of your app bundle, we keep the old ones for you if you need to return to a previous state. 
  • Easy installation: Unlike legacy applications, installing and registering a custom app within Agility is very simple. If you choose to share your app with your visitors or customers, you can do it by simply sharing a link with them so they can start using it. 
  • Fast creation of custom UIs: App Framework allows developers to use their favourite JavaScript frameworks, like React, Vue, and Next.js, to enhance the app design, opening the door for new technologies and ways of building applications.

App Framework use cases

With App Framework, you gain complete control over your development process and what your custom apps can do —from simple, customized input fields to full UI integrations with mobile apps and other frameworks and channels.

These are some use cases where our App Framework truly shines: 

  • Integrate with a Digital Asset Manager to allow editors to search and select external assets
  • Enhance the editor experience by providing custom input methods such as a Block Editor, Markdown, or Color Picker field
  • Integrate with a third-party/internal API to allow editors to search and select external entities
  • Pull in external data such as analytics and display it on a content item

What can you build using Agility CMS App Framework?

1. Embedded forms

Adding form with Hubspot

App Framework integrates with Hubspot and Agility CMS, giving you access to your contacts database. You can easily keep track of your lead flow and see at a glance which leads are becoming customers and who need extra nurturing to simplify your business processes. 

Hubspot and Agility CMS form app integration

Play with the embedded forms app here

2. Rich content blocks

Rich content blocks

App framework enables content editors to leverage Editor.js, a block-style editor that consists of separate blocks: paragraphs, headings, images, lists, quotes, etc. Each of them works as an independent piece of content and editable element. js-powered block editor uses Next.js, which can also support server-side features like uploading images to a custom solution built with Agility CMS.

Play with the rich content blocks app here

3. Lead capture pages

Lead capture pages

App Framework enables developers to integrate Agility CMS with Formstack. This online form builder empowers anyone on your team to build custom online forms and begin collecting data in minutes. Plus, the Formstack integration will retrieve the list of forms you've created in Formstack so you can easily embed them within your Agility-powered website or application.

Play with the lead capture app here

4. Connect image and video database

Connect image and video database

App Framework enables developers to link a Cloudinary asset library with Agility CMS to make your content editors' publishing process quick and seamless. The Cloudinary integration enables editors to easily select digital media from their Cloudinary account without leaving the Agility CMS UI.

Play with the video app here

5. Content translation

Content translation

App Framework also simplifies translation and localization efforts using Google Translate behind the scenes. All you need to do is create a module and click on the ‘translate’ button to get an automatic translation of that content item without leaving Agility CMS. 

Play with the translation app here

What do you need to get started?

Before you start, you’ll need to have an Agility instance and be comfortable writing JavaScript. You'll also need to deploy your app to a publicly accessible endpoint and register it in Agility CMS.

Ready to build your first app?

Read more about the Agility CMS App framework in our Github repository

Where MarTech Meets Composable DXP: How to build your Enterprise Stack

Reduce the effort, duplication, and confusion, allowing your team to work more efficiently today and in the future.

Where MarTech Meets Composable DXP:  How to build your Enterprise Stack
Back to All Articles
Back to All Articles
Nov 20, 2022

How to Build a Custom App With Agility

Ready to build your custom app with Agility CMS?

Harmonie Poirier

Topic

Using Agility CMS Using Agility CMS AppsApps
SHARE POST
Custom App With Agility CMS

To succeed in the rapidly changing digital ecosystem, enterprise companies must create and test custom apps as quickly as possible. However, using a traditional content management system for custom app development is a strenuous, time-consuming effort.

In order to stay agile, forward-thinking companies across all major industries are leveraging headless architecture to develop custom apps using the framework and technology of their choice. 

Agility CMS App Framework allows developers to build applications using the CMS or integrate with existing custom apps. App Framework offers a zero-constraints playground where developers and designers can get creative and build custom software to solve the customers’ pain points. 

This guide will show you how to use Agility CMS App Framework and the resources you need to build your own custom app.

What is an App Framework?

Agility CMS App Framework aids custom app development by providing resources that simplify custom application development. This includes reusable code and libraries that developers can use to build a custom application and tools for testing, debugging, and managing app development. 

Also, with App Framework, you can extend and customize a web application by connecting your favourite tools and modern framework with Agility CMS. App Framework creates a communication layer between Agility CMS and a single-page app that the CMS will load in an iFrame. In addition, using the SDK allows you to integrate with the CMS using JavaScript easily.

Agility CMS App Framework features

  • Build custom UIs that can be shown in Agility CMS
  • Define one or more custom fields and flyout actions
  • Secure iFrame communication between the CMS and your custom application
  • Support for additional UI components such as Sidebar Apps coming soon
  • Support for modern frameworks such as React or Vue as well as vanilla JavaScript

Advantages of App Framework

Agility CMS App Framework is a developer/friendly way of including unique application features to make them as friendly, fast, and flexible as possible. Let’s discuss some of the advantages of App Framework for developers: 

  • Built-in app versioning: With Agility CMS, you can always revert to a previous version of your software application if something goes wrong. As you upload new versions of your app bundle, we keep the old ones for you if you need to return to a previous state. 
  • Easy installation: Unlike legacy applications, installing and registering a custom app within Agility is very simple. If you choose to share your app with your visitors or customers, you can do it by simply sharing a link with them so they can start using it. 
  • Fast creation of custom UIs: App Framework allows developers to use their favourite JavaScript frameworks, like React, Vue, and Next.js, to enhance the app design, opening the door for new technologies and ways of building applications.

App Framework use cases

With App Framework, you gain complete control over your development process and what your custom apps can do —from simple, customized input fields to full UI integrations with mobile apps and other frameworks and channels.

These are some use cases where our App Framework truly shines: 

  • Integrate with a Digital Asset Manager to allow editors to search and select external assets
  • Enhance the editor experience by providing custom input methods such as a Block Editor, Markdown, or Color Picker field
  • Integrate with a third-party/internal API to allow editors to search and select external entities
  • Pull in external data such as analytics and display it on a content item

What can you build using Agility CMS App Framework?

1. Embedded forms

Adding form with Hubspot

App Framework integrates with Hubspot and Agility CMS, giving you access to your contacts database. You can easily keep track of your lead flow and see at a glance which leads are becoming customers and who need extra nurturing to simplify your business processes. 

Hubspot and Agility CMS form app integration

Play with the embedded forms app here

2. Rich content blocks

Rich content blocks

App framework enables content editors to leverage Editor.js, a block-style editor that consists of separate blocks: paragraphs, headings, images, lists, quotes, etc. Each of them works as an independent piece of content and editable element. js-powered block editor uses Next.js, which can also support server-side features like uploading images to a custom solution built with Agility CMS.

Play with the rich content blocks app here

3. Lead capture pages

Lead capture pages

App Framework enables developers to integrate Agility CMS with Formstack. This online form builder empowers anyone on your team to build custom online forms and begin collecting data in minutes. Plus, the Formstack integration will retrieve the list of forms you've created in Formstack so you can easily embed them within your Agility-powered website or application.

Play with the lead capture app here

4. Connect image and video database

Connect image and video database

App Framework enables developers to link a Cloudinary asset library with Agility CMS to make your content editors' publishing process quick and seamless. The Cloudinary integration enables editors to easily select digital media from their Cloudinary account without leaving the Agility CMS UI.

Play with the video app here

5. Content translation

Content translation

App Framework also simplifies translation and localization efforts using Google Translate behind the scenes. All you need to do is create a module and click on the ‘translate’ button to get an automatic translation of that content item without leaving Agility CMS. 

Play with the translation app here

What do you need to get started?

Before you start, you’ll need to have an Agility instance and be comfortable writing JavaScript. You'll also need to deploy your app to a publicly accessible endpoint and register it in Agility CMS.

Ready to build your first app?

Read more about the Agility CMS App framework in our Github repository

Where MarTech Meets Composable DXP: How to build your Enterprise Stack

Reduce the effort, duplication, and confusion, allowing your team to work more efficiently today and in the future.

Where MarTech Meets Composable DXP:  How to build your Enterprise Stack
About the Author

Harmonie is the digital marketing manager at Agility CMS. She loves SEO and content marketing. 

Topic

Using Agility CMS Using Agility CMS AppsApps
SHARE POST

Take the next steps

We're ready when you are. Get started today, and choose the best learning path for you with Agility CMS.

Get startedRequest a Demo