How to make the Dashboard Page Responsive and page width should adjust when zoom-in or zoom-out

prabhanjan shared this question 5 months ago
Completed

Dear Yellow Fin Team,

We have integrated the JsAPI to load dashboard using React JS. Request you to provide us with a solution to make the Yellow fin Dashboards Page Responsive.

When we resize the browser window its not adjusting the width and height based on the screen size.



Regards

Prabhanjan

Replies (23)

photo
1

Hello Prabhanjan,

Thanks for reaching out to Yellowfin Support. Allow me some time to look into this request, I'll investigate this issue internally and get back to you with my findings.


Thanks & Regards,

Priya.

photo
1

Hello Prabhanjan,

Could you please provide the following information to investigate further on this:

  1. Could you please tell us which version you are using right now?
  2. Could you please send us a snapshot or a video so we can look into this further?

Thanks & Regards,

Priya.

photo
1

Hello Prabhanjan,

I hope you are doing well.

As we are investigating this issue, Could you please help me with the following details so that I can replicate this in my local Environment and share my findings!

Thanks,

Priya.

photo
1

Hi Priya,

we are using yellowfin Version:9.8.2.2

As it's challenging to replicate the issue locally due to Yellowfin being integrated with another server for snapshots or videos, I propose having a discussion call. During the call, I can provide a visual demonstration of the issue we are facing. If this suits you, please let me know your availability and preferred platform for the call.

photo
1

Hello Prabhanjan,

Sure I am happy to jump on a call to see the actual issue.
I am usually available between 6:00 am-3 pm IST, Please let me know your available time so that I will schedule a meeting to discuss this further.

Thanks,

Priya.

photo
1

Hello Priya,

Can we have call today @12:45 PM IST.

photo
1

Hello Prabhanjan,

Is this possible to postpone this meeting to 1 PM IST. Please let me know your thoughts on this so that I can schedule a meeting to discuss this further.


Thanks,

Priya.


photo
1

Sure Priya we can have call @1:00 PM IST, Please schedule and share the invite.

photo
1

Hello Prabhanjan,


I've scheduled this meeting at 1:00pm IST Today. Please use this link to join.

Let me know if you need any changes, Happy to help you further.

Thanks,

Priya.

photo
1

Hello Prabhanjan,

It was nice talking to you on call! I just wanted to confirm the JS API that integrated one suggested/ available in Yellowfin or that API got externally.

Thanks,

Priya.

photo
1

Hello Prabhanjan,

As we have tested this locally using the embedded link this was working fine for us could you please provide your code so that we may able to investigate further.

Please revert back if you have any query further we are happy to help you.

Thanks,

Priya.

photo
1

Hello Priya,

Here I am sharing code snippet which used to call the dashboard loader using REACT JS.

JSAPI we are rendering from the index.html file script directly to this code

function Dashboard() {

useEffect(() => {

fetchUserInfo()

console.log('set dashboard')

}, [])

//Function to load the dashboard

async function fetchUserInfo() {

try {

const { success, data }: any = await userServer.get<ServerData>('/dashboardSession') // here we will be calling API to get security token

if (success) {

if (data.dashboradInfo) {

// FUNCTION FOR DASHBOARD CONTENT

window.yellowfin.init().then(() => {

yellowfin

.newSession(data.dashboradInfo.securityToken, data.dashboradInfo.orgCode)

.then(res => {

yellowfin.showLoginPrompt = false

yellowfin

.loadDashboard({

dashboardUUID: dashboardUUID,

filterValues: filterId,

element: document.querySelector('#myDashDiv'),

showToolbar: false

})

.then(response => {

console.log('inside promise of loadDashboard() ' + response)

})

})

.catch(err => console.log('new session', err))

})

}

}

} catch (e) {

history.replace('/login')

}

}

return <div id="myDashDiv"></div>

}



this is whole function which we using

photo
1

Hello Priya,


Can you please provide any suggestion regarding the issue

photo
1

Hello Prabhanjan, Good Day!

Thank you for providing the API information, I'm currently validating this request with my wider team! Once I receive a response from the Wider team, I will post an update.

photo
1

Hello Priya,

For you reference i am attaching the code which is availble inside the JSAPI .

photo
1

Hello Priya,

can you please provide me any updates regarding the issue.

photo
1

Hello Prabhanjan,

Hope you are doing well.

In regards to your query about resizing the dashboard according to the browser window, the change you're looking for can be made in the "myDashDiv" in your code.

However, this is something that requires assistance from your developer and unfortunately, we are not able to provide support on this issue.

Please feel free to contact your developer, they should be able to help you with this.

Let me know if you have any other questions or concerns.

Thanks,

Priya.

photo
1

Hello Prabhanjan,

I hope you are doing well.

I just want to touch base to see if you had a chance to read through my response. If you can get back to me that would be great.

Thanks,

Priya.

photo
1

Hello Priya,

Yes, Got it. I will check with the developer regarding the code changes.

Thanks,

Prabhanjan.

photo
1

Hello Prabhanjan,

I hope you are doing well.

I am writing to follow up on our previous communication and check if there is anything else you need assistance with.

Please feel free to reply to this message if you have any further questions or concerns, and I will be more than happy to help you. In case there are no more questions, kindly let me know and I will proceed to close this case.

Thanks!

Priya.

photo
1

Hello Prabhanjan,

I hope you are doing well.

I just want to touch base to see if you had a chance to read through my response. If you can get back to me that would be great.

Thanks,

Priya.


photo
1

Hello Priya,

Thank you for the support, I will check with our team for code changes.

You can close the ticket for now.


Thanks,

Prabhanjan

photo
1

Hello Prabhanjan, Good Day!

Thank you for confirmation. I will now mark this case as completed. If you have any further questions or concerns, please don't hesitate to contact us. We would be more than happy to assist you.

Have a great rest of your day!

Leave a Comment
 
Attach a file