Introduction
If you have Views already configured in your Latitude project, you can embed them directly in your React app using theLatitudeEmbed
component.
Embedding a view
Once the package is installed, you can now import theLatitudeEmbed
component and use it anywhere within your React app. To do that, you need to pass the URL of the view you want to embed.
View parameters
Latitude Views use internal global parameters to manage the state of the view. To learn more about parameters, check the Global Parameters section. Using theLatitudeEmbed
component, you can control the parameters of the embedded view directly from your React app.
Initial parameters
You can specify the initial parameters of the view by passing them asparams
to the LatitudeEmbed
component.
changeEmbedParams
method provided by the package.
Updating parameters dynamically
You can update the parameters of the embedded view dynamically by calling thechangeEmbedParams
method and passing the new parameters.
Listening to parameter changes
Latitude Views can also contain input components that allow users to modify parameters. You can listen to parameter changes in the embedded view and update your React app accordingly by using theonParamsChanged
event.
Updating query results
You can update the results of queries displayed in the embedded view by calling therunEmbedViewQuery
method and passing the name of the query.
Dispatching custom events
For an even more interactive experience, you can dispatch custom events from your React app to the embedded view. To do this, you first need to send the event from your React app using thetriggerCustomEvent
method.
onCustomEvent
event available in the @latitude-data/embedding
package, which is included in every Latitude app.
Your Latitude view
Example
We have an example application. You can check the source code if you get lost in the process. In Embedding/index.tsx you can see all the options you can pass to the<LatitudeEmbed />
component.
Experiment by modifying the field within YOUR REACT APP
and observe the changes in the Latitude app. Next, adjust the same field within the LATITUDE IFRAME
and watch how the React app responds. To execute all queries in the example, click the Run
button.
And lastly Pick your character
and see how Latitude app shows your Star Wars character. May the force be with you!