The list component

A vertical list of items. Each item can be clickable and link to another page.

Top-level parameters

name	type	description
class	TEXT	class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. Added in v0.18.0.
compact	BOOLEAN	Whether to display the list in a more compact format, allowing more items to be displayed on the screen.
empty_description	TEXT	Description to display if the list is empty.
empty_description_md	TEXT	Description to display if the list is empty, in Markdown format.
empty_link	URL	URL to which the user should be taken if they click on the empty list.
empty_title	TEXT	Title text to display if the list is empty.
id	TEXT	id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).
title	TEXT	Text header at the top of the list.
wrap	BOOLEAN	Wrap list items onto multiple lines if they are too long

Row-level parameters

name	required	type	description
title	REQUIRED	TEXT	Name of the list item, displayed prominently.
active		BOOLEAN	Whether this item in the list is considered "active". Active items are displayed more prominently.
class		TEXT	class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. Added in v0.18.0.
color		COLOR	The name of a color, to be displayed as a dot near the list item contents.
delete_link		URL	A page that will be loaded when the user clicks on the delete button for this specific item. The link will be submitted as a POST request.
description		TEXT	A description of the list item, displayed as greyed-out text.
description_md		TEXT	A description of the list item, displayed as greyed-out text, in Markdown format, allowing you to use rich text formatting, including bold and italic text.
edit_link		URL	A URL to which the user should be taken when they click on the "edit" icon. Does not show the icon when omitted.
icon		ICON	Name of an icon to display on the left side of the item.
id		TEXT	id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).
image_url		URL	The URL of a small image to display on the left side of the item.
link		URL	An URL to which the user should be taken when they click on the list item.
view_link		URL	A URL to which the user should be taken when they click on the "view" icon. Does not show the icon when omitted.

Example 1

A basic compact list

select 
    'list'                 as component,
    TRUE                   as compact,
    'SQLPage lists are...' as title;
select 
    'Beautiful' as title;
select 
    'Useful' as title;
select 
    'Versatile' as title;

Result

SQLPage lists are...

Beautiful

Useful

Versatile

Example 2

An empty list with a link to add an item

select 
    'list'              as component,
    'No items yet'      as empty_title,
    'This list is empty. Click here to create a new item !' as empty_description,
    'documentation.sql' as empty_link;

Result

No items yet

This list is empty. Click here to create a new item !

Example 3

A list with rich text descriptions

This example illustrates creating a nice list where each item has a title, a description, an image, and a link to another page.

Be careful, nested links are not supported. If you use the list's link property, then your markdown description_md should not contain any link.

select 
    'list' as component,
    TRUE   as wrap;
select 
    'SQL Websites' as title,
    '/favicon.ico' as image_url,
    'Write SQL, get a website. SQLPage is a **SQL**-based **site** generator for **PostgreSQL**, **MySQL**, **SQLite** and **SQL Server**.' as description_md,
    '/'            as link;
select 
    'SQL Forms'       as title,
    'https://upload.wikimedia.org/wikipedia/commons/b/b6/FileStack_retouched.jpg' as image_url,
    'Easily collect data **from users to your database** using the *form* component. Handle the data in SQL with `INSERT` or `UPDATE` queries.' as description_md,
    '?component=form' as link;
select 
    'SQL Maps'       as title,
    'https://upload.wikimedia.org/wikipedia/commons/1/15/Vatican_City_map_EN.png' as image_url,
    'Show database contents on a map using the *map* component. Works well with *PostGIS* and *SpatiaLite*.' as description_md,
    '?component=map' as link;
select 
    'Advanced features' as title,
    'settings'          as icon,
    '[Authenticate users](?component=authentication), [edit data](?component=form), [generate an API](?component=json), [maintain your database schema](/your-first-sql-website/migrations.sql), and more.' as description_md;

Result

SQL Websites

Write SQL, get a website. SQLPage is a SQL-based site generator for PostgreSQL, MySQL, SQLite and SQL Server.

SQL Forms

Easily collect data from users to your database using the form component. Handle the data in SQL with INSERT or UPDATE queries.

SQL Maps

Show database contents on a map using the map component. Works well with PostGIS and SpatiaLite.

Advanced features

Authenticate users, edit data, generate an API, maintain your database schema, and more.

Example 4

A beautiful list with bells and whistles.

select 
    'list'                 as component,
    'Top SQLPage features' as title,
    TRUE                   as compact;
select 
    'Authentication'            as title,
    '?component=authentication' as link,
    'Authenticate users with a login form or HTTP basic authentication' as description,
    'red'                       as color,
    'lock'                      as icon,
    TRUE                        as active,
    '?component=authentication#view' as view_link;
select 
    'Editing data'           as title,
    '?component=form'        as link,
    'SQLPage makes it easy to UPDATE, INSERT and DELETE data in your database tables' as description,
    'blue'                   as color,
    'database'               as icon,
    '?component=form#edit'   as edit_link,
    '?component=form#delete' as delete_link;
select 
    'API'                    as title,
    '?component=json'        as link,
    'Generate a REST API from a single SQL query to connect with other applications and services' as description,
    'green'                  as color,
    'plug-connected'         as icon,
    '?component=json#edit'   as edit_link,
    '?component=json#delete' as delete_link;