Webonderdelen in SharePoint verbinden

Wanneer u een moderne pagina toevoegt aan een site, kunt u daarna webonderdelen toevoegen en aanpassen. Webonderdelen vormen de bouwstenen van een pagina. U kunt een aantal webonderdelen met elkaar verbinden om een interactieve en dynamische ervaring te creëren voor de bezoekers van uw pagina. U kunt bijvoorbeeld een webonderdeel document bibliotheek verbinden met een webonderdeel bestands viewer. Wanneer een gebruiker op een naam in de lijst van de document bibliotheek klikt, wordt de inhoud van het desbetreffende bestand weergegeven in de bestands viewer. U kunt bijvoorbeeld een webonderdeel lijst verbinden met een webonderdeel insluiten en aangepaste code toevoegen voor diverse dynamische ervaringen.

Notities: 

  • Sommige functies worden geleidelijk geïntroduceerd voor organisaties die zich hebben aangemeld voor het targeted release-programma. Dit betekent dat u bepaalde functies nog niet kunt zien of dat de functies er anders uit kunnen zien dan beschreven in de Help-artikelen.

  • De webonderdelen in dit artikel zijn niet beschikbaar voor gebruik op klassieke pagina's.

Webonderdelen waarmee u verbinding kunt maken, zijn: het webonderdeel Lijsteigenschappen, het webonderdeel bestands viewer en het webonderdeel insluiten. Hier volgen enkele voorbeelden van hoe u deze verbonden webonderdelen kunt gebruiken.

Een bestand weergeven op basis van wat een gebruiker in een documentbibliotheek selecteert (een webonderdeel bestands viewer verbinden met een webonderdeel documentbibliotheek)

In dit voorbeeld kunnen gebruikers door een bibliotheek met campagne documenten bladeren en de inhoud van een geselecteerd bestand bekijken zonder de pagina te verlaten en zonder dat u elk bestand hoeft te openen.

Voorbeeld van een webonderdeel bestands viewer dat is gekoppeld aan een documentbibliotheek

Dit doet u als volgt:

  1. Voeg op de pagina een webonderdeel document bibliotheek toe met de bibliotheek die u wilt gebruiken, en voeg een webonderdeel bestands viewertoe.

  2. Als u het webonderdeel bestands viewer voor de eerste keer gaat toevoegen, wordt het deelvenster recente documenten geopend. Klik in de rechterbenedenhoek van dit deelvenster op Annuleren .

  3. Klik op webonderdeel bewerken Knop webonderdeel Bewerken aan de linkerkant van het webonderdeel bestands viewer.

  4. Klik rechtsboven in het eigenschappenvenster op de drie puntjes (...) en klik vervolgens op verbinding met bron maken.

    Knop verbinding maken met bron
  5. Selecteer onder verbinding maken met bronde documentbibliotheek die u wilt gebruiken in de vervolgkeuzelijst.

    Deelvenster van de bestands viewer met de vervolgkeuzelijst verbinding maken met bron
  6. Klik op de X boven aan het deelvenster om dit te sluiten.

  7. Klik boven aan de pagina op Opslaan als concept .

  8. Test de verbinding door een document te selecteren uit de door u gekozen documentbibliotheek. Het document dat wordt weergegeven in het webonderdeel bestands viewer, wordt weergegeven.

  9. Wanneer u klaar bent om uw publiek de pagina te bekijken, klikt u rechtsboven op de pagina op publiceren .

Een item in een lijst weergeven op basis van de inhoud van een gebruiker in een webonderdeel lijst (verbinding maken met een webonderdeel Lijsteigenschappen aan een webonderdeel lijst)

Wanneer u een grote lijst met veel kolommen hebt, kunnen gebruikers moeilijk de specifieke informatie vinden waarnaar ze op zoek zijn. Met het webonderdeel Lijsteigenschappen kunt u een item selecteren uit een webonderdeel lijst en alleen de door u opgegeven waarde (n) weergeven. In het volgende voorbeeld bevat een webonderdeel lijst een lijst met regionale kantoren. Wanneer de gebruiker een item uit de lijst selecteert, worden in het webonderdeel Lijsteigenschappen alleen de naam en de verkoopgegevens van Office weergegeven.

