How do I edit and save content from a custom element?

Questions
,
1

Say I have a basic text field and a submit button, given a unique id for content, how would I update a value for that content? For example, this element would be on a dashboard, so there is no document workspace context I can consume.

I’ve looked into the contexts and repositories, but I’m not sure how to go about doing this.

This isn’t exactly what I want to do, but I think understanding this will help me solve my problem. Thank you!

import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
import { html } from "lit";
import { property, state } from "lit/decorators.js";

export class Test extends UmbLitElement {
    @state()
    private inputValue = '';

    @property()
    private contentUnique = '';

    private handleSubmit(e: SubmitEvent) {
        e.preventDefault();
        console.log('Somehow update content to have a new title value:', this.contentUnique, this.inputValue);
    }

    private handleInput(e: InputEvent) {
        this.inputValue = (e.target as HTMLInputElement).value;
    }
    
    render() {
        return html`
            <form @submit=${this.handleSubmit}>
                <input 
                    type="text"
                    .value=${this.inputValue}
                    @input=${this.handleInput}
                    placeholder="Enter text"
                />
                <button type="submit">Submit</button>
            </form>
        `;
    }
}
2

Hi William,

I think you need a public .value property for Umbraco to read (and write when initializing the component). And then you’ll need to dispatch a change event when you’re updating it manually.

You can read some documentation on this here: Creating a Property Editor | Umbraco CMS

/Chriztian

3

I’m not sure what you want to achieve here from a user standpoint? Can you give more explanation what your use case is? :slight_smile: That way it’s easier to help you come up with the correct solution.

I mean, you want to have a dashboard that can alter content of a certain node (which node?) based on the content of textbox?

4

For sure! I didn’t want to overexplain my issue, but I’ll try to describe it for more context. The website I’m creating has orders, and I display orders that have a status of “Awaiting Review” on a dashboard. Then I want backoffice users to be able to view those and change the status to “Confirmed” or “Cancelled” really quickly on the dashboard.

In the dashboard, I get the orders from UmbDocumentDetailRepository, filter them by status, and display them in a list. I want to have a select element next to each one allowing the user to change the status quickly and have it save and publish automatically when changed. However, using that repository, I’m not seeing an ability to save or publish an existing document.

Thank you for your help!

5

To be honest, I’m not sure if I would do this kind of ‘business logic’ in the frontend. I think I would just create an endpoint in the management api and handle this in (C#) code and perform any validation there as well.

Not saying that that is the correct or best course of action, but it’s what I would do :slight_smile: