[Feature]: Access to the window object for js in apps

[japrogramer]

Is there an existing issue for this?

• [X] I have searched the existing issues

Summary

I need access to the window object from within the app widgets or js function calls in appsmith.

Why should this be worked on?

There are features like retrieving the current path and accessing object properties stored in the window object.

Front conversations

[billyrudi]

yes, this function is very usefull

[rk173238]

I have created a table component in appsmith which gets data from an api. and using it to my react application as iframe.

I have some credential stored in localStorage (outside of appsmith scope), as session expires the api return 403. now i want to clear local storage and redirect it to login page ( localStorage.clear(), window.location.href = "/").

How can i access the localStorage and window object of the browser from appsmith code.

[Nikhil-Nandagopal]

@rk173238 you should be able to do this by handling the 403 as {{ API1.run().catch(() => { if (API1.responseMeta.statusCode === 403) { storeValue('token', null); navigateTo('loginPage'); } }) }}

[rk173238]

@rk173238 you should be able to do this by handling the 403 as {{ API1.run().catch(() => { if (API1.responseMeta.statusCode === 403) { storeValue('token', null); navigateTo('loginPage'); } }) }}

LoginPage is not in scope of appsmith. loginPage is a react Component outside of appsmith frame.

I use appsmith to make different individual component and integrate it with a webapp using iframe. <iframe src = {appsmith sharable link} />

if i can get a way to alter browser localstorage or window object, then i can use it to redirect to any page in the app.

[Nikhil-Nandagopal]

@rk173238 the iframe cannot control the parent window location AFAIK. I think what you are looking for is a way to communicate with the parent window which is this issue here https://github.com/appsmithorg/appsmith/issues/7241

[billyrudi]

Hi do you have news on this?

[Nikhil-Nandagopal]

@billyrudi we're still undecided on this feature because it could potentially be a security concern. Is there a specific window property that you need to access?

[billyrudi]

Hi, yes: window.document and if possible to create functoins like: window.somefunctiom = function() { ..... }

[Nikhil-Nandagopal]

@billyrudi why are you trying to manipulate the document or create a global function?

[billyrudi]

create global function is usefull to use the same function in all project... manipulate document i usefull to add remove hide or change css attribute of a specific dom element...

[kripaVayana]

Need access to windows object , so that it enables us to download the files from a URL or anyother source

[Nikhil-Nandagopal]

@kripaVayana does the download function not work for you?

[kripaVayana]

Nope ..it didnt work for PDF files

Regards Kripa Vayana Network - Connecting Enterprises

On Wed, Jun 15, 2022 at 7:05 PM Nikhil Nandagopal @.***> wrote:

@kripaVayana https://github.com/kripaVayana does the download function not work for you?

— Reply to this email directly, view it on GitHub https://github.com/appsmithorg/appsmith/issues/9978#issuecomment-1156482241, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXYKVX3D4CIIMRVHNOBQPU3VPHLZFANCNFSM5KWDYZEA . You are receiving this because you were mentioned.Message ID: @.***>

[Nikhil-Nandagopal]

@kripaVayana could you share an example file URL that did not work?

[kripaVayana]

The Usecase is as follows I want to download the form data as pdf file , I directly tried to do on the Button click using the download function where i gave the filename as test.pdf and selected nothing in file type. But it doesn't work throws error.

