Custom HTML Components

The Chinook Demo shows an example of overriding its existing /modules/locode/components/Welcome.mjs component in order to render its custom Home page.


Which in addition to using built-in Locode functionality, also makes use of your Apps Typed DTOs directly from the ES6 Module DTO endpoint at /types/mjs, e.g:

import { QueryInvoices } from "/types/mjs"

This results in providing an end-to-end typed dev UX for creating custom components that call our App's APIs as done in:

import { inject, ref, onMounted, computed } from "vue"
import { QueryInvoices } from "/types/mjs"

export const Welcome = {
    <div class="pl-4">
        <h1 class="text-3xl">
            Welcome to Chinook Locode
        <div v-if="lastOrders.length" class="mt-8">
            <h3 class="text-xl mb-4">Here are your last {‎{lastOrders.length}‎} orders:</h3>
            <DataGrid class="max-w-screen-md" type="Invoices" :items="lastOrders" tableStyle="uppercaseHeadings" />
    setup() {
        const client = inject('client')
        const api = ref()
        const lastOrders = computed(() => api.value?.response?.results || [])
        onMounted(async () => {
            api.value = await client.api(new QueryInvoices({ 
            }), { jsconfig: 'edv' })
        return { lastOrders }

Which uses the DataGrid component to render its custom Home page:

That makes use of the Declarative UI Attributes in its Invoices data model to render a formatted currency Total and a direct link to the Customer that the invoice was for:

[Icon(Svg = Icons.Invoices)]
public class Invoices
    public long InvoiceId { get; set; }

    [Ref(Model = nameof(Customers), RefId = nameof(CustomerId), RefLabel = nameof(Customers.DisplayName))]
    public long CustomerId { get; set; }
    public DateTime InvoiceDate { get; set; }
    public decimal Total { get; set; }
    public string BillingAddress { get; set; }
    public string BillingCity { get; set; }
    public string BillingState { get; set; }
    public string BillingCountry { get; set; }
    public string BillingPostalCode { get; set; }