Custom HTML Components

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

Which in addition to using built-in Locode functionality, also makes use of the TypeScript DTOs of the Apps own APIs, generated by running:

$ npm run dtos

This provides the type definitions for all your APIs DTOs which makes use of the JavaScript Add ServiceStack Reference feature to preload your Apps DTO implementations, ready for usage in Locode Apps.

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

<script>
import { App, client } from "@servicestack/ui/locode"
import { QueryInvoices } from "dtos"

App.components({
    Welcome() {
        return {
            $template: '#welcome-template',
            lastOrders: [],
            mounted() {
                client.api(new QueryInvoices({ orderBy:'-InvoiceId', 
                    take:5, 
                    fields:'InvoiceId,CustomerId,InvoiceDate,Total,BillingCountry,BillingCity' 
                }), { jsconfig: 'edv' })
                    .then(api => {
                        if (api.succeeded) {
                            this.lastOrders = api.response.results
                        }
                    })
            }
        }
    }
})
</script>
<template id="welcome-template">
    <div class="pl-4" @vue:mounted="mounted">
        <h1 class="text-3xl">
            Welcome to Chinook Locode
        </h1>
        <div v-if="lastOrders.length" class="mt-8">
            <h3 class="text-xl mb-4">Here are your last {{lastOrders.length}} orders:</h3>
            <div class="max-w-screen-md" v-scope="PreviewObject({ val:() => lastOrders })"></div>
        </div>
    </div>
</template>

To render its custom Home page: