zoho-grid-widget-vue

This is an example widget that leverages the Vue Javascript Framework (w/ Vuex) to create a dynamic related list that can fetch data from any external source and display directly in your CRM or Creator app.

This project integrates the Zoho Embbeded SDK to leverage callouts to external services as well as providing data from the related record. This example fetches a list of public repos in the ZohoDevelopers github organization by default, but can also accept custom values based on a custom field from the module.

Project setup

Download and install the app

git clone [email protected]:caretgrowth/zoho-grid-widget-vue.git
cd zoho-grid-widget-vue
yarn install

Setup Zoho Connector

To make callouts to 3rd party APIs, you must setup a Connector to the service you want to leverage. Be sure to note the link name as it is required in the script. For this specific demo, you must create a connector to Github service with the user scope. You must update the value in store/index.js file with the link name of your connection.

Create Widget and Related List (CRM)

Create and login to a sandbox (local hosted only works with sandboxes)
Create a widget
1. Widget Type: Related List
2. Hosting: External
3. Base URL: http://localhost:8080/index.html
  - make sure this url matches your locally running app
Add the related list to the record view
- Open a record of the type you wish to install
- Click "Add Related List" from the side panel on the left
- Choose Widget and Install the widget you created in step 2
Make sure you are running the app with yarn serve and that you can access it outside the CRM at the Base Url from above. It won't fully work, but you should be able to see the controls load with no errors in the console.
Refresh the page and navigate to the new widget in the CRM

Optional: Create Github Username Field

To demonstrate the integration with the related record, you can create a field on the module called "Github Username". Updating this value will fetch all public repos for that user. The username should match the value from the github url to the repository.

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

This command will compile all files in the dist directory and uses zet pack to create a deployable zip file. The zip file will be the name of the root folder of the project and be put in the dist directory. This is the file you can upload to be hosted by Zoho. Built files will be created /app for compatibility with zet pack command.

Lints and fixes files

yarn lint

Customize configuration

To make this a creator app, all you need to do is update the value in the plugin-manifest.json from "CRM" to "CREATOR". This value is leveraged by the Zoho Extension Toolkit and will cause build/validate errors if removed.

For most APIs where you only want to recieve data and display in the grid, you should only have to change two parts of the application to get it working:

store.state.grid_columns - You must modify the array to include the fields from the returned data with the exact names of the post processed data.
Customize the Action setGridData to fetch and process the specific API you need to interact with.

It is recommended you remove the Debug Information Buttons before publishing. These are good for troubleshooting async issues but aren't necessary to the users.

Code of Conduct

Please refer to the code of conduct for expectations of contributors and participants.

Contributions

Check out the contributing guidelines for more information.

caretgrowth / zoho-grid-widget-vue Goto Github PK