VDS-Komponenten

VDS steht für Vtiger Design Systems, das die zentralen HTML-Komponenten definiert, die von der VTAP-Plattform angeboten werden. VDS stellt Komponenten bereit, die wiederverwendbare UI-Blöcke sind.

Sie können Komponenten verwenden, um Ihre Anwendungen zu erstellen und anzupassen. Sie können überall verwendet werden – auf benutzerdefinierten Seiten, Widgets, Popups oder in anderen benutzerdefinierten Komponenten.

Nachfolgend finden Sie eine Liste der von VTAP bereitgestellten Komponenten:

vds-text

Verwenden Sie die: Wird für ein Eingabefeld verwendet. Ermöglicht Benutzern die Eingabe von Informationen.

Syntax:

Attributdetails:

Name um dem Eingabeelement einen beliebigen Namen zu geben
behindert wahr/falsch, um es zu deaktivieren
Platzhalter um einen Hinweis für die Eingabe anzuzeigen
Eingabetyp Alle gültigen HTML-Eingabetypen wie E-Mail, Nummer usw. (Weitere Informationen finden Sie weiter unten.)
Alle Tauchgäste müssen eine Tauchversicherung vorweisen, um dieses Feld zum Pflichtfeld zu machen 
V-Modell Dies ist die vue (reaktive) Datenbindung, mit der der Wert gesetzt oder gelesen werden kann.

Neben Text unterstützt VDS auch andere Eingabearten. Zum Beispiel: 

  • vds-E-Mail
  • vds-Nummer
  • vds-Prozentsatz
  • vds-dezimal
  • vds-Telefon
  • vds-Datum
  • vds-Zeit
  • vds-URL

Alle diese Komponenten sind unterschiedliche Eingabetypen. Sie haben die Eigenschaften eines vds-Text-Typs, verfügen jedoch über eigene Eingabetyp-Validierungen. 

Vds-Dropdown

Anwendung: Um ein Dropdown-Menü mit einer bestimmten Liste von Elementen anzuzeigen

Syntax:

Unterstützte Attribute:

Optionen Array von Dropdown-Elementen
mehrere true/false, um das Drop-down-Menü mit Mehrfachauswahl anzuzeigen
leere Option Wenn Sie zunächst eine leere Option anzeigen möchten
behindert wahr / falsch
Alle Tauchgäste müssen eine Tauchversicherung vorweisen, wahr / falsch

vds-Inhaber

Anwendung: Es ist eine interaktive Komponente, die Benutzer und Gruppen als Dropdown-Liste anzeigt. Es ist dasselbe wie das Feld „Zugewiesen an“ in jedem Modul im CRM.

Syntax:

Unterstützte Attribute:

Nur-Benutzer Wenn Sie nur Benutzer in der Dropdown-Liste sehen möchten
Nur-Gruppen Wenn Sie nur Gruppen in der Dropdown-Liste sehen möchten

vds-Checkbox

Anwendung: Um eine Checkbox-Eingabe anzuzeigen

Syntax:

vds-switch

Anwendung: Um einen Schalter anzuzeigen

Syntax:

vds-datepicker

Anwendung: Um eine Datumsauswahl für beliebige Datumsfelder anzuzeigen.

Syntax:

Attribut unterstützt:

Datumsformat Anzuzeigendes Datumsformat wie TT-MM-JJJJ, MM-TT-JJJJ, JJJJ-MM-TT

vds-daterange-picker

Anwendung: Um eine Datumsauswahl anzuzeigen, um einen Datumsbereich auszuwählen

Syntax:

Attribut unterstützt:

Datumsformat Anzuzeigendes Datumsformat wie TT-MM-JJJJ, MM-TT-JJJJ, JJJJ-MM-TT

vds-timepicker

Anwendung: Um eine Zeitauswahl anzuzeigen

Syntax:

Attribut unterstützt:

Format 12- oder 24-Stunden-Format 

vds-rte

Anwendung: Um einen CKEditor anzuzeigen, die Feld-UI, die Sie im Rich-Text-Editor-Feld sehen 

Syntax:

vds-Bewertung

Anwendung: Um ein Bewertungssternfeld anzuzeigen. Es werden maximal 5 Sterne angezeigt.

Syntax:

Attribut unterstützt:

Angebot Wert zwischen 1 bis 5

vds-iframe

Anwendung: Um einen Iframe mit gegebenem HTML-Inhalt anzuzeigen

Syntax:

vds-fortschritt

Anwendung: Um den Fortschrittsprozentsatz anzuzeigen

Syntax:

Unterstützte Attribute:

Wert % der Farbe
benutzerdefinierter Farbcode Standardmäßig wird der Fortschritt in Blau angezeigt, Sie können jeden gültigen Farbnamen übergeben
 
 
 

VTAP Kundenanwendungsfall

 
 

Einer unserer Kunden verwendet eine andere Anwendung, um seine Projekte und Fortschritte zu verfolgen. 

Sie wollten mit der Verwendung von Vtiger-Projekten beginnen, aber die Benutzeroberfläche war die einzige Hürde für die Verwendung von Vtiger-Projekten. Die Benutzeroberfläche zeigte nicht alle Details zu Meilensteinen und Aufgaben auf einem einzigen Bildschirm für ein Projekt, wie es der Kunde wünschte.

