Using Mosaic Frontend Samples Application
About
While Axinom Mosaic focuses on the development of backend applications, services and processes, ultimately the services provided by the backend are consumed by end-users through frontend applications. Axinom Mosaic is unopinionated about the frontend technologies, concepts or user experiences used to develop the end-user facing applications. Still, we developed a Frontend Samples application that demonstrates how a frontend can interact with Mosaic services. It is meant to showcase the capabilities of Mosaic and to provide a starting point for frontend developers but can also be used to test out your backend services without the need of an actual frontend.
The Frontend Samples application contains pre-defined scenarios for various interactions a frontend may want to implement. Each scenario contains code samples that demonstrates the usage of Mosaic service APIs and related libraries to achieve a certain goal.
A deployed version of the application can be found at https://mosaic-frontend-samples.axinom.net, and the full source code is available under an open-source license in GitHub: https://github.com/Axinom/mosaic-frontend-samples.
In case you are running customized versions of Mosaic services, having custom API signatures that are incompatible with the hosted frontend samples, you can always clone or fork the repository and adjust the code samples to your needs.
Getting Started
At this point if you do not yet have a Mosaic Environment, please head over to the Axinom Portal, to enroll for an evaluation account. Once the account is created, you will have access to the Mosaic Admin Portal, and your evaluation environment will be ready. If you already have access to a Mosaic Environment, you may continue further.
In order to use the application, you must first configure a Profile. The Profile will contain the prerequisites such as a connection
to a Mosaic Environment and Base URLs of different services which may be needed by the scenarios to run. When saved, the profiles will be persisted in the browser local-storage.
Create a new Profile of type "Production" and the Base URLs of the Managed Services will be automatically suggested. If you have the Mosaic Media Template running somewhere, its Base URLs can also be specified on the Profile. Note that these URLs will only be required for running scenarios that target them. Each scenario will indicate on the header what service it depends on, so you may configure only those services which are relevant for your purposes.
Enter the Tenant ID and Environment ID that belong to your Mosaic Environment.
You can find these UUIDs from the Administration Portal
The value for Application ID will be required to run any scenarios which have the User Service marked as a required service. Please
check the Configure Mosaic User Service section for more details.
Configure Mosaic User Service
Some scenarios will declare that the User Service is required to run them, for such cases you must configure the Mosaic User Service with
an Application (which will give you an Application ID) and assign one or more IDP Connections to that application.
Please checkout one of the following guides for more details:
Main Areas
The following screenshot lists the different areas of the Mosaic Frontend Samples application.
If you need to know exactly how the scenario operates and what are the different APIs that are invoked etc. you can open the source code for the specific scenario to see exactly this information.
Using Profile Variables
It is possible to define variables in your Profile with any value such that you can use these variables as placeholders when running scenarios. This can be helpful if you find yourself typing in the same value for the scenario inputs over & over again.
Also note that some of the scenarios themselves can define and update variables when they are run. These variables can also be used when filling input fields just like the custom defined variables. The user access-token is an example of such a variable that will be set by other scenarios. These automatically set variables will appear greyed out to the user to separate them from the custom defined variables.
Once the variables are defined, you can use them in a scenario simply by clicking an input field that supports variables, and picking a variable from the list.
