Building an internal blogging tool using VTAP App Creator

In today's fast-paced and interconnected world, effective communication is vital for any successful team. Writing plays a crucial role in translating ideas, providing feedback, and sharing acquired knowledge. To facilitate this process, having a blogging tool that allows team members to create and manage posts for easy sharing is essential. In this article, we will explore how to build a minimal blogging application using VTAP App Creator, a powerful tool that enables the creation of various apps using any client-side framework of your choice.

Introduction to VTAP App Creator

VTAP App Creator is a versatile platform that empowers developers to build a wide range of applications using their preferred client-side frameworks. Its flexibility allows developers to create custom applications tailored to their specific needs, making it an excellent choice for various projects.

Understanding the Requirements

Before diving into the implementation details, let's understand the requirements of our minimal blogging tool. We need an application that lets CRM users create and manage blog posts that others can easily access. The tool should have the following features:

Data Mapping for Blogging Tool

To organize the blogging tool's data effectively, we can use the existing Project and Tasks modules provided by Vtiger CRM. To make it suitable for post authoring, we need to make some modifications:

  • Add a new Task Type called Blog.
  • Add a new Task Status called Writing.
  • Add a new Task Status called Published and mark it as a Closed state.

Each blog post will be represented as a Task linked to a Project named User Blogs. All the Tasks of type Blog will be linked to this project.

Implementation Steps

Let us go through the steps to implement the minimal blogging application using VTAP App Creator:

Create a VTAP Application in App Creator

Begin by creating a new VTAP application in the App Creator. This will serve as the foundation for our blogging tool.

Set Up the Views

In the views/index.html file, set the entry point for the application. Load the required assets and bring the #app DOM node to life.

Define Styles

Use the resources/index.css file to define styles that will give the application a simple and elegant appearance, building upon Bootstrap and QuillJS stylesheet rules.

VTAP Custom Application Runtime

To interact with CRM APIs, implement the VTAP Custom Application Runtime in the resources/vcap.js file.

Client-Side Development

For simplicity, we will use VueJS 2.x for client-side development. Utilize components without the need for web packs. The main components of the application are:

  • user-blog: Represents the user's blog.
  • blog-post: Displays a single blog post.
  • rich-textarea: Provides a rich text editor for writing blog content.

Data Exchange with Vuex

Use the Vuex pattern to exchange data between components effectively. This will enable seamless communication and data management within the application.

Add Pagination Support

Enhance the application by supporting pagination for managing posts. This will make it easier to navigate and organize your growing number of blog posts.

Implement Lazy-Load Pagination

To optimize performance and reduce initial load times, implement lazy-load pagination. This allows the application to load posts dynamically as the user scrolls, displaying posts not visible on the first page.

Conclusion

Building a minimal blogging tool using VTAP App Creator is a powerful demonstration of the platform's capabilities. By following the implementation steps and leveraging the features of VTAP, developers can create custom applications tailored to their team's unique needs.

The blogging tool we've built provides an excellent jumpstart for more sophisticated applications and serves as a foundation to introduce developers to the world of app building with VTAP. With the ability to adapt to any client-side framework, VTAP App Creator opens up a world of possibilities for creative and efficient application development.

You can access the source code from our repository here.
 
 
 

VTAP Customer Use Case

 
 

The custom application requirement is to develop a tailored app for retail store employees. The app will enable employees to track walk-in leads, convert leads into paid customers, and manage assigned tasks. It should have the capability to search for existing inquiries (deals) based on customer phone numbers or email addresses and display open inquiries if they exist. If no inquiries are found, the app should prompt the customer to specify their interested product and update the CRM accordingly. Once the customer selects a product, the app will create an invoice, push the inquiry, and synchronize it with the account application. 

Additionally, the app will have an Actions tab to display all tasks assigned to the retail store agent, while the Home tab will show tasks from different departments assigned to the agent or their team, allowing them to efficiently complete tasks.
 

The custom application requirement is to develop a tailored app for retail store employees. The app will enable employees to track walk-in leads, convert leads into paid customers, and manage assigned tasks. It should have the capability to search for existing inquiries (deals) based on customer phone numbers or email addresses and display open inquiries if they exist. If no inquiries are found, the app should prompt the customer to specify their interested product and update the CRM accordingly. Once the customer selects a product, the app will create an invoice, push the inquiry, and synchronize it with the account application. 

Additionally, the app will have an Actions tab to display all tasks assigned to the retail store agent, while the Home tab will show tasks from different departments assigned to the agent or their team, allowing them to efficiently complete tasks.
 
 

Coming Soon - Process Designer’s Fetch Other Actions task

 
 

The CRM feature aims to enhance automation capabilities by introducing the Fetch Other Records action in Process Designer to perform actions on related records in addition to the main record. Users can easily configure advanced automation flows by selecting the related module and setting conditions to filter records based on main record fields. Subsequent tasks like sending emails or SMS can be performed on the fetched records. However, adding actions after sending an email or SMS triggered from the fetched records will not be allowed. 

To ensure consistency, users must select the module and save conditions in the Fetch Records action before adding any downstream tasks. If the Fetch Records node is deleted, all subsequent nodes will be cleared. 

Furthermore, changing the module in the Fetch Records step will remove dependent email or SMS tasks configured with merge tags from the previous module, avoiding potential conflicts. This CRM feature will provide a flexible and efficient way to manage various automation use cases involving related records within the system.
 

The CRM feature aims to enhance automation capabilities by introducing the Fetch Other Records action in Process Designer to perform actions on related records in addition to the main record. Users can easily configure advanced automation flows by selecting the related module and setting conditions to filter records based on main record fields. Subsequent tasks like sending emails or SMS can be performed on the fetched records. However, adding actions after sending an email or SMS triggered from the fetched records will not be allowed. 

To ensure consistency, users must select the module and save conditions in the Fetch Records action before adding any downstream tasks. If the Fetch Records node is deleted, all subsequent nodes will be cleared. 

Furthermore, changing the module in the Fetch Records step will remove dependent email or SMS tasks configured with merge tags from the previous module, avoiding potential conflicts. This CRM feature will provide a flexible and efficient way to manage various automation use cases involving related records within the system.
 
 

Sign up to receive the latest updates!

 
 

Copyright 2024 Vtiger. All rights reserved. Various trademarks held by their respective owners.