Voorbeeld van een lijst die is gekoppeld aan een webonderdeel Lijsteigenschappen

Dit doet u als volgt:

  1. Voeg op de pagina een webonderdeel lijst toe met de lijst die u wilt gebruiken en voeg vervolgens een webonderdeel Lijsteigenschappentoe.

  2. Klik op webonderdeel Knop webonderdeel Bewerken bewerken aan de linkerkant van het webonderdeel Lijsteigenschappen.

  3. Klik rechtsboven in het eigenschappenvenster op de drie puntjes (...) en klik vervolgens op verbinding met bron maken.

    Knop verbinding maken met bron
  4. Selecteer onder verbinding maken met bronde lijst die u wilt gebruiken in de vervolgkeuzelijst.

  5. Selecteer onder weergavewat u wilt dat de gebruiker op de pagina wordt weergegeven. 

  6. Schakel onder weer te geven veldende selectievakjes in naast de kolommen waarvan u de waarden wilt weergeven.

    Deelvenster lijsteigenschappen van webonderdeel
  7. Klik boven aan de pagina op Opslaan als concept .

  8. Test de verbinding door een item te selecteren in de lijst die u hebt gekozen. De waarde die u hebt opgegeven, wordt weergegeven in het webonderdeel Lijsteigenschappen.

  9. Wanneer u klaar bent om uw publiek de pagina te bekijken, klikt u rechtsboven op de pagina op publiceren .

Een video, afbeelding of locatie weergeven op basis van de selectie van een gebruiker in een webonderdeel lijst (verbinding maken tussen een webonderdeel insluiten en een webonderdeel lijst)

Met het webonderdeel insluiten kunt u koppelingen of insluitcode invoeren waarmee u variabelen kunt weergeven, afhankelijk van de optie die door uw pagina-viewer wordt geselecteerd. Hier volgen drie voorbeelden van hoe u geselecteerde afbeeldingen, Video's en locaties kunt weergeven.

Een geselecteerde YouTube-video weergeven

In dit voorbeeld bevat het webonderdeel lijst een lijst met video titels en-Id's voor diverse YouTube-Video's. Wanneer een gebruiker een video uit de lijst kiest, ziet u in het webonderdeel insluiten de optie video. Op de koppeling in het webonderdeel insluiten wordt een variabele gebruikt voor de weergave van de video-ID van de video die door een gebruiker is geselecteerd in de lijst.

Voorbeeld van een webonderdeel insluiten dat is gekoppeld aan een lijst

Dit doet u als volgt:

  1. Maak een lijst met een titelkolom en een kolom voor uw video-id's, zoals in het voorbeeld hierboven. Dit is de ID van de YouTube-koppeling die de video identificeert, en die wordt gevonden na het ' v = ' gedeelte van de koppeling. In de volgende koppeling is het cursieve deel bijvoorbeeld de video-ID:

    https://www.youtube.com/watch?v =0YEPy7HRf60

  2. Voeg op de pagina een webonderdeel lijst toe en kies de lijst met de video-id's.

  3. Een webonderdeel insluitentoevoegen.

  4. Klik op webonderdeel Knop webonderdeel Bewerken bewerken aan de linkerkant van het webonderdeel insluiten.

  5. Klik rechtsboven in het eigenschappenvenster op de drie puntjes (...) en klik vervolgens op verbinding met bron maken.

    Knop verbinding maken met bron
  6. Selecteer onder verbinding maken met bronde lijst in de vervolgkeuzelijst.

  7. Voeg onder adres van website of invoegcodede YouTube-koppeling toe. In plaats van een afzonderlijke video-ID te gebruiken, gebruikt u de naam van de lijstkolom die de Id's bevat als een variabele. Een variabele wordt aangegeven met een vierkante haak openen, een $ en een vierkante haak sluiten na de naam. Hier ziet u een voorbeeld van een video-ID in de kolomnaam:

    Het eigenschappenvenster van het webonderdeel insluiten met verbonden lijst

  8. Klik boven aan de pagina op Opslaan als concept .

  9. Test de verbinding door een item te selecteren in de lijst die u hebt gekozen. U ziet nu de video die wordt weergegeven in het webonderdeel insluiten.

  10. Wanneer u klaar bent om uw publiek de pagina te bekijken, klikt u rechtsboven op de pagina op publiceren .

