A Content Management System (CMS) is a service used for managing content such as writing product descriptions for your service, creating notification messages for app users, and writing blog posts for content marketing.
I'll share how to develop a simple CMS using Hops and how to utilize a WYSIWYG editor to add more diverse formatting options.
Adding Announcements
Let's develop a backoffice interface to manage announcements where we can write and review titles and content. First, we'll create a screen using text field, text area, and button components as shown below.
When the save button is clicked, you can either execute a query to store the announcement in a database or make a REST API call to save it.
When using a database, we use an INSERT statement to save the announcement.
Data sources like PostgreSQL, MySQL, and MSSQL
can manage data using SQL and templates.
For REST API calls, add a REST API data source. Then execute an HTTP request with the title and content in the announcement save query.
As shown in the example below, you can save announcements by sending the title and content through an HTTP POST request.
Adding a table to view the announcement list completes a simple announcement CMS backoffice.
Adding Announcements with WYSIWYG Editor
The WYSIWYG editor is a useful component that allows you to see various formatting options in real-time. You can create more readable announcements by adding styles to the content.
By replacing the text area with a WYSIWYG editor and setting its name to content, you can immediately use it in queries.
The WYSIWYG editor provides inline image file addition as a default feature. Alternatively, you can implement image addition by configuring an image upload query in the WYSIWYG editor settings. The query for image uploads needs to be configured with variables to receive image file content. Let's set up a variable called imageFile.
Image Upload Configuration
After setting up the variable, you can pass the uploading file's value through the currentUploadImage variable when executing the query in the WYSIWYG editor settings.
The received image file can be accessed through variables within the query. While you can create image uploads using an S3 data source, let's configure a query using a simple Data URL.
Completion
We've now completed a CMS with image upload capabilities using the WYSIWYG editor. The WYSIWYG editor's diverse formatting options make it useful not only for creating announcement CMS but also for writing blog posts and other content that needs to be shown to end users.
Conclusion
The scope of backoffice tools is quite broad. It ranges from handling database data to requiring parts of systems like CMS. Hops helps customers build backoffice tools faster and more flexibly. To this end, we're continuously adding components and features needed for developing systems like CMS.
If you're interested in speeding up CMS development and saving valuable resources, please contact the Hops team anytime.
From information architecture to screen layout, we'd love to discuss any admin-related concerns you have.
Please schedule a time through this link.