Incorporation d’un rapport Power BI avec une disposition mobile

  • Article

Les utilisateurs mobiles peuvent afficher une page de rapport Power BI en orientation paysage. Toutefois, les auteurs de rapports peuvent créer une vue supplémentaire qui est optimisée pour les appareils mobiles et qui s’affiche en orientation portrait. Cette option de conception, disponible à la fois dans Power BI Desktop et dans le service Power BI, permet aux auteurs de sélectionner et de réorganiser uniquement les objets visuels qui ont un sens pour les utilisateurs mobiles en déplacement.

Si votre rapport a une disposition mobile qui a été créée dans Power BI Desktop ou service Power BI, vous pouvez incorporer le rapport avec cette disposition dans votre application web.

Guide pratique pour incorporer un rapport à l’aide de la disposition mobile

Tout d’abord, vous devez créer une disposition mobile pour votre rapport, case activée sur Optimiser les rapports Power BI pour l’application mobile pour créer cette disposition.

Pour incorporer un rapport Power BI dans la disposition mobile du rapport, vous devez définir sur layoutTypemodels.LayoutType.MobilePortrait dans l’objet settings :

let embedConfig = {
    ...
    settings: {
        layoutType: models.LayoutType.MobilePortrait
    }
};

Pour plus d’informations sur les paramètres de rapport, consultez Configurer les paramètres de rapport.

Il existe deux types de disposition dédiés aux appareils mobiles :

  • MobilePortrait - Optimisé pour le mode portrait. Il s’agit de la disposition mobile que vous avez créée pour votre rapport.

  • MobileLandscape - Optimisé pour l’affichage paysage. Il s’agit de la disposition normale de votre rapport.

Notes

La disposition du rapport est déterminée par la layoutType propriété, quelle que soit l’orientation réelle de l’appareil.

Par exemple, le code suivant montre comment incorporer le rapport avec une disposition mobile.

// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;

var embedConfiguration = {
    type: 'report',
    id: reportId,
    embedUrl: embedUrl,
    tokenType: tokenType,
    accessToken: accessToken,
    settings: {
        layoutType: models.LayoutType.MobilePortrait
    }
};

Pour mettre à jour la disposition du rapport lorsque le rapport est déjà chargé, utilisez la report.updateSettings méthode . Pour plus d’informations, consultez Mettre à jour les paramètres de rapport au moment de l’exécution.

const newSettings = {
    layoutType: models.LayoutType.MobileLandscape
};

report.updateSettings(newSettings);

Vérifier si une page de rapport a une mise en page mobile

La classe Page cliente Power BI définit la hasLayout méthode comme suit :

hasLayout(layoutType: any): Promise<boolean>

La hasLayout méthode retourne une valeur booléenne si la page a le type de disposition spécifié.

let pages = await report.getPages();
let mobileLayout = pages[0].hasLayout(models.LayoutType.MobilePortrait);

Vous pouvez utiliser l’incorporation par phases avec hasLayout pour case activée si la page a une mise en page mobile avant le rendu du rapport.

Événements de balayage

Lors de l’incorporation d’un rapport dans la disposition mobile, vous pouvez écouter les événements de balayage et exécuter un code personnalisé sur votre application web. Il existe deux événements de balayage, swipeStart qui swipeEnd retournent le format suivant :

interface ISwipeEvent {
  currentPosition: IPosition;
  startPosition: IPosition;
}

interface IPosition {
  x: number;
  y: number;
}

Par exemple, vous pouvez utiliser l’événement swipeEnd pour détecter un mouvement de balayage vers la gauche :

report.on("swipeEnd", function(event) {
    const swipeEndEvent = event.detail.swipeEvent;
    if (swipeEndEvent.currentPosition.x < swipeEndEvent.startPosition.x) {
        console.log("Swipe left detected");
    }
});

Pour plus d’informations sur la gestion des événements, consultez Comment gérer les événements.

Optimiser votre application avec des dispositions personnalisées

Vous pouvez également utiliser la fonctionnalité de disposition personnalisée pour créer des dispositions personnalisées optimisées pour différents écrans mobiles ou tablettes.

Limites

  • Après le chargement initial du rapport, la modification de la disposition mobile du rapport est prise en charge uniquement si la disposition mobile (portrait/paysage) a été définie dans l’objet de configuration d’incorporation initial. Sinon, vous devez d’abord appeler powerbi.reset(HTMLElement) pour supprimer l’iframe. Ensuite, vous devez appeler powerbi.embed(...) à l’aide du même conteneur avec le paramètre de disposition mobile défini sur l’objet de configuration incorporé.

  • Si vous essayez d’incorporer une page de rapport avec la MobilePortrait mise en page et que la page n’a pas de mise en page mobile, la page est chargée avec la MobileLandscape mise en page.

  • Pour permettre à vos utilisateurs de naviguer entre les pages tout en utilisant des dispositions mobiles, vous pouvez utiliser report.setPage et implémenter votre propre navigation. Pour plus d’informations, consultez Navigation dans les pages.

  • Les configurations ci-dessus font référence à l’incorporation d’un rapport Power BI dans la vue mobile.
    L’incorporation de tableau de bord peut être configurée pour la mise en page mobile avec la configuration pageView : pageView: 'oneColumn'

Étapes suivantes