Een geselecteerde afbeelding weergeven

In dit voorbeeld bevat het webonderdeel lijst afbeeldings titels en Url's voor afbeeldingen die zijn opgeslagen op een SharePoint-site. Wanneer een gebruiker een afbeelding in de lijst kiest, ziet u in het webonderdeel insluiten de optie afbeelding. In dit voorbeeld wordt de IFrame-code gebruikt in het webonderdeel insluiten, en de variabele vertegenwoordigt de koppeling naar de afbeelding.

Voorbeeld van een webonderdeel insluiten dat is gekoppeld aan een lijst met afbeeldingen

Dit doet u als volgt:

  1. Maak een lijst met een titelkolom en een kolom voor de afbeeldings-url's.

    Tip: Als u een URL voor de afbeelding wilt weergeven, gaat u naar de bibliotheek waar de afbeelding is opgeslagen, klikt u met de rechtermuisknop op de afbeelding en klikt u op koppeling kopiëren. Klik vervolgens op kopiëren. U kunt nu de koppeling in uw lijst plakken.

  2. Voeg op de pagina een webonderdeel lijst toe en kies de lijst met de afbeeldings-url's.

  3. Een webonderdeel insluitentoevoegen.

  4. Klik op webonderdeel Knop webonderdeel Bewerken bewerken aan de linkerkant van het webonderdeel insluiten.

  5. Klik rechtsboven in het eigenschappenvenster op de drie puntjes (...) en klik vervolgens op verbinding met bron maken.

    Knop verbinding maken met bron
  6. Selecteer onder verbinding maken met bronde lijst in de vervolgkeuzelijst.

  7. Voeg onder adres van website of ingeslotencode de ingesloten code toe. In dit voorbeeld is de ingesloten code:

    <iframe width = "693" height = "390" src = "[$Image URL]" Framed = "0" allowFullScreen = "" toegestaan = "acceleratief; automatisch versleutelde media; gyroscope; foto-in-Picture ></iframe>

    waarbij [$Image URL] de variabele is die de kolomnaam voor de afbeeldings-Url's vertegenwoordigt.

    Voorbeeld van ingesloten code voor een geselecteerde afbeelding
  8. Klik boven aan de pagina op Opslaan als concept .

  9. Test de verbinding door een item te selecteren in de lijst die u hebt gekozen. U moet theimage weergeven in het webonderdeel insluiten.

  10. Wanneer u klaar bent om uw publiek de pagina te bekijken, klikt u rechtsboven op de pagina op publiceren .

Een geselecteerde locatie weergeven

In dit voorbeeld bevat het webonderdeel lijst locaties en de bijbehorende coördinaten. Wanneer een gebruiker een locatie uit de lijst kiest, ziet u in het webonderdeel insluiten de locatie op een Bing-kaart. In dit voorbeeld wordt de IFrame-code gebruikt in het webonderdeel insluiten, en de variabelen vertegenwoordigen de coördinaten.

Voorbeeld van een verbonden webonderdeel ingesloten invoegtoepassing met een locatie uit een lijst

Dit doet u als volgt:

  1. Maak een lijst met een titelkolom en kolommen voor lengtegraad en lengtegraad.

  2. Voeg op de pagina een webonderdeel lijst toe en kies de lijst met de locatiegegevens.

  3. Een webonderdeel insluitentoevoegen.

  4. Klik op webonderdeel Knop webonderdeel Bewerken bewerken aan de linkerkant van het webonderdeel insluiten.

  5. Klik rechtsboven in het eigenschappenvenster op de drie puntjes (...) en klik vervolgens op verbinding met bron maken.

    Knop verbinding maken met bron
  6. Selecteer onder verbinding maken met bronde lijst in de vervolgkeuzelijst.

  7. Voeg onder adres van website of ingeslotencode de ingesloten code toe. In dit voorbeeld is de ingesloten code:

    <iframe width = "500" height = "400" src = "https://www.Bing.com/Maps/embed? h = 400&amp; w = 500&amp, CP = [$Latitude] ~ [$Longitude] &amp; Typ = d&amp; sty = c&amp; = r&amp; FORMULIER = MBEDV8 "frameBorder =" 0 "schuiven =" nee "> </iframe>

    waarbij [$Latitude] en [$Longitude] zijn de variabelen die de namen van de kolommen voor elk van die punten vertegenwoordigen.

    Voorbeeld van ingesloten code om locaties weer te geven
  8. Klik boven aan de pagina op Opslaan als concept .

  9. Test de verbinding door een item te selecteren in de lijst die u hebt gekozen. U ziet nu een Bing-kaart met de locatie die wordt weergegeven in het webonderdeel insluiten.

  10. Wanneer u klaar bent om uw publiek de pagina te bekijken, klikt u rechtsboven op de pagina op publiceren .

Notities: 

  • Ingesloten code moet een IFRAME-gebaseerd zijn (dat wil zeggen, beginnen en eindigen met <iframe-> Tags). Ingesloten code die gebruik maakt van <script> Tags wordt niet ondersteund.

  • Alleen beveiligde websites kunnen worden ingesloten. Controleer of de URL van de website met HTTPS begint.

Een lijst filteren op basis van een selectie in een andere lijst of bibliotheek

Met dynamisch filteren kunt u een lijst filteren op basis van een selectie die is gemaakt in een andere lijst. In het volgende voorbeeld wordt de bibliotheek planningsdocumenten gefilterd op een selectie in de project gegevenslijst. De waarde ' Marketing ' in de kolom project team is geselecteerd, zodat alleen documenten die eigendom zijn van het marketing team, worden weergegeven in de bibliotheek planningsdocumenten. 

Dynamische gefilterde lijst

Dit doet u als volgt:

  1. Voeg op de pagina een webonderdeel lijst of een bibliotheek toe en selecteer de lijst of bibliotheek met de waarden waarop u wilt filteren.

  2. Voeg een ander webonderdeel lijst of bibliotheek toe en selecteer de lijst of bibliotheek met de informatie die u wilt filteren.

  3. Selecteer het webonderdeel lijst of bibliotheek dat u wilt filteren en selecteer Knop webonderdeel Bewerken webonderdeel bewerken aan de linkerkant van het webonderdeel.

  4. Schuif de schuifknop onder dynamisch filterennaar de stand aan .

  5. Selecteer de kolom die u wilt filteren in de kolomveld in [naam van uw lijst] om te filteren.

  6. Selecteer de lijst of bibliotheek die u hebt toegevoegd aan de pagina in stap 1 onder lijst of bibliotheek met filterwaarde.

  7. Selecteer onder kolom met de filterwaardede kolom met de waarden waarop u wilt filteren.

  8. Selecteer Toepassen.

    Wanneer u het voorbeeld van de afbeelding aan het begin van de sectie gebruikt, ziet u de opties voor dynamisch filteren van de bibliotheek documentbibliotheek als volgt:

    Document bibliotheek met geopend deelvenster voor dynamische filteropties

  9. Wanneer u klaar bent, klikt u boven aan de pagina op Opslaan als concept , of als u de pagina wilt bekijken, selecteert u publiceren rechtsboven op de pagina.

Uw Office-vaardigheden uitbreiden
Training verkennen
Als eerste nieuwe functies krijgen
Deelnemen aan Office Insiders

Was deze informatie nuttig?

Bedankt voor uw feedback.

Hartelijk dank voor uw feedback! Het lijkt ons een goed idee om u in contact te brengen met een van onze Office-ondersteuningsagenten.

×