How to Build a Custom App With Agility
Ready to build your 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.
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
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.
Play with the embedded forms app here
2. 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
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
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.
5. 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
About the Author
Harmonie is the Senior Marketing Manager at Agility CMS
