Skip to main content

Refine

info

You can enable the UI with jinjat serve --refine command. It's not enabled by default.

Jinjat generates user interfaces from your dbt exposures with Refine, which is a Headless React Framework to build web applications. We support the following exposure types at the moment:

application

Jinjat generates CRUD application from your dbt resources.

exposures:
- name: customer_crud
type: application
owner:
name: Burak
email: [email protected]
meta:
jinjat:
refine:
menu_icon: AutoAwesome
actions:
delete: _delete_customers
resources:
create: _create_customers
list: _list_customers
show: _get_customer
edit: _patch_customers
tip

You can generate the scaffolding with jinjat generate refine_app --args "{to: ref('customers'), name: customers}". Learn more about how it works in Github.

analysis

Your OpenAPI definition request and response JSON Schema definitions are rendered with JsonForms automatically. When the user submits the form, we render a table from the query result of your dbt analysis run. You can customize the user interface with custom components.

exposures:
- name: example_endpoint
type: analysis
meta:
jinjat:
refine:
button_label: Perform action
menu_icon: AutoAwesome

dashboard

info

Support for dashboard exposure is in progress.

Component support

Refine integration uses JsonForms with Material UI. All native JSON Schema types are mapped to Material UI Components. For example, string type is mapped to Text Field in MUI. In addition to the default components, Jinjat supports you plug in custom components as follows:

 columns:
- name: rating
description: Movie's IMDB rating
meta:
jinjat:
schema:
type: number
x-jsonforms:
renderer: rating

You can register custom components using refine.jsonforms property in jinjat_project.yml.

Developing

Jinjat's Refine integration is open-source. If you want to do further customization such as adding your own theme / design framework or custom React pages, you can fork jinjat-refine and build the project in [DBT_PROJECT_DIR]/static directory using npm run build. The command generates index.html and the javascript bundles and when you have index.html in your ./static directory, Jinjat will automatically render it when you start the server with jinjat serve.

You can also switch to different design components or plug-in your Vue/Angular components with JsonForms.

0