Large Screen Template Migration

Introduction #

This article explains how to convert existing static large screen templates into SmartChart-compatible dashboards. Two methods are supported: AI-assisted template generation and manual static template migration, suitable for developers with HTML/CSS/JS large screen foundations.

Use Cases #

Already have developed non-SmartChart static large screen templates
If you purchased Pro edition, contact customer service for 100+ static large screen templates
Have basic understanding of JS, CSS, and SmartChart usage
Business needs match a suitable template with little expected change

AI Template #

Prompt Reference #

You can generate HTML based on the template format, and fill the corresponding CSS, HTML, JS into the respective template areas.
Note: The template already includes jQuery and ECharts, no need to include them again. Use flex for layout.
Demo data should use 2D array format with headers
### Template content:
{% extends "echart/base.html" %}{% block head %}
<style>
Place styles here
</style>
{% endblock %}{% block body %}
<body>
Place HTML here
</body>
{% endblock %}{% block javascript %}
<script>
Place JS here
</script>
{% endblock %}{% block footer %}{% endblock %}
### My requirements:
$prompt

Migration Method #

Just create a lazy-load dataset, and replace the generated demo data with ds_refresh(dataset_index, filter_param, ’list')

Static Templates #

You can also use pre-developed static templates

Prepare the static large screen template, package CSS, img, JS and other files/folders
Open the static large screen template, usually index.html, right-click to view page source

Migration Steps #

Watch migration video first

Template Migration #

Create a new dashboard, open the template
Upload the packaged resource files in the template
Copy the head section content from the static page source to the corresponding position in the template
Copy the body section content from the static page source to the corresponding position in the template
Copy the script section content from the static page source to the corresponding position in the template
Remove jQuery and ECharts references from the script
Replace resource file path references
Gradually replace chart blocks in the body

Watching the video is recommended for the above process

Dataset and Chart Migration #

This process is the same as regular SmartChart chart development. Recommend studying Chapters 2/3
For template development operations, study Chapter 6 -> Low-code Development
Post-migration effect video