Embed the Flexmonster UI

This tutorial describes how to start using the Flexmonster UI in your project.

Step 1. Get Flexmonster

There are several ways to include Flexmonster in your project:

Step 2. Embed the Flexmonster UI

Create a Flexmonster instance by calling the fm3.Controls.Flexmonster() method in JavaScript code or using the <fm-flexmonster> tag in your HTML:

Step 3. Connect the Flexmonster UI to the sample data source

In this step, we will connect Flexmonster UI to the sample data hosted on the Flexmonster server. If you do not have the server yet, install the Flexmonster server.

Step 3.1. Create a state object with connection parameters for the sample data source:

const state = {
  id: "fm-state",
  dataset: {
    dataSource: {
      url: "ws://localhost:9501/",
      name: "SampleData"
    }
  }
};

The url contains the server’s URL, and the name is the data source’s name. You can check out the data source name in the Admin Panel’s Data sources tab.

Step 3.2. Pass the state object to the Flexmonster instance, depending on how the instance is created:

Step 4. Run the application

Open your webpage in your browser to see Flexmonster with the data from the Flexmonster server.

Troubleshooting

If you run into any issues during the integration, visit our troubleshooting page.

Next step

• Connect to your data source