跳到內容
首頁 » VTAP 模塊設計器——我們的低代碼平台,讓 CRM 成為您自己的!

VTAP 模塊設計器——我們的低代碼平台,讓 CRM 成為您自己的!



VTAP 是 Vtiger 的低代碼平台,可幫助開發人員和管理員擴展 CRM 的功能。 我們有兩個工具可以提供構建低代碼應用程序的能力。
一個是模塊設計器,另一個是 API 設計器。 在此博客中,我們將討論使用模塊設計器的內容、方式和時間。


模塊設計器

何時使用模塊設計器(用例)


您可以使用模塊設計器來:

  • 應用複雜的公式並更新字段
  • 當用戶輸入錯誤信息時閃爍警告
  • 保存一些用戶首選項
  • 保存擴展設置或配置數據
  • 添加按鈕、小部件和圖標

模塊設計器為您提供什麼來實現上述目標?

  • 集成開發環境 (IDE),您可以在其中編寫邏輯和自定義代碼
  • VTAP Javascript API

如何使用模塊設計器?

模塊設計器位於主菜單 > 平台應用程序下。 它對所有專業和企業客戶都是免費的。 如果你想開發和發布擴展到市場,你可以從 這裡.

您可以使用模塊設計器添加以下內容:

  1. VTAP 腳本 – 允許您添加自定義按鈕、小部件等。
  2. 組件 - 允許您添加自定義組件。
  3. VTAP 樣式 - 幫助您更改 UI 的外觀和感覺。
  4. 頁面 - 允許您添加自定義頁面。

在本博客中,我們將討論如何將 VTAP 腳本添加到模塊設計器。

添加 VTAP 腳本

VTAP 腳本是自定義邏輯的入口點。 您首先為腳本命名並選擇腳本應該運行的模塊。 選擇模塊很重要,因為您經常有特定於模塊的需求,例如收聽聯繫人的按鈕單擊或記錄保存。

您可以選擇創建自定義擴展模塊或使用現有模塊添加腳本。

注意: 如果您希望通過 Vtiger 市場發布模塊,請創建一個擴展模塊。

子圖 1


子圖 2

現在讓我們看幾個使用 VTAP 腳本的示例。

示例1: 一個按鈕已添加到潛在客戶列表頁面。 每個腳本都是使用此基本腳手架創建的,並為腳本選擇了名稱,如下所示。

C1

VTAP 的基本構建塊是一個組件,它基於 Vue 組件及其 生命週期事件.

  • 組件名稱: 線索_組件_註冊
  • 語法: {{MODULE}}_Component_{{NAME}}
  • 組件擴展自: VTAP.Component.Core.擴展


操作功能

  • 建立日期 功能是 入口點 對於任何組件。 這是您可以註冊按鈕或監聽事件的功能。
  • C2

    VTAP.組件.註冊 API 可幫助您添加按鈕、小部件、圖標等。API 的第一個參數告訴您要添加自定義組件的位置。 要查看支持的組件列表,請單擊 這裡.

  • 模板 是您添加 HTML(如果有)的地方。
  • 方法 是您添加在模板 HTML 中調用的函數的地方。 在下面的示例中,我們在單擊按鈕時調用 ClickMe 函數。 這是最終代碼的樣子:

C3

示例2: 將小部件添加到聯繫人和組織的摘要視圖。
您可以使用一次註冊在多個模塊中添加相同的小部件。 在這種情況下,我們應該為所有模塊添加 VTAP 腳本(在創建 VTAP 腳本時使用下拉菜單)。

C4

對於 VTAP.Component.Register API,我們有第四個參數可幫助您選擇應添加小部件的模塊。 這是它在組織摘要視圖中的外觀。

子圖 3

VTAP 還使您能夠監聽用戶執行的操作。 例如,當用戶創建或更新記錄、打開詳細信息頁面、顯示編輯彈出窗口等時。要查看此類觸發事件的列表,請單擊 這裡.

您需要監聽此類事件並添加一個處理程序來對它們執行操作。
以下是事件的示例 - 記錄已保存。 此示例將在保存記錄時檢查聯繫人的聯繫人狀態。 如果聯繫人狀態是競爭對手,將顯示一條通知,提示“小心!!”。

C5

同樣,VTAP 平台提供了各種 UI 掛鉤來插入您的自定義組件,例如列表/詳細信息頁面中的按鈕、摘要視圖中的小部件和圖標。
對於提供的所有不同佔位符,請參閱我們的詳細信息 文檔.

在我們即將發布的博客中,我們將介紹 VTAP 的其他功能——自定義組件、VTAP 和自定義頁面。

我強烈建議您編寫自己的代碼。 使用自定義按鈕從小處開始,然後從那裡開始。 使用我們的模塊設計器 例子,在我們的文檔中提供,作為您的第一個代碼的基礎。 您會發現自定義 CRM 是一個簡單有趣的過程。

如有任何其他疑問,請發送電子郵件至 [email protected]。 註冊開發者版本 這裡.