How to display a screen

In this section, you will find how to display a server-driven screen.

Display a screen through a URL

Each platform has its own way to display a server-driven screen on frontend by using Beagle. You can see examples below:

To display a full server-driven screen, you need to use the method this.newServerDrivenIntent<BeagleActivity>(). Where this refers to the context of the screen.

This method requires the parameter ScreenRequest.

You must follow the example below:

val intent = this.newServerDrivenIntent<BeagleActivity>(ScreenRequest("/screen"))
startActivity(intent)

The Screen Request class.

The ScreenRequest is an internal Beagle class used to request which screen you want to display. You will only list the URL attribute for the page you want to load from the BFF. However, this element has other attributes, which can be used in the transition and between screens.

To learn more about this class, check out on Screen Request

To render a server-driven screen, just create an instance BeagleScreenViewController and the type is remote, then you make the initialization with your BFF’s URL, like the example below:

let beagleViewController = Beagle.screen(
    .remote(
        .init(url: "// URL AQUI")
    )
)

After that, now present it where you want. In this case, you must follow the command:

present(beagleViewController, animated: true, completion: nil)

The answer of your BFF must be a JSON that represent a visual component locally defined in the application.

Now, run the application and see a defined screen in a remoted rendered URL in your local application.

For projects on Angular

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 projects on React

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;

Display a screen through a JSON

To render a screen through a JSON, it is necessary to have a Activity or a Fragment with a FrameLayout, like the example below:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/frame_layout_android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"/>

Now, call the renderScreen() method from the frame layout created in the xml that pass its activity and the JSON as parameter.

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        frame_layout_android.renderScreen(
            activity = this,
            screenJson = "// JSON here"
        )
    }
}

To render a screen of a JSON, you just have to create a BeagleScreenViewController instance of the declarativeText type and initialize with the JSON, see the example below:

let beagleViewController = Beagle.screen(
    .declarativeText(
        .init(text: "// JSON HERE")
    )
)

After that, now just present it where you want to. On this case, you have to follow the command in the example below:

present(beagleViewController, animated: true, completion: nil)

Last modified February 11, 2021: create content (#298) (43225e15)