Inserindo um relatório do Power BI com layout móvel

  • Artigo

Os usuários móveis podem exibir qualquer página de relatório do Power BI na orientação paisagem. No entanto, os autores de relatório podem criar uma exibição adicional otimizada para dispositivos móveis que é exibida na orientação retrato. Essa opção de design, disponível no Power BI Desktop e no serviço do Power BI, permite aos autores selecionar e reorganizar apenas os visuais que façam sentido para os usuários móveis em trânsito.

Se o relatório tiver um layout móvel criado em Power BI Desktop ou serviço do Power BI, você poderá inserir o relatório com esse layout em seu aplicativo Web.

Como inserir um relatório usando o layout móvel

Primeiro, você precisa criar um layout móvel para o relatório, marcar Otimizar relatórios do Power BI para o aplicativo móvel para criar esse layout.

Para inserir um relatório do Power BI no layout móvel do relatório, defina o layoutType como models.LayoutType.MobilePortrait no objeto de configurações:

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

Para obter mais informações sobre configurações de relatório, consulte Definir configurações de relatório.

Há dois tipos de layout dedicados a dispositivos móveis:

  • MobilePortrait - Otimizado para exibição retrato. Esse é o layout móvel que você criou para o relatório.

  • MobileLandscape - Otimizado para exibição paisagem. Esse é o layout regular do relatório.

Observação

O layout do relatório será determinado pela layoutType propriedade, independentemente da orientação real do dispositivo.

Por exemplo, o código a seguir mostra como inserir o relatório com um layout móvel.

// 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
    }
};

Para atualizar o layout do relatório quando o relatório já estiver carregado, use o report.updateSettings método . Para obter mais informações, consulte Atualizar configurações de relatório em runtime.

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

report.updateSettings(newSettings);

Verificar se uma página de relatório tem layout móvel

A classe Página do Cliente do Power BI define o hasLayout método como:

hasLayout(layoutType: any): Promise<boolean>

O hasLayout método retornará um booliano se a página tiver o tipo de layout especificado.

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

Você pode usar a inserção em fases com hasLayout para marcar se a página tiver layout móvel antes de renderizar o relatório.

Passar o dedo em eventos

Ao inserir um relatório no layout móvel, você pode ouvir os eventos de passar o dedo e executar um código personalizado em seu aplicativo Web. Há dois eventos swipeStart de passar o dedo e swipeEnd ambos retornam o seguinte formato:

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

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

Por exemplo, você pode usar o swipeEnd evento para detectar um deslize esquerdo:

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

Para obter mais informações sobre como lidar com eventos, consulte Como lidar com eventos.

Otimizar seu aplicativo com layouts personalizados

Você também pode usar o recurso de layout personalizado para criar layouts personalizados otimizados para diferentes dispositivos móveis ou telas de tablet.

Limitações

  • Após a carga inicial do relatório, a alteração para o layout móvel do relatório só terá suporte se o layout móvel (retrato/paisagem) tiver sido definido no objeto de configuração de inserção inicial. Caso contrário, você deve primeiro chamar powerbi.reset(HTMLElement) para remover o iframe. Em seguida, você precisa chamar powerbi.embed(...) usando o mesmo contêiner com a configuração de layout móvel definida no objeto de configuração inserido.

  • Se você tentar inserir uma página de relatório com o MobilePortrait layout e a página não tiver um layout móvel, a página será carregada com o MobileLandscape layout.

  • Para permitir que os usuários naveguem entre páginas enquanto usam layouts móveis, você pode usar report.setPage e implementar sua própria navegação. Para obter mais informações, consulte Navegação de página.

  • As configurações acima referem-se à inserção de um relatório do Power BI no modo de exibição móvel.
    A inserção do painel pode ser configurada para o layout móvel com a configuração pageView: pageView: 'oneColumn'

Próximas etapas