ListRenderer

> .content {
    padding: 10px;
}

In order to get syntax highlighting working here, it's recommended installing an editor extension such as es6-string-html VSCode extension

If multiColumns is false

There is only one column and the template is used to render the entire row.

This is the HTML template that will be used to render the note list item. This is a Mustache template and it will receive the variable you return from onRenderNote as tags. For example, if you return a property named formattedDate from onRenderNote, you can insert it in the template using Created date: {{formattedDate}}

If multiColumns is true

Since there is multiple columns, this template will be used to render each note property within the row. For example if the current columns are the Updated and Title properties, this template will be called once to render the updated time and a second time to render the title. To display the current property, the generic value property is provided - it will be replaced at runtime by the actual note property. To render something different depending on the note property, use itemValueTemplate. A minimal example would be <span>{{value}}</span> which will simply render the current property inside a span tag.

In order to get syntax highlighting working here, it's recommended installing an editor extension such as es6-string-html VSCode extension

Default property rendering

Certain properties are automatically rendered once inserted in the Mustache template. Those are in particular all the date-related fields, such as note.user_updated_time or note.todo_completed. Internally, those are timestamps in milliseconds, however when rendered we display them as date/time strings using the user's preferred time format. Another notable auto-rendered property is note.title which is going to include additional HTML, such as the search markers.

If you do not want this default rendering behaviour, for example if you want to display the raw timestamps in milliseconds, you can simply return custom properties from onRenderNote(). For example:

onRenderNote: async (props: any) => {
    return {
        ...props,
        // Return the property under a different name
        updatedTimeMs: props.note.user_updated_time,
    }
},

itemTemplate: // html
    `
    <div>
        Raw timestamp: {{updatedTimeMs}} <!-- This is **not** auto-rendered ->
        Formatted time: {{note.user_updated_time}} <!-- This is -->
    </div>
`,

See [https://github.com/laurent22/joplin/blob/dev/packages/lib/services/noteList/renderViewProps.ts](renderViewProps.ts) for the list of properties that have a default rendering.

This is a map of actual dependencies to templates - you only need to return something if the default, as specified in template, is not enough.

Again you need to return a Mustache template and it will be combined with the template property to create the final template. For example if you return a property named formattedDate from onRenderNote, you can insert it in the template using {{formattedDate}}. This string will replace {{value}} in the template property.

So if the template property is set to <span>{{value}}</span>, the final template will be <span>{{formattedDate}}</span>.

The property would be set as so:

itemValueTemplates: {
    'note.user_updated_time': '{{formattedDate}}',
}

You can inspect event.elementId to know which element had some changes, and event.value to know the new value. event.noteId also tells you what note is affected, so that you can potentially apply changes to it.

You specify the element ID, by setting a data-id attribute on the input.

For example, if you have such a template:

<div>
    <input type="text" value="{{note.title}}" data-id="noteTitleInput"/>
</div>

The event handler will receive an event with elementId set to noteTitleInput.

Default event handlers

Currently one click event is automatically handled:

If there is a checkbox with a data-id="todo-checkbox" attribute is present, it is going to automatically toggle the note to-do "completed" status.

For example this is what is used in the default list renderer:

<input data-id="todo-checkbox" type="checkbox" {{#note.todo_completed}}checked="checked"{{/note.todo_completed}}>

dependencies: [
    'note.title',
    'note.created_time',
],

itemTemplate: // html
    `
    <div>
        Title: {{note.title}}<br/>
        Date: {{formattedDate}}
    </div>
`,

onRenderNote: async (props: any) => {
    const formattedDate = dayjs(props.note.created_time).format();
    return {
        // Also return the props, so that note.title is available from the
        // template
        ...props,
        formattedDate,
    }
},