Partilhar via

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 e exibições na orientação retrato. Essa opção de design, que está disponível no Power BI Desktop e no serviço do Power BI, permite que os autores selecionem e reorganizem apenas os visuais que fazem sentido para os usuários móveis em qualquer lugar.

Se o relatório tiver um layout móvel criado no Power BI Desktop ou no 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 seu relatório, confira 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 para models.LayoutType.MobilePortrait no objeto de configurações:

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

Para obter mais informações sobre as 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. Este é o layout móvel que você criou para o relatório.

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

Nota

O layout do relatório será determinado pela propriedade layoutType 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 método report.updateSettings. Para obter mais informações, consulte Atualizar configurações de relatório no runtime.

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

report.updateSettings(newSettings);

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

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

hasLayout(layoutType: any): Promise<boolean>

O método hasLayout 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 de inserção em fases com hasLayout para verificar se a página tem 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 de passar o dedo, swipeStart e swipeEnd retornam o seguinte formato:

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

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

Por exemplo, você pode usar o evento swipeEnd para detectar um dedo 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.

Considerações e 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 layout MobilePortrait e a página não tiver um layout móvel, a página será carregada com o layout MobileLandscape.

  • Para permitir que os usuários naveguem entre páginas usando layouts móveis, você pode usar report.setPage e implementar sua própria navegação. Para obter mais informações, consulte de 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.
    O painel de inserção pode ser configurado para o layout móvel com a configuração pageView: pageView: 'oneColumn'

Conteúdo relacionado