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?

5

Here is the code I have worked out so far it still a work in progress.

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';

var _data = "";
var pagingObject;
var _root;
var _authentication;

const template = document.createElement("template");

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

    constructor() {
        super();

        this.attachShadow({ mode: "open" });
        _root = this.shadowRoot;

       

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

      
        this.consumeContext(UMB_AUTH_CONTEXT, (_auth) => {
            if (_auth) {
                _authentication = _auth;
                displayHeader();
                displayPage();

                loadData(); 
            } 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" },
        });
    };
    */
}

function displayHeader() {

    template.innerHTML = `
  <style>
    :host {
      padding: 20px;
      display: block;
      box-sizing: border-box;
    }

    .centerLoader {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>

  <uui-box>
    <h1>Content Needing Attention</h1>
  </uui-box>
  <br/><br/>
  <div class="centerLoader" id="loader">
  <uui-loader style="color: color: #006eff"></uui-loader>
  </div>
  `;
}


function displayPage() {
    _root.appendChild(template.content.cloneNode(true));
}

function displayLoaderAndTable() {
    var table = _root.getElementById("DisplayTable");
    var loader = _root.getElementById("loader");
    table.style.display = "block";
    loader.style.display = "none";
}

//Load data here!
async function loadData() {
    console.log("Getting Header!");
    const TOKEN = await _authentication?.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 {
        console.log("Loading data....");
        const data = await response.json();
        console.log("Data loaded....");
        _data = data;

        displaypage();
        displayPage();
        displayLoaderAndTable();

        console.log("Loading data Completed....");
    }
}
function _render() {
    
    var returnvalue = "";

    for (let i = 0; i < _data.length; i++) {

        var id = _data[i].id;
        var name = _data[i].name;
        var published = _data[i].published;
        var edited = _data[i].edited;
        var contenttype = _data[i].contenttype;
        var update = _data[0].update;

        returnvalue = returnvalue + `
        <uui-table-row>
        <uui-table-cell>${id}</uui-table-cell>
        <uui-table-cell>${name}</uui-table-cell>
        <uui-table-cell>${published}</uui-table-cell>
         <uui-table-cell>${edited}</uui-table-cell>
        <uui-table-cell>${contenttype}</uui-table-cell>
        <uui-table-cell>${update}</uui-table-cell>
        </uui-table-row>
        `
    }

    return returnvalue;
}

function renderPagination() {
    var returnvalue = "";
  
   // returnvalue = returnvalue + `
   //
   // <div style="resize: horizontal; overflow: hidden; padding: 6px;">
   //     <uui-pagination total="25" current="1" id="pageing"></uui-pagination>
   // </div>
   // `
  
    return returnvalue;
}

function displaypage() {

    template.innerHTML =  `
  
  <!--Table-->
  <uui-box>  
  <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-->
                ${_render()} 
			</uui-table>
            </div>
</uui-box>

 ${renderPagination() } 


`;
}


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