Um diese Hürde zu überwinden, haben wir die folgende Lösung vorgeschlagen.

Sie könnten unsere Low-Code-Plattform Module Designer verwenden, um eine Seite zu entwerfen, die in 3 Teile unterteilt wäre. 

Der erste Teil zeigt eine Projektliste, der nächste Teil zeigt Meilensteine, die mit dem ausgewählten Projekt verknüpft sind, und der dritte Teil zeigt die Aufgaben, die mit dem ausgewählten Projekt und den Meilensteinen verknüpft sind. Es würde ähnlich aussehen wie das Outlook-Postfach, das auf der rechten Seite E-Mails und deren Inhalt anzeigt. In diesem Fall zeigt die 3-Ebene Aufgabendetails am Ende an.

Um diese Fähigkeit zu erstellen, würden wir eine benutzerdefinierte Listenseite erstellen, die mit dem 'LIST_ADD_VIEWTYPE' Komponente. Sehen hier zum Beispiel. 

Dann würde die VTAP.API.Get-Funktion verwendet werden, um die Projekt-, Projektmeilenstein- und Aufgabendaten abzurufen. Sie würden in getrennten Spalten angezeigt, wären aber dennoch miteinander verbunden. Sie können den Code von kopieren hier um es in Aktion zu sehen.

 

Einer unserer Kunden verwendet eine andere Anwendung, um seine Projekte und Fortschritte zu verfolgen. 

Sie wollten mit der Verwendung von Vtiger-Projekten beginnen, aber die Benutzeroberfläche war die einzige Hürde für die Verwendung von Vtiger-Projekten. Die Benutzeroberfläche zeigte nicht alle Details zu Meilensteinen und Aufgaben auf einem einzigen Bildschirm für ein Projekt, wie es der Kunde wünschte.

Um diese Hürde zu überwinden, haben wir die folgende Lösung vorgeschlagen.

Sie könnten unsere Low-Code-Plattform Module Designer verwenden, um eine Seite zu entwerfen, die in 3 Teile unterteilt wäre. 

Der erste Teil zeigt eine Projektliste, der nächste Teil zeigt Meilensteine, die mit dem ausgewählten Projekt verknüpft sind, und der dritte Teil zeigt die Aufgaben, die mit dem ausgewählten Projekt und den Meilensteinen verknüpft sind. Es würde ähnlich aussehen wie das Outlook-Postfach, das auf der rechten Seite E-Mails und deren Inhalt anzeigt. In diesem Fall zeigt die 3-Ebene Aufgabendetails am Ende an.

Um diese Fähigkeit zu erstellen, würden wir eine benutzerdefinierte Listenseite erstellen, die mit dem 'LIST_ADD_VIEWTYPE' Komponente. Sehen hier zum Beispiel. 

Dann würde die VTAP.API.Get-Funktion verwendet werden, um die Projekt-, Projektmeilenstein- und Aufgabendaten abzurufen. Sie würden in getrennten Spalten angezeigt, wären aber dennoch miteinander verbunden. Sie können den Code von kopieren hier um es in Aktion zu sehen.

 
 

Vtiger APPtitude 

 

Werkzeuge, die wir mögen

 
 

Elasticsearch ist ein großartiges Open-Source-Projekt, zu dem Sie beitragen können, wenn Sie sich für Data Science interessieren. Es kann große Datenmengen in Echtzeit analysieren, durchsuchen und speichern. Elasticsearch hilft seinen Benutzern, Daten auf viele verschiedene Arten zu nutzen.

 

Elasticsearch ist ein großartiges Open-Source-Projekt, zu dem Sie beitragen können, wenn Sie sich für Data Science interessieren. Es kann große Datenmengen in Echtzeit analysieren, durchsuchen und speichern. Elasticsearch hilft seinen Benutzern, Daten auf viele verschiedene Arten zu nutzen.

 
 

Demnächst hier verfügbar

 
 

App Designer 

Mit dem App Designer von Vtiger können Sie benutzerdefinierte Apps erstellen, die möglicherweise vom CRM abhängen oder nicht. Es gibt Ihnen die Flexibilität, Apps in jedem JavaScript-Framework zu schreiben, in dem Sie Erfahrung haben.

Mit leistungsstarken VTAP-JavaScript-APIs können Sie sich auch mit dem CRM verbinden und Daten daraus per Push/Pull abrufen, um auf einfache Weise benutzerdefinierte Anwendungen zu erstellen.

 

App Designer 

Mit dem App Designer von Vtiger können Sie benutzerdefinierte Apps erstellen, die möglicherweise vom CRM abhängen oder nicht. Es gibt Ihnen die Flexibilität, Apps in jedem JavaScript-Framework zu schreiben, in dem Sie Erfahrung haben.

Mit leistungsstarken VTAP-JavaScript-APIs können Sie sich auch mit dem CRM verbinden und Daten daraus per Push/Pull abrufen, um auf einfache Weise benutzerdefinierte Anwendungen zu erstellen.

 
 

Melden Sie sich an, um die neuesten Updates zu erhalten!