I got a solution from appsmith to use apitemplate.io , to generate PDf. the PDF got generated but I want to download it. The API response the PDF file URL (https://pub-cdn.apitemplate.io/2022/06/4c61414f-47d2-4035-ae2b-d35fc428581f.pdf). Tried using JSObject to write the code to download the file from URL . but the Windows and document object doesn't work in JSObject

[cripsisxyz]

Hi! any update on this ? Can I access the window object? I need to interact with an extension installed on the browser and, AFAIK, is the only way to achieve this. Thankyou

EDIT: for more details, the extension save objects in window.extensionname and I need to interact with this objects. Is there a way to interact with the window object?

[metjm]

I was asked to also add my use-case here, which I asked about in discord:

We'd like to use the window.close() function after a certain action is taken on an appsmith app.

The use-case is that this page is opened from another website, and it happens on a mobile device. So while the user could do it manually, doing that hundreds of times a day will get annoying.

Exposing the window object would solve that.

Edit: As a workaround, we now redirect to a static html page that does this for us. Works well enough

[marssantoso]

@kripaVayana does the download function not work for you?

Hi @Nikhil-Nandagopal, I'd like to add a use case on which the download function does not work. It's when used on an internal URL in which it's not using HTTPS. Opening the link directly works, but using the download function returns a file containing the URL instead, where using navigateTo doesn't work either and the page just refuses to open.

I was thinking of using the window.location directly but alas, window does not exists. Or is there any alternative I could use instead for my use case?

[bharath31]

Update: We have a deploy preview that exposes the window object. You can take it for a spin here- https://appsmith-iitiboch6-get-appsmith.vercel.app/.

Please test your use cases and share your feedback. This will help us fine-tune the product experience.

Note:

• You can access the window object using window. syntax. Please note that autocomplete results will not show up for the window object
• Logging window objects on the console might not work as expected
• Testing on incognito windows might not work as expected
• Please use the following credentials to sign in: Email: windowdemo@appsmith.com Password: windowdemo@appsmith
• Please create a new workspace to make sure all your testing is sandboxed

@metjm @marssantoso here's a demo of your use-cases: https://appsmith-iitiboch6-get-appsmith.vercel.app/app/window-playground/page1-63d0bfcfca68ea655d4a870a

[cptechie]

Update: We have a deploy preview that exposes the window object. You can take it for a spin here- https://appsmith-iitiboch6-get-appsmith.vercel.app/.

Please test your use cases and share your feedback. This will help us fine-tune the product experience.

Note:

• You can access the window object using window. syntax. Please note that autocomplete results will not show up for the window object
• Logging window objects on the console might not work as expected
• Testing on incognito windows might not work as expected
• Please use the following credentials to sign in: Email: windowdemo@appsmith.com Password: windowdemo@appsmith
• Please create a new workspace to make sure all your testing is sandboxed

@metjm @marssantoso here's a demo of your use-cases: https://appsmith-iitiboch6-get-appsmith.vercel.app/app/window-playground/page1-63d0bfcfca68ea655d4a870a

I tested the demo and this feature will also be useful for my use case. Is there a timeline for when this feature will be included in production?

[bharath31]

The Usecase is as follows I want to download the form data as pdf file , I directly tried to do on the Button click using the download function where i gave the filename as test.pdf and selected nothing in file type. But it doesn't work throws error.

I got a solution from appsmith to use apitemplate.io , to generate PDf. the PDF got generated but I want to download it. The API response the PDF file URL (https://pub-cdn.apitemplate.io/2022/06/4c61414f-47d2-4035-ae2b-d35fc428581f.pdf). Tried using JSObject to write the code to download the file from URL . but the Windows and document object doesn't work in JSObject

@kripaVayana this should now be simpler to implement with the recent launch of Custom JS Libraries. You could install jSPDF or any other PDF library of your choice to download form/table data as a PDF without having to make any API calls.

[5hanth]

need this for several browser extensions such as metamask, nos2x, alby that signs using private keys. Currently loading popular libraries such as web3.js fails due to missing window object that has window.ethereum from injected provider of browser extension.

[zjcdreamer]

Update: We have a deploy preview that exposes the window object. You can take it for a spin here- https://appsmith-iitiboch6-get-appsmith.vercel.app/.

Please test your use cases and share your feedback. This will help us fine-tune the product experience.

Note:

• You can access the window object using window. syntax. Please note that autocomplete results will not show up for the window object
• Logging window objects on the console might not work as expected
• Testing on incognito windows might not work as expected
• Please use the following credentials to sign in: Email: windowdemo@appsmith.com Password: windowdemo@appsmith
• Please create a new workspace to make sure all your testing is sandboxed

@metjm @marssantoso here's a demo of your use-cases: https://appsmith-iitiboch6-get-appsmith.vercel.app/app/window-playground/page1-63d0bfcfca68ea655d4a870a

https://appsmith-iitiboch6-get-appsmith.vercel.app/ and https://appsmith-iitiboch6-get-appsmith.vercel.app/app/window-playground/page1-63d0bfcfca68ea655d4a870a don't work.

[zjcdreamer]

I want to set some query conditions, and then click a button to query api.Then use the browser download function to download the data in excel format to the local.Now, i use outputstream on backend to return data.But, i cannot open a window to download excel by brower.Can you help me with this problem.Thx!

[japrogramer]

Update: We have a deploy preview that exposes the window object. You can take it for a spin here- https://appsmith-iitiboch6-get-appsmith.vercel.app/.

Please test your use cases and share your feedback. This will help us fine-tune the product experience.

Note:

• You can access the window object using window. syntax. Please note that autocomplete results will not show up for the window object
• Logging window objects on the console might not work as expected
• Testing on incognito windows might not work as expected
• Please use the following credentials to sign in: Email: windowdemo@appsmith.com Password: windowdemo@appsmith
• Please create a new workspace to make sure all your testing is sandboxed

@metjm @marssantoso here's a demo of your use-cases: https://appsmith-iitiboch6-get-appsmith.vercel.app/app/window-playground/page1-63d0bfcfca68ea655d4a870a

@bharath31 Can I have a patch file for this demo ? or is it on a branch?

update: nvm found the branch https://github.com/appsmithorg/appsmith/tree/poc/window-access

[bharath31]

The Usecase is as follows I want to download the form data as pdf file , I directly tried to do on the Button click using the download function where i gave the filename as test.pdf and selected nothing in file type. But it doesn't work throws error.

I got a solution from appsmith to use apitemplate.io , to generate PDf. the PDF got generated but I want to download it. The API response the PDF file URL (https://pub-cdn.apitemplate.io/2022/06/4c61414f-47d2-4035-ae2b-d35fc428581f.pdf). Tried using JSObject to write the code to download the file from URL . but the Windows and document object doesn't work in JSObject

@kripaVayana This is possible using the jsPDF library. You can install it from the Libraries section on the left pane. Post installation, create a JSObject function that generates a PDF document using form data and execute the function on button click. eg:

async downloadForm () {
    const doc = new jspdf.jsPDF()
    doc.text(20, 20, 'Form Data');
    doc.text(20, 40, JSON.stringify(Form1.data));
    await download(doc.output(), "form.pdf")
}

[GreenFlux]

This limitation is blocking lots of use cases involving PDFs, charts, printing, etc. Window access comes up often in Discord, either directly, or as a related use case that turns out to be blocked. https://discord.com/channels/725602949748752515/1237319596524961832 https://discord.com/channels/725602949748752515/1081184875408801894/1081381594889211984 https://discord.com/channels/725602949748752515/1079334236663857162/1083885860837134426 https://discord.com/channels/725602949748752515/1200114774596395079/1200114774596395079 https://discord.com/channels/725602949748752515/1072260382254710805/1089386903947718727 cc @Nikhil-Nandagopal

[AKRFranko]

I have a use case: Your system doesnt support libraries like jspdf-autotable (it only works in edit mode, stops working when i deploy) and thus allowing us access to window object can allow us to fix these things and move forward with the tasks WE have to do to get our jobs done.

[Nikhil-Nandagopal]

@AKRFranko if it works in edit mode it should work in view mode as well. Please raise a bug for that issue