How to display a screen

Display a screen through a URL

For Angular projects

To define where you should display a server-driven screen on Angular, you should use a component provided by the <beagle-remote-view> library.

On the html file of your component, add the remote view.

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

Once you made it, access the controller component and create the loadParams, which is expected by the remote view.

loadParams: LoadParams;

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

For React projects

To define a server-driven screen on React, you need to create a service with a minimum configuration, see the example below:

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

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

Once you made it, use two components provided by Beagle’s library to define where the server-driven screen will be rendered:

1. The BeagleProvider
2. The 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;

Feedback

Was this page helpful?

Glad to hear it! Please tell us how we can improve.

Sorry to hear that. Please tell us how we can improve.