Skip to main content

Introduction

Welcome to the Atoti UI tutorial!

Learn by doing​

We are going to build a beautiful, interactive dashboard using Atoti and customize it using its JavaScript API!

In this tutorial we will:

  1. Install the Atoti UI Starter.
  2. Create a custom widget.
  3. Register our widget as a plugin, thereby extending Atoti UI.
  4. Build and attach a Fields tab so users can change what information our widget displays.
  5. Wire our widget so it can interact with other widgets on a dashboard.

What we are building​

So what will our dashboard do?

It's going to help make our human presence on Earth more sustainable using data!

Ok, ok… that might be a slight overstatement, but we will be building an interactive dashboard showing the recent impact of humans on our planet, using React and Atoti UI!

It will be based on this dataset from the Organisation for Economic Cooperation and Development (OECD).

Finished Product​

Sometimes its better to visualize where we are going before we set off.

Take a quick peek at the finished product.

Prerequisites​

In order to make the best of this tutorial, we recommend you have some notions of both atoti and React.

Ready to become an Atoti UI pro? Let's get to it!