# MicroMeta Dashboard Instructions

By [I'm Lucio](https://paragraph.com/@imlucio) · 2022-08-14

---

Dashboard Designer
------------------

how to make a dashboard using the designer...

* * *

1\. Overview
------------

### menu introduction

![](https://storage.googleapis.com/papyrus_images/f5ad682d28f32dda41a2d77a4c8c4dd97d5e44d8f28f4a8516073e2bbb464cc5.png)

![](https://storage.googleapis.com/papyrus_images/c141bb6e15a4c7ed3807812f81c91b3131536e1702673933e3d6d286a9a68e51.png)

![功能标注](https://storage.googleapis.com/papyrus_images/c4c812f8f9569abe62f4e85a86181b20a952af7730fa356a3674aee78d07eaca.png)

功能标注

2\. Element Type
----------------

设计器支持三类元素： `Layout Element` 、`Bacis Element` 、 `Data Element`

### 2.1 Layout Element

![](https://storage.googleapis.com/papyrus_images/f406b0323b07875b6948dd086e653adf9c6f886955c0db39c7812eef1b3c75ae.png)

### 2.2 Basic Element

![](https://storage.googleapis.com/papyrus_images/1770856095350cdfabe29c0f9f4c8820ccf2bc1ec7b12705c18770e66ca1d50e.png)

### 2.3 Data Element

![](https://storage.googleapis.com/papyrus_images/5daa7ef2704ecff28d95295dcf0b0366623a9f7c7bec2d9abfa2e36994a6b3bd.png)

3\. How To Use
--------------

### 3.1 Dashboard Template Structure

![](https://storage.googleapis.com/papyrus_images/a1547d01d1295a509256747d3fa1b737eadc628d423e0db21002a3deb1a90762.png)

如上图所示,设计仪表盘只需要简单的几个步骤:

*   选择合适的布局容器元素拖拽到编辑区
    
*   选择合适的基本元素到布局容器内
    
*   选择合适的数据元素到布局容器内.\[带有条件查询的数据元素,需要按提示填写必要的参数\]
    

### 3.2 Drag And Drop Positioning

无论哪种类型的元素，拖拽到编辑区时都需要放置在一定的位置。例如目标元素的下方或者右侧。

拖拽元素到编辑区时,当靠近目标元素时(放置在这个目标的内部或者下方)。发现目标元素的边框变为黄色。另外还有一条绿色的线跟随着拖拽元素，这条绿色的线代表着拖拽元素的实时位置。

示例:

![](https://storage.googleapis.com/papyrus_images/a9cdae48e2dddabbe2ef308d9bfd698a86a7365c83ec64d046ebcfb210c56cab.jpg)

拖拽位置总结:

*   目标元素的上方
    
*   目标元素的下方
    
*   目标元素的左侧
    
*   目标元素的右侧
    
*   目标元素的内部
    

### 3.3 Query Conditions

某些数据元素需要填写查询参数,才可以在模板加载的时候正常显示出数据。

**示例:**

![](https://storage.googleapis.com/papyrus_images/fd994d385bad0117d9ec9d26022f45f8bbde44b5ba083b50a3a024b225f9022d.png)

示例中,需要填写红色矩形框内的参数:

{ "address": "0x6b175474e89094c44da98b954eedeac495271d0f", "type": "token", "query":"holders", "period": "1d" }

*   `address: Token或者NFT的地址`
    
*   `type: 数据的类型,Token或者NFT`
    
*   `query:查询的类型,holders或者transaction`
    
*   `period:时间段,1d或者1w又或者1m,对应1天|周|月`
    

模板解析结果:

![](https://storage.googleapis.com/papyrus_images/4fc3679ff40d62e7eb1bf50097f5af416c050b9c75020a864f53c73586e178fc.png)

### 3.4 Query L1

拖放数据控件后，就会弹出设置查询条件的窗口

![](https://storage.googleapis.com/papyrus_images/6a776b6139f0f93ea78a45b652e8c3bfdf9a573a16653478d4df44d3812794e0.jpg)

填写对应的代币或者NFT数据，再填写对应时间范围，就可以生成对应数据。

4\. Save Dashboard
------------------

设计完Dashboard后，需要点击设计器顶部工具栏右侧的"云朵"图标(保存菜单)进行保存。

**输入一个Dashboard名称后，再点击对话框的Save就可以完成保存了。**

![](https://storage.googleapis.com/papyrus_images/df37ef9908c02a54ab2251d9991ce9f50a8211bd61ab9e3bcd7125e37557c484.png)

注意事项:

*   `设计器将会实时缓存编辑区的内容`
    
*   `即使在未保存的情况下,不小心关掉了浏览器,内容也不会丢失,再此进入设计器时自动显示上次编辑的内容。前提是未清空浏览器缓存的情况下。`
    

### **Custom Data Element**

自定义数据元素：允许用户访问系统内的所有数据,并通过SQL设计器，自行设计数据元素控件。

`Will be coming soon.`

[**Demo Video**](http://micrometa.club/assets/img/man/demo.mp4)

---

*Originally published on [I'm Lucio](https://paragraph.com/@imlucio/micrometa-dashboard-instructions)*