Incorporation d’un rapport Power BI avec une disposition mobile

  • Article

Les utilisateurs mobiles peuvent afficher n’importe quelle page de rapport Power BI en orientation paysage. Toutefois, les auteurs de rapports peuvent créer une vue supplémentaire optimisée pour les appareils mobiles et les affichages 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 visuels qui sont logiques pour les utilisateurs mobiles en déplacement.

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

Comment incorporer un rapport à l’aide de la disposition mobile

Tout d’abord, vous devez créer une disposition mobile pour votre rapport, consultez 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 l'layoutType sur models.LayoutType.MobilePortrait dans l’objet paramètres :

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 la vue portrait. Il s’agit de la disposition mobile que vous avez créée pour votre rapport.

  • MobileLandscape - Optimisé pour la vue paysage. Il s’agit de la disposition régulière de votre rapport.

Note

La disposition du rapport sera déterminée par la propriété layoutType indépendamment de 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 méthode report.updateSettings. Pour plus d’informations, consultez Mettre à jour les paramètres de rapport aud’exécution.

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

report.updateSettings(newSettings);

Vérifier si une page de rapport a une disposition mobile

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

hasLayout(layoutType: any): Promise<boolean>

La méthode hasLayout 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 d’incorporation par phases avec hasLayout pour vérifier si la page a une disposition mobile avant de rendre le 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 et 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 balayage 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é disposition personnalisée pour créer des dispositions personnalisées optimisées pour différents écrans mobiles ou tablettes.

Considérations et limitations

  • Après la charge initiale 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 que 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 mise en page MobilePortrait et que la page n’a pas de mise en page mobile, la page est chargée avec la mise en page MobileLandscape.

  • Pour permettre à vos utilisateurs de naviguer entre les pages lors de l’utilisation de dispositions mobiles, vous pouvez utiliser report.setPage et implémenter votre propre navigation. Pour plus d’informations, consultez de navigation de page.

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

Contenu connexe