Wix Blocks: Dashboardpagina's maken en beheren

Leestijd 5 minuten
Wix Blocks is beschikbaar voor alle Wix Studio-gebruikers. Gebruik Wix Studio om toegang te krijgen tot Wix Blocks.
Met Blocks kun je een dashboardpagina aan je app toevoegen. Dashboardpagina's zijn de backoffice van je app, waarmee websitemakers de gegevens en instellingen van de app kunnen beheren. Je kunt voorbeelden van dashboardpagina's zien in de Wix-apps. Dit is bijvoorbeeld een dashboardpagina van de Wix Portfolio-app:
voorbeeld dashboard
Wanneer een websitemaker je Blocks-app op een website installeert, verschijnt de dashboardpagina op het dashboard van hun website en wordt deze genoemd naar je applicatie. 
bekijk het dashboard in de Editor

Een dashboardpagina maken

Voeg een dashboardpagina toe aan je Blocks-app via het App-dashboard-pictogramdashboard iconin het App-structuur-menu app structure menu 

Je dashboardpagina bevat:
  • Een canvas waar je elementen kunt toevoegen, zoals indelingstools, knoppen, invoertekstvelden, enzovoort. Blocks biedt een template voor een veelgebruikte Dashboard-gebruikersinterface (UI). Je kunt deze template natuurlijk aanpassen. Ontwerp je dashboardpagina zoals je widgets in Blocks ontwerpt.
  • Een code-onderdeel om code aan je dashboard toe te voegen
Belangrijk
Momenteel kun je slechts één dashboardpagina maken voor je Blocks-app. 

Een dashboardpagina toewijzen aan een actieknop

Een van de meest voorkomende manieren om een dashboardpagina te openen, is via de hoofdactieknop in een van de actieknoppen van je widget. Om dit te doen: 
  1. Ga naar het Configuratie-tabblad.
  2. Klik op de widget of het element dat je wilt configureren. 
  3. Klik op Bewerk actiebalk
  4. Wijs de hoofdactie aan (de linkerknop).
  5. Klik op Instellingen actieknop.  
instellingen actieknop
  1. Selecteer Dashboard
  2. Selecteer je dashboardpagina. 
instellingen voor hoofdacties

Een dashboardpagina openen vanuit een aangepast paneel

Als je een aangepast paneel hebt gebouwd met de Blocks-paneelbouwer, wil je misschien het dashboard vanuit dat paneel openen. (Lees meer over Blocks-panelen). Om dit te doen: 
Haal eerst de URL van je dashboard op.
  1. Ga naar het App-dashboard-menuapp dashboard
  2. Wijs de naam van de dashboardpagina aan en klik op de Meer acties-pictogram.
  3. Klik op Link kopiëren

Gebruik deze URL nu in de paneelcode. 
  1. Ga naar het Panelen-tabblad. 
  2. Selecteer je paneel in het Mijn panelen-menu. 
  3. Ga naar het code-gedeelte van het paneel (als je het code-gedeelte niet ziet, klik je op het Maximaliseren-pictogram maximize icon).
  4. Importeer de wix-editor-module:
1import wixEditor from 'wix-editor';
  1. Gebruik de openDashboardPanel()-functie, met de dashboard-URL als parameter, om je dashboardpagina vanuit het paneel te openen. Bijvoorbeeld: 
1wixEditor.openDashboardPanel('app/771680a8-ad76-4a3c-8bfc-4e2873de96c9'); 

Code aan je dashboardpagina toevoegen

Gebruik het codegedeelte van je dashboardpagina om code toe te voegen aan je dashboardpagina. Je code kan het volgende bevatten:

Om code toe te voegen aan je dashboardpagina:
  1. Open je dashboard vanuit het App-dashboard-menu.
  2. Ga naar het code-gedeelte van je dashboard (als je het code-gedeelte niet ziet, klik je op het Maximaliseren-pictogram).

Dashboardpagina's en het Wix Developers Center

Elke dashboardpagina die in Blocks is gemaakt, verschijnt ook op de Componenten-pagina van je app in het Wix Developers Center. Het wordt weergegeven als een Blocks Dashboard-component. 
Belangrijk
Probeer je dashboardpagina niet te bewerken via het Wix Developers Center. 
dev center-componenten
Je kunt het Wix Developers Center ook gebruiken om dashboardpagina's te maken voor je app. Deze dashboardpagina's zijn anders dan de pagina's die je in Blocks maakt en bestaan uit een iFrame-URL die je opgeeft. Ze hebben niet alle mogelijkheden die in dit artikel worden beschreven. Ze verschijnen in het Wix Developers Center als een eenvoudig Dashboard-component. 
dev center-componenten
Je ziet beide soorten pagina's op het dashboard van je website zodra de app op een website is geïnstalleerd. 

Vond je dit artikel nuttig?

|