Dashboard Layout Panel content is not showing up

[Nikunj Panchal]

Hello,

I am using Dashboard layout for my home page. I added a portlet on page load which is not showing up the content when page loads. 

However I have a add button which add the portlet dynamically. I can able to see the content for this portlet but I cannot see content for portlet which added on page load.

Please help me and let me know any question you may have.

Thanks,

Nikunj

Attachment: index_276c4afe.rar

[Ashokkumar Balasubramanian]

Hi Nikunj Panchal, 

 

We have checked your query and tried to reproduce the reported case with creating simple sample with react quick start application and online editor. But unfortunately, your reported issue is reproduced in react quick start application but not reproduced when deploying the sample in online editors. By default, the component will work in your tried approach. 

  

However, we are ensuring why the component behavior was not working when compared with online editors. Also, we need a timeline to validate this issue and update the further status within two business days. 

  

For your reference, we have prepared the sample with content updated through method call in below link. 

 

https://stackblitz.com/edit/react-ts-whgo5t?file=index.tsx 

 

Please let us know, if you have any concern on this. 

 

Regards, 

Ashokkumar B. 

[Nikunj Panchal]

Hello Ashokkumar,

Thanks for your quick reply.

I go through the sample that you provided. I see that you inherit content0 method from JSX.Element under the file with TSX extension. This works well.

I have also fixed with the below approach with JSX extension:

 

componentDidMount() {

setTimeout(() => {

this.rendereComplete();

});

}

rendereComplete() {

console.log('rendereComplete');

debugger;

// eslint-disable-next-line array-callback-return

this.defaultportlets.map((portlet) => {

this.scDashbard.addPanel(portlet);

});

}

[Ashokkumar Balasubramanian]

Hi Nikunj Panchal, 

 

Most Welcome. 

 

Please let us know, if you require any further assistance. 

 

Regards, 

Ashokkumar B. 

[Nikunj Panchal]

Hello,

I am trying to load dynamic content on panel on the dashboard layout. I can get the content but while loading content, I would want to show spinner.

How can I achieve this?

Thank you,

Nikunj

[Narayanasamy Panneer Selvam]

Hi Nikunj, 

 

Thanks for the further update. 

 

We have checked your query “how to add spinner while dashboard layout content loaded”. To achieve this, you have to create a spinner element through dashboard layout’s created event. Now spinner element is ready to show during dashboard layout content change, you need to call showSpinner method on dashboard layout content change. 

Refer the below code snippet to show spinner. 

changeContent() { 

    // Show the Spinner element 

    showSpinner(document.getElementById("layout_0")); 

    // Change the content of dashboard layout 

    let panel: any = { id:"layout_0", content:this.lineTemplate, header:"<div>Column chart</div>"  }; 

    this.dashboardObj.updatePanel(panel); 

    setTimeout(function(e) { 

      // Hide the spinner element 

      hideSpinner(document.getElementById("layout_0")); 

    },1000) 

  } 

 

 

We have prepared a simple sample to meet your requirement. Spinner will show on button click, when once the dashboard layout content has changed.  

Demo sample: https://stackblitz.com/edit/react-ts-a1ze5h?file=index.tsx 

 

 

Regards,  

Narayanasamy P.