Exibindo uma tela

Nesta seção, você encontra um exemplo prático de como exibir uma tela Server-Driven

Exibindo uma tela a partir de uma URL

Para projetos no Angular

Para definir onde você quer mostrar uma tela server-driven no Angular, você deve usar o componente fornecido pela biblioteca <beagle-remote-view>

No arquivo html do seu componente, adicione o remote view.

<beagle-remote-view [loadParams]="loadParams"></beagle-remote-view>

Feito isso, acesse o controller do componente em que você adicionou o remote view e crie o loadParams que é esperado pelo remote view.

loadParams: LoadParams;

  constructor() {
    this.loadParams = {
      path: '/pathToScreen'
    };
  }

Para projetos no React

Para definir uma tela server-driven no React, você precisa criar um serviço com uma configuração mínima, como no exemplo:

import { createBeagleUIService } from "@zup-it/beagle-react";

export default createBeagleUIService({
  baseUrl: "",
  components: {},
});

Feito isso, usamos dois componentes fornecidos pela biblioteca Beagle para definir onde a tela server-driven será renderizada:

  1. O BeagleProvider
  2. O BeagleRemoteView
...
import { BeagleProvider, BeagleRemoteView } from '@zup-it/beagle-react';
import BeagleService from './beagle/beagle-service';

function App() {
  return (
    <BeagleProvider value={BeagleService}>
      <BeagleRemoteView path={'/pathToScreen'} />
    </BeagleProvider>
  );
}

export default App;