Development Mode for Widget or Webtab

Development Mode for Widget or Webtab

What is development mode in widget and webtab?

Development Mode is a developer-friendly feature for apps that are developed on a local machine and hosted as Internal Widgets or Internal Web Tabs in Zoho People. It allows developers to run the widget or web tab directly from their local machine while rendering it within Zoho People. This eliminates the need to repeatedly package, upload, and test the app during development.

Why enable development mode?

In a typical development workflow, every code change requires you to:
  1. Build the widget or web tab.
  2. Package it using the ZET CLI tool.
  3. Generate a ZIP file.
  4. Upload the ZIP to Zoho People.
  5. Refresh the application and test the changes.
  6. Repeat the entire process for every update.
When you're making frequent UI or JavaScript changes, this cycle can significantly slow down development and testing. Development Mode streamlines this workflow by allowing the widget or web tab to load directly from a local development server while remaining embedded within Zoho People. This enables you to:
  1. See changes instantly without rebuilding and re-uploading the extension.
  2. Accelerate UI and JavaScript development.
  3. Retain full access to the Zoho People JavaScript SDK.
  4. Test and debug your extension in a more efficient development environment.

Prerequisites

Before using development mode, ensure that:
  1. You have already created the app and uploaded a internal widget or web-tab in Zoho People.
  2. You have the ZET CLI installed on your local machine.
  3. You have access to the internal-type application files.
  4. You are signed in to Zoho People in the same browser that you will use for testing.

Limitations

To prevent excessive local development sessions, each organization has a limit. Only 10 users per organization can enable Development Mode simultaneously.

How to run and test app using development mode

  1. Sign in to Zoho People.
  2. Navigate to Settings > Developer Space.



  3. Click on the Widget or Web-Tab and enable Development Mode.

  4. Open the application files in your local development environment and make the required changes.
    Info
    Development Mode can only be used with applications with source files are available in your local development environment and were originally packaged and uploaded by you.




  5. Run the local development server using the appropriate ZET CLI command (locate the folder using cd command, and use zet run command to run the app locally)



  6. Copy the local development URL generated by the terminal. (For example: https://127.0.0.1:5000)
  7. Open the URL in the same browser where you are signed in to Zoho People.

    Info
    Development Mode supports only port 5000. If zet run starts your application on port 5001, it means port 5000 is already in use. Stop the process using port 5000 and rerun zet run. The application will then start on port 5000.
  8. If prompted with a security warning, click Advanced and proceed to the local URL.
  9. Refresh the widget or web-tab page in Zoho People.



  10. Verify the changes directly within the Zoho People interface.


  11. Continue making code changes and refresh the page as needed. The updates will be reflected instantly, allowing you to test the UI, functionality, and Zoho People JS SDK integrations without repackaging  and uploading the application in Zoho People.
  12. Once development and testing are complete, package the application using the ZET CLI commands in Terminal.
  13. Upload the updated ZIP package to the existing Internal Type Widget or Internal Type Web-Tab in Zoho People to publish the changes.
    Info
    Disable Development Mode after uploading an updated ZIP file so Zoho People serves the latest version from the server. Enable it only while testing your application locally on port 5000. If no local application is running on port 5000, keep Development Mode disabled.
Learn more:
  1. Create Internal Widget or Web tab Packages Using Zet-CLI Tool
  2. Create Widgets in Zoho People
  3. Create Web Tab in Zoho People