Loading data and displaying in uui-table

Questions
1

Hi,

I am loading data using a Async fetch, I have added a loading bar to the page that displays when the load request go to my custome controller and that works and I am able to use fetch to get the data I need.

Here my Javascript as it stands at the moment.

import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
import { UMB_NOTIFICATION_CONTEXT } from "@umbraco-cms/backoffice/notification";
import { UMB_AUTH_CONTEXT } from '@umbraco-cms/backoffice/auth';
import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document';

const template = document.createElement("template");
template.innerHTML = `
  <style>
    :host {
      padding: 20px;
      display: block;
      box-sizing: border-box;
    }
  </style>

  <uui-box>
    <h1>Content Needing Attention</h1>
  </uui-box>
  <br/><br/>
  <!--Table-->
  <uui-box>
  <!--Loader-->
  <div id="loader">
  <uui-loader-bar style="color: #006eff"></uui-loader-bar>
  </div>
  <div id="DisplayTable">
  <uui-table id="pages">
				<uui-table-row>
					<uui-table-head-cell>Id</uui-table-head-cell>
					<uui-table-head-cell>Name</uui-table-head-cell>
					<uui-table-head-cell>Published</uui-table-head-cell>
                    <uui-table-head-cell>Edited</uui-table-head-cell>
					<uui-table-head-cell>Content</uui-table-head-cell>
					<uui-table-head-cell>Update</uui-table-head-cell>
				</uui-table-row>
				<!--Content here-->
			</uui-table>
            </div>
</uui-box>
`;

export default class MyDashboardElement extends UmbElementMixin(HTMLElement) {
    #notificationContext;
    #workspaceContext;
    #authContext;

    constructor() {
        super();

        console.log("Working.......");
        this.attachShadow({ mode: "open" });

        this.shadowRoot.appendChild(template.content.cloneNode(true));

        var table = this.shadowRoot.getElementById("DisplayTable");
        var loader = this.shadowRoot.getElementById("loader");
        console.log(table);
        table.style.display = "none";
        loader.style.display = "block";

        this.consumeContext(UMB_NOTIFICATION_CONTEXT, (instance) => {
            this.#notificationContext = instance;
        });

        this.consumeContext(UMB_AUTH_CONTEXT, (_auth) => {
            console.log("Test Cont!!");
            if (_auth) {
                console.log("I've got the document workspace context: ", _auth);
                loadData(_auth, table, loader);
            } else {
                console.log("The document workspace context is gone, I will make sure my code disassembles properly.")
            }
        });

       
         /*

        this.shadowRoot
            .getElementById("clickMe")
            .addEventListener("click", this.onClick.bind(this));
        
        
        
        console.log(this);
        */
    }

    /*
    onClick = () => {
        this.#notificationContext?.peek("positive", {
            data: { headline: "Hello" },
        });
    };
    */
}

//Update the table here!
async function displayTable(data, table, loader) {
    console.log("Loaded Data:",data);
    if (!data) return;

    //console.log(data[0].id);



    table.style.display = "block";
    loader.style.display = "none";
}


//Load data here!
async function loadData(_auth, table, loader) {
    console.log("Getting Header!");
    const TOKEN = await _auth?.getLatestToken();
    console.log("Header Got!!");
    const response = await fetch('/umbraco/management/api/v1/my/item', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + TOKEN,
            'credentials': 'include'
        }
    });

    if (!response.ok) {
        throw new Error(`HTTP error! ${response.status}`);
    } else {
        const data = await response.json();
        displayTable(data, table, loader);
    }
}

//Build the dashboard here!
customElements.define("scheduled-extension", MyDashboardElement);



I can't work out how to get my loaded data to display in my table.
2

Hi @darrenhunterEmerald

You should be able to follow the example here:

You need to render the contents of the table.

Justin

3

Hi,

I have managed to implement my own version using that, the problem was that data was been loaded before the table.

I got it working now.

I just need to add pagination.

1 Like
4

Would you be able to share some examples in case anyone else has the same need and find this post?