Skip to main content

Creating a dynamic Portal view

In this step, you will sync the finalized web apps with the Android project and dynamically display the proper web app based on web app metadata.

Exploring the problem​

The Jobsync superapp should consolidate multiple web experience into a single mobile experience. Up to this point, you have been using a sample web app to test and debug Portals against.

In a real world scenario, you may be tasked to implement Portals and develop communication hooks while web developers are in the process of building out the actual web experiences to present through Portals.

tip

Use the sample web app downloaded from the poc Portals CLI command to integrate and test Portals before syncing and testing web experiences provided by web developers.

The last task remaining before the Jobsync superapp is complete is to sync the individual web apps and dynamically determine which one should be displayed within WebAppScreen at any given moment.

Syncing the web apps​

Delete the sample web app downloaded from the Portals CLI, it is no longer needed:

terminal

_10
rm -rf portals-debug-app

Update /android/app/.portals.yaml to match the following code:

android/app/.portals.yaml

_10
sync:
_10
- file-path: ../../web/apps/expenses/dist
_10
directory-name: src/main/assets/portals/expenses
_10
- file-path: ../../web/apps/tasks/dist
_10
directory-name: src/main/assets/portals/tasks
_10
- file-path: ../../web/apps/time-tracking/dist
_10
directory-name: src/main/assets/portals/time_tracking

note

The monorepo contains the build outputs of all the web experiences to sync with Portals. In a typical development workflow, you would sync Live Updates pushed to Appflow.

Dynamically configuring a Portal​

Open portals/WebApps.kt in Android Studio and note the following code:

portals/WebApps.kt

_22
package io.ionic.cs.portals.jobsync.portals
_22
_22
import android.media.Image
_22
import io.ionic.cs.portals.jobsync.R
_22
import java.util.Locale
_22
WebAppMetadata("time_tracking", "Stay on schedule by tracking time spent.", R.drawable.time_tracking)

The list of features to display on the dashboard come from this list. When one of the features is selected, the metadata entry is passed to WebAppScreen, and the name property can be used to set the name property and compute the correct startDir when initializing the Portal.

Make the following changes to portals/WebAppScreen.kt:

portals/WebAppScreen.kt

_52
package io.ionic.cs.portals.jobsync.portals
_52
_52
import androidx.compose.foundation.layout.Arrangement
_52
import androidx.compose.foundation.layout.Column
_52
import androidx.compose.foundation.layout.fillMaxSize
_52
import androidx.compose.foundation.layout.padding
_52
import androidx.compose.material3.Scaffold
_52
import androidx.compose.runtime.Composable
_52
import androidx.compose.ui.Alignment
_52
.setStartDir("portals/${metadata.name}")

Build and run the Jobsync app and navigate to the dashboard view. Select a feature from the list, and the finalized web app will load within the PortalView.

Press the back arrow in the web app's header, and you'll be taken back to the dashboard view. The button publishes a message to the navigate:back and the subscriber previously added dismisses the view. Navigate to a different feature and observe a different web app load within a new Portal.

note

Due to the way initial context and the analytics plugin work for the purpose of this training, validating initial context and the analytics plugin requires inspecting network requests made within the Expenses web app.

Conclusion​

With the finalized web apps dynamically presenting through Portals, the Jobsync superapp is complete! In this training module, you learned how to create and dynamically present a web app through a Portal and exercised the various ways native mobile apps can communicate through a Portal. Furthermore, you used the Portals CLI to set up a development workflow to test and debug Portals communication without needing the finalized web artifacts.

You now have the tools in place to start integrating Portals into any Android app. Happy coding!! 🤓

Contents