VDS-komponenter

VDS står för Vtiger Design Systems, som definierar de grundläggande HTML-komponenterna som erbjuds av VTAP-plattformen. VDS tillhandahåller komponenter som är återanvändbara UI-block.

Du kan använda komponenter för att bygga och anpassa dina applikationer. De kan användas var som helst - anpassade sidor, widgets, popup-fönster eller inuti andra anpassade komponenter.

Nedan är listan över komponenter som VTAP tillhandahåller:

vds-text

Använda: Används för en inmatningsbox. Tillåter användare att ange information.

syntax:

Attributdetaljer:
namn för att ställa in valfritt namn på inmatningselementet
inaktiverad sant/falskt, för att göra det inaktiverat
Platshållare för att visa någon ledtråd för inmatningen
ingångstyp Alla giltiga HTML-inmatningstyper som e-post, nummer, etc. (Läs nedan för mer information.)
obligatoriskt för att göra detta fält obligatoriskt 
v-modell Detta är vue (reaktiv) databindning, den kan användas för att ställa in eller läsa värdet.

Tillsammans med text stöder VDS även andra inmatningstyper. Till exempel: 

  • vds-e-post
  • vds-nummer
  • vds-procent
  • vds-decimal
  • vds-telefon
  • vds-datum
  • vds-tid
  • vds-url

Alla dessa komponenter är olika ingångstyper. De har egenskaperna hos en vds-texttyp men kommer med sina egna indatatypvalideringar. 

Vds-rullgardinsmeny

Användning: För att visa en rullgardinsmeny med en given lista med objekt

Syntax:

Attribut som stöds:
alternativ Uppsättning av rullgardinsobjekt
multipel sant/falskt, för att visa rullgardinsmenyn för flera val
tom-alternativ Om du först vill visa ett tomt alternativ
inaktiverad sant falskt
obligatoriskt sant falskt

vds-ägare

Användning: Det är en interaktiv komponent som visar användare och grupper som en rullgardinsmeny. Det kommer att vara samma som fältet Tilldelad till i valfri modul i CRM.

Syntax:

Attribut som stöds:
endast-användare Om du bara vill se användare i rullgardinsmenyn
endast-grupper Om du bara vill se grupper i rullgardinsmenyn

vds-kryssrutan

Användning: För att visa en kryssruteinmatning

Syntax:

vds-switch

Användning: För att visa en växel

Syntax:

vds-datepicker

Användning: För att visa en datumväljare för alla datumfält.

Syntax:

Attribut som stöds:
datumformat Datumformat som ska visas som DD-MM-ÅÅÅÅ, MM-DD-ÅÅÅÅ, ÅÅÅÅ-MM-DD

vds-daterange-picker

Användning: För att visa en datumväljare för att välja datumintervall

Syntax:

Attribut som stöds:
datumformat Datumformat som ska visas som DD-MM-ÅÅÅÅ, MM-DD-ÅÅÅÅ, ÅÅÅÅ-MM-DD

vds-timepicker

Användning: För att visa en tidsväljare

Syntax:

Attribut som stöds:
format 12 eller 24-timmarsformat 

vds-rte

Användning: För att visa en CKEditor, fältets användargränssnitt som du ser i fältet för RTF-redigerare 

Syntax:

vds-betyg

Användning: För att visa ett betygsstjärnfält. Den kommer att visa maximalt 5 stjärnor.

Syntax:

Attribut som stöds:
område Värde mellan 1 och 5

vds-iframe

Användning: För att visa en iframe med givet HTML-innehåll

Syntax:

vds-framsteg

Användning: För att visa framstegsprocenten

Syntax:

Attribut som stöds:
värde % av färgen
anpassad färgkod som standard visas framsteg i blått, du kan skicka vilket giltigt färgnamn som helst
 
 
 

Användningsfall för VTAP-kunder

 
 

En av våra kunder använder en annan applikation för att spåra sina projekt och framsteg. 

De ville börja använda Vtiger Projects, men användargränssnittet var det enda hindret för att använda Vtiger Projects. Gränssnittet gav inte alla detaljer om milstolpar och uppgifter på en enda skärm för ett projekt, som kunden ville ha.

För att övervinna detta hinder föreslog vi följande lösning.

De skulle kunna använda vår lågkodsplattform Module Designer för att designa en sida som skulle delas upp i 3 delar. 

Den första delen skulle visa en lista över projekt, nästa del skulle visa milstolpar kopplade till det valda projektet och den tredje delen skulle visa uppgifterna kopplade till det valda projektet och milstolpar. Det skulle se ut som Outlook-postlådan, som visar e-postmeddelanden och deras innehåll på höger sida. I det här fallet visar dess 3-nivå uppgiftsdetaljer i slutet.

För att bygga upp denna förmåga skulle vi bygga en anpassad listsida som kan läggas till med hjälp av 'LIST_ADD_VIEWTYPE' komponent. Ser här. till exempel. 

Sedan skulle funktionen VTAP.API.Hämta användas för att hämta data för projekt, projektmilstolpe och uppgifter. De skulle visas i separata kolumner men skulle fortfarande vara sammankopplade. Du kan kopiera koden från här. att se det i aktion.
 

En av våra kunder använder en annan applikation för att spåra sina projekt och framsteg. 

De ville börja använda Vtiger Projects, men användargränssnittet var det enda hindret för att använda Vtiger Projects. Gränssnittet gav inte alla detaljer om milstolpar och uppgifter på en enda skärm för ett projekt, som kunden ville ha.

För att övervinna detta hinder föreslog vi följande lösning.

De skulle kunna använda vår lågkodsplattform Module Designer för att designa en sida som skulle delas upp i 3 delar. 

Den första delen skulle visa en lista över projekt, nästa del skulle visa milstolpar kopplade till det valda projektet och den tredje delen skulle visa uppgifterna kopplade till det valda projektet och milstolpar. Det skulle se ut som Outlook-postlådan, som visar e-postmeddelanden och deras innehåll på höger sida. I det här fallet visar dess 3-nivå uppgiftsdetaljer i slutet.

För att bygga upp denna förmåga skulle vi bygga en anpassad listsida som kan läggas till med hjälp av 'LIST_ADD_VIEWTYPE' komponent. Ser här. till exempel. 

Sedan skulle funktionen VTAP.API.Hämta användas för att hämta data för projekt, projektmilstolpe och uppgifter. De skulle visas i separata kolumner men skulle fortfarande vara sammankopplade. Du kan kopiera koden från här. att se det i aktion.
 
 

Vtiger APPtitude 

 

Verktyg vi gillar

 
 

Elasticsearch är ett bra projekt med öppen källkod att bidra till om du är intresserad av datavetenskap. Den kan analysera, söka och lagra stora mängder data i realtid. Elasticsearch hjälper sina användare att få data att fungera på många olika sätt.
 

Elasticsearch är ett bra projekt med öppen källkod att bidra till om du är intresserad av datavetenskap. Den kan analysera, söka och lagra stora mängder data i realtid. Elasticsearch hjälper sina användare att få data att fungera på många olika sätt.
 
 

Coming Soon....

 
 

App Designer 

Vtigers App Designer låter dig bygga anpassade appar som kan eller inte beror på CRM. Det ger dig flexibiliteten att skriva appar i alla JavaScript-ramverk du har expertis på.

Med kraftfulla VTAP JavaScript API:er kan du också ansluta till CRM och push/dra data från den för att enkelt bygga anpassade applikationer.
 

App Designer 

Vtigers App Designer låter dig bygga anpassade appar som kan eller inte beror på CRM. Det ger dig flexibiliteten att skriva appar i alla JavaScript-ramverk du har expertis på.

Med kraftfulla VTAP JavaScript API:er kan du också ansluta till CRM och push/dra data från den för att enkelt bygga anpassade applikationer.
 
 

Registrera dig för att få de senaste uppdateringarna!

 
 

Copyright 2024 Vtiger. Alla rättigheter förbehållna. Olika varumärken som innehas av respektive ägare.