Beagle v1.5 is no longer actively maintained. The documented version you are viewing may contain deprecated functionality. For up-to-date documentation, see the latest version .
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:
Make sure to list your Beagle Activity as named in your AndroidManifestfile.
In this example, you only call it BeagleActivity, but this name is defined by you when creating your BeagleActivity. In the tutorial Creating a project from scratch, it is called AppBeagleActivity
.
val intent = this.newServerDrivenIntent<BeagleActivity>(ScreenRequest("/screen"))
startActivity(intent)
To test the command above, the ScreenRequest
component requires an URL that brings the JSON with all the server-driven screen’s information that you want to display.
In this case, follow these steps:
Use the screen example on the link below that brings a JSON for a simple "\screen"
test. Just copy and paste it replacing the URL “/screen” .
https://run.mocky.io/v3/73322be2-96bf-467b-b6dc-e3fff179852c
See how the code ends up below.
val intent = this.newServerDrivenIntent<BeagleActivity>(ScreenRequest("https://run.mocky.io/v3/73322be2-96bf-467b-b6dc-e3fff179852c"))
startActivity(intent)
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.
You can also render an example screen. For that, you pass this same BeagleScreenViewController
initialization URL.
Now, run the application and see a defined screen in a remoted rendered URL in your local application.
Congratulations, you now displayed a full server-driven screen. 🎉
Now, it is possible to create screens with dynamic content and you can control in your backend.
To define where you should display a server-driven screen on Angular, you should use a component provided by the <beagle-remote-view>
library.
This component has other attributes that can be configured. However, in this implementation you will only use the path attribute
, described in the example below.
For more details on this component, check the following link Remote View.
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'
};
}
On the path
field, it should be the JSON’s path that will be associated with the baseUrl
defined on beagle.module.ts
.
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:
BeagleProvider
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;
On the path
field, it should be JSON’s path that will be associated with the baseUrl
defined on your service.
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"
)
}
}
The renderScreen()
method can also receive a fragment as a parameter following the example below:
renderScreen(fragment = yourFragment, 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)
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.