Forge Custom UI Not Loading

Forge Forge UI Kit and Custom UI
, , , ,
1

Hello all. We are ver new to the Forge platform, developing a project for the upcoming CodeGaist 2021 hackathon.

We are trying to create a custom UI for our application. However, we are having problems getting the content to show up. I have included the code below.

import React, { useEffect, useState } from 'react';
import { invoke } from '@forge/bridge';

import ReactDOM from 'react-dom';
import '@atlaskit/css-reset';
import initialData from './initial-data';
import Column from './column';

function App() {
  const [data, setData] = useState(initialData);
  const cols = data.map(columnId => {
    const column = data.columns[columnId];
    const tasks = column.taskIds.map(taskId => data.tasks[taskId]);
    return <Column key={column.id} column={column} tasks={tasks} />
 })
  
  return (
      <ul>
        { cols }
      </ul>
    );
}

export default App;

However, when we deploy the application, the content of the app is blank. I have also included a screenshot of our output.

Screen Shot 2021-08-01 at 11.32.50 PM
Screen Shot 2021-08-01 at 11.32.50 PM866×448 6.64 KB

Would appreciate any help. Thanks in advance.

1 Like
2

Hello @RackshaAtlas

Please, I think you can simplify the data initially received (you can use useEffect to get the column data and use useState to set it).

For columns, data may have this structure.

{
    columns: [
       {
           column: column, 
           tasks: tasks
       }
    ]
}

then you can now map through the columns data to display what you wanna display.

columns.map((column) => (
    <Column key={column.id} column={column} tasks={tasks} />
))
1 Like