I dagens snabba digitala miljö kan manuell uppdatering av digitala skärmar vara både tidskrävande och felbenägen. Den här guiden visar dig hur du integrerar livedata i dina digitala skärmar för att möjliggöra sömlösa automatiska uppdateringar över dina displayer.
I denna artikel:
- Vad är OptiSync?
- Lägga till din datakälla
- Mata in din datakälla i Designer
- Redigera och designa din Repeater i Designer
- Publicera till skärmar
| OBS: OptiSync är endast tillgängligt för Pro Plus-planer och uppåt. |
Vad är OptiSync?
OptiSync är en integrerad lösning som är utformad för att sömlöst ansluta till olika datakällor, inklusive kalkylblad, API:er och tabeller.
Nyckelfunktioner:
- Enkel installation: Att konfigurera din datakälla kräver låg kod eller ingen kod alls, vilket säkerställer en snabb och enkel process.
- Automatiska uppdateringar: Du kan länka din datakälla direkt till vår Designer-app, som automatiskt uppdaterar ditt innehåll.
- Realtidsdata: Detta säkerställer att din digitala display alltid återspeglar den senaste datan, eliminerar behovet av manuell inmatning, minskar fel och sparar tid.
Användningsområden:
OptiSync är idealiskt för ett brett utbud av användningsområden, såsom:
- Visa medarbetares födelsedagar
- Restaurangmenyer
- Arbetsjubileer
- Produktkataloger
- Teampresentationer
- Och mycket mer!
Med OptiSync förblir dina digitala skärmar korrekta och uppdaterade, vilket förbättrar kommunikation och engagemang i olika miljöer.
Lägga till din datakälla
Du kan lägga till din datakälla via Kontoinställningar eller genom Designer-appen.
Kontoinställningar
- Klicka på ditt kontonamn i övre högra hörnet
- Välj Mer
- Välj DataSources
- Välj Add DataSource
- Välj din datakälla från listan med alternativ och följ instruktionerna för hur du importerar den
- Om du öppnar dina kontoinställningar helt kommer det att finnas under "Advanced" i kolumnen till vänster
Designer-appen:
- Öppna Designer-appen
- Välj DataSources från kolumnen till vänster
- Välj Add DataSource
- Välj din datakälla från listan med alternativ och följ instruktionerna för hur du importerar den
Följ dessa guider för att ladda upp olika typer av DataSources:
- Hur du lägger till Google Sheets som en DataSource för OptiSync
- Hur du lägger till ett Microsoft 365 Excel-kalkylblad som en DataSource för OptiSync
Dessutom kan du integrera och testa API-förfrågningar och köra nödvändig före- eller efterbehandlingskod.
När din datakälla är konfigurerad kan du se Where Used, Edit datakällan och/eller Duplicate den.
- Where Used: Detta visar dig vilka av dina designer som använder denna datakälla. Detta är användbart för att spåra användningen av denna datakälla över olika tillgångar.
- Edit Data: Gå in i din datakälla och gör eventuella uppdateringar/ändringar.
- Duplicate: Detta skapar en kopia av din datakälla.
Mata in din datakälla i Designer
När din datakälla är konfigurerad kan du ansluta den till Designer-appen.
Gå till DataSource på vänster sida av sidomenyn.
Som tidigare nämnts kan du lägga till din DataSource här. Eller, om du redan har skapat den i DataSource-sektionen under Advanced, bör den visas under Other DataSources.
Välj din datakälla.
Dra och släpp datakällans element på Designer-arbetsytan.
- Du kan antingen dra och släppa en hel rad eller de individuella aspekterna inom raderna.
Ett popup-meddelande kommer att visas med frågan "Would you like to use this data in a Repeater or on its Own?"
-
Use on its own: Det kommer att vara ett element för sig självt och uppdateras automatiskt baserat på datakällan.
-
Use in a Repeater: Detta inkluderar datakällans element i en Repeater-komponent.
- Repeater är ett verktyg som kan användas i Designer-applikationen för att visa och upprepa en lista med objekt dynamiskt.
| VIKTIGT |
| OptiSync stöder inte specialtecken (dvs. allt utanför ramen för ett engelskt tangentbord). Detta kommer att göra att systemdata läses som tomt och det kommer inte att visas. |
Redigera och designa din Repeater i Designer
Du kan redigera både mallen och Repeatern i Designer!
Repeatern finns i sidomenyn i Designer-applikationen.
I Repeaters-sektionen finns flera färdiga "Repeater components" och "Repeater Templates".
| Vad är skillnaden mellan de två? |
|
Repeater Component: designad för att hantera och visa upprepande element tillsammans med vissa designelement. Du kan inkludera denna Repeater-komponent i vilken mall du väljer - den behöver inte vara en Repeater-mall. När den väl är tillagd ansluter du den helt enkelt till din datakälla. Tänk på det som en widget som enkelt kan implementeras och anpassas över olika designer för att dynamiskt visa data. |
|
Repeater Template: specifikt utformad för att visa upprepande element inom en fördefinierad mall eller designlayout. Liksom andra mallar kommer den att ersätta befintlig design när den tillämpas. Du kan fortfarande göra redigeringar och ändringar efter önskemål. Återigen behöver användare bara ladda ner den och ansluta till önskad datakälla. |
Alla dessa element kan ha en DataSource mappad till sig och sedan redigeras på samma sätt som alla andra Designer-komponenter.
För mer information om detta, se våra guider:
Du kan också justera formateringen av en Repeater genom att välja den och sedan välja Settings.
Detta öppnar Data Mapping-sektionen för Repeatern i sidomenyn:
Sedan presenteras dessa alternativ:
- Replace DataSource: Byt din DataSource
- Manage: Gör ändringar i din DataSource-information.
- Filter: Tillämpa villkorsbaserade filter på DataSource. Filtervillkor kan tillämpas med fast värde eller enhetsattribut.
- Disconnect: Koppla bort din DataSource från Repeatern
-
Empty Data Handling: När det inte finns något DataSource-element är standardbeteendet att använda ett tomt värde. Du kan justera detta med följande alternativ:
- Skip: Hoppa över det, eller ta bort ytterligare repeater-objekt om det inte finns tillräckligt med data för att nå det inställda "Total Items displayed per Page".
- Use Default Value: Visa standardinnehåll, vilket är hur ditt Repeater-element ser ut självständigt.
- Use Blank: Repeatern visar ingenting.
- Spacing Between Items: Öka eller minska avståndet mellan Repeater-objekten.
-
Item Display Direction: Ändra positioneringen av raderna från din DataSource inom Repeater-objekten.
- Left To Right: Det visar raderna från vänster till höger.
- Top To Bottom: Det visar raderna uppifrån och ned.
- Item Display Alignment: Ändra justeringen av de återstående elementobjekten (mindre än de konfigurerade objekten) för att justeras vänster/center/höger eller topp/center/botten.
- Total Items Displayed per Page: Öka eller minska hur många Repeater-objekt du vill ska visas.
- Maximum Items in Each Row/Column: Öka eller minska hur många Repeater-objekt du vill ska visas i varje rad/kolumn.
- Additional Row/Column Spacing: Öka eller minska avståndet mellan rader/kolumner.
- Duration (seconds): Justera varaktighetstiden för hur länge varje Repeater-objekt visas innan.
- Shuffle: Blanda slumpmässigt objekten i din DataSource som ska visas på Repeatern.
Om du redigerar en Repeater kommer den att replikera dina uppdateringar för varje instans av data i datasetet.
- Detta möjliggör ett konsekvent utseende över liknande element utan behov av att designa varje element individuellt.
Om du vill använda en specifik Repeater Template eller Component och vill uppdatera exempel-DataSource till en av dina DataSources, följ stegen som visas nedan:
Hur du använder funktionen för egenskapsmappning
Denna avancerade funktion låter dig ändra utseendet på specifik data i din repeater baserat på villkor som ställs in av användaren. Dessa villkor, definierade i datakällan, mappas till motsvarande värden eller element i repeatern, och den angivna formateringen tillämpas sedan.
- I Designer, dubbelklicka på Repeatern som du vill ändra. (Detta öppnar Repeater Editor.)
- Välj elementet i Repeatern du vill redigera, klicka sedan på Settings överst
- Klicka på Advanced Options i sidomenyn
- Klicka på + Property Mapping (Du trycker på detta för varje ny instans av mappning du vill ha)
- Klicka på Property-menyn, välj ett av alternativen från rullgardinsmenyn som visas ovan eller skriv manuellt in ett av de tillgängliga alternativen som listas nedan.
- Klicka på Value-menyn, välj det motsvarande kolumnnamnet (Denna information hämtas från din DataSource).
- Upprepa detta så många gånger du vill för flera element inom din Repeater.
- Klicka på Update för att säkerställa att denna information sparas och tillämpas på din Repeater.
Här är de listade alternativen för egenskapsmappning i de avancerade inställningarna:
| Egenskap | Vad den gör | Värde |
| Fill Color | Ändra färgen på en vald form eller text i din Repeater | Accepterar ett giltigt Hex-färgvärde eller färgnamn (t.ex. #CE657E eller Red) |
| Font Size | Ändra storleken på en textfont och hur den visas på skärmar | Accepterar numeriskt värde (t.ex. 20) |
| Font Family | Ändra fonten för en vald text, såsom Arial, Times New Roman eller anpassade fonter. | Accepterar strängvärden som representerar fontfamiljen. (t.ex. Times New Roman) |
| Background Color | Ändra bakgrundsfärgen för en vald form eller text i din Repeater. | Accepterar ett giltigt Hex-färgvärde eller färgnamn (t.ex. #CE657E eller Red) |
| Font Weight | Ändra vikten eller tjockleken på textfonten, gör den ljusare eller fetare. | Accepterar specifika värden: normal, bold, lighter, bolder, unset, eller 100, 200, 300, 400, 500, 600, 700, 800, 900 |
| Underline | Ange om du vill att texten ska vara understruken för betoning. | Booleanskt värde; accepterar true/false eller 0/1 |
| Linethrough | Ange om du vill ha en linje genom texten. | Booleanskt värde; accepterar true/false eller 0/1 |
| Overline | Ange om texten har en överlinje. | Booleanskt värde; accepterar true/false eller 0/1 |
| Text Align | Ändra den horisontella justeringen av texten. | Accepterar specifika värden: left, center, right, justify, justify-left, justify-center, justify-right |
| Stroke Color | Ändra konturfärgen | Accepterar ett giltigt Hex-färgvärde eller färgnamn (t.ex. #CE657E eller Red) |
| Stroke Width | Ange konturens bredd, vilket avgör hur tjock eller tunn konturen är. | Accepterar ett numeriskt värde. |
| Direction | Ställ in textriktning: vänster-till-höger eller höger-till-vänster | Accepterar specifika värden: ltr eller rtl |
| Visible | Bestäm om elementet är synligt eller inte. | Booleanskt värde; accepterar true/false eller 0/1 |
| Opacity | Ändra transparensnivån för en vald form, text eller foto i din Repeater | Accepterar ett numeriskt värde från 0-1 (t.ex. 0,2 är 20%) |
Här är ett exempel på en exempel-DataSource konfigurerad med Fill Color, Background Color, Opacity, Font Weight och Text Align:
Hur du använder visningsformatalternativ
Om du vill ändra hur formateringen av viss data från din DataSource ser ut på din repeater kan du göra det med alternativet Display Format som finns i Repeater Editor. Detta sparar tid från att redigera din ursprungliga DataSource och kommer att tillämpa formateringen på alla upprepade element i Repeatern.
Följ stegen i föregående avsnitt angående Property Mapping för att komma åt Display Format-alternativen.
| Display Format-alternativ | Vad det gör |
| Text | Detta visar råvärde utan formatering. |
| Date Time | Du kan ändra tidszon, datumformat och tidsformat med tillgängliga alternativ. |
| Number | Du kan formatera nummer för att visas som procentsatser, decimaler, valuta med mera. |
Publicera till skärmar
När din design är färdig är den redo att publiceras till skärm.
(Här är en guide om du behöver ytterligare hjälp med detta.)
Din skärm kommer automatiskt att uppdateras baserat på din anslutna datakälla.
Du behöver inte längre manuellt uppdatera din data, vilket är tidskrävande och felbenäget.