Link destination on text panels

jpueyo

Hi,

I'm designing a text panel which is basically a link to a Google form. I want it being opened on a web browser because panels are too small for that. However, when I use the tag target="_blank" in the text, it's not working. The link is opened inside the panel. Can this be done?

Thank you.

Hansje

Hello Joseph,

It is not possible to open a webbrowser from out a panel. What might work is to make a large panel and implement in this panel a web panel or text panel with an iframe.

Can you try this?

I hope this will work for you.

jpueyo

I already tried, but when the Google form is open in a panel, the user can't interact with it, it appears like a static image. Is that possible? I have activated the rights for Support if you want to have a look.

Thank you.

jpueyo

Hansje

Hello Josep,

Sorry I overlooked in your previous post that it is an form which needs to be interactive.

I think it is not possible to have an interactive page within a project.

Let me check with my colleagues next week. I will get back to you about this.

Hansje

Hi Josep,

It is possible to have an interactive page! The key is to make use of an web panel intead of a text panel. Also, sometimes you need to make sure you can scroll correctly (if needed), otherwise the page cannot be used as desired.

Maybe the tip from Godelief about using a web panel is interesting for you https://community.tygron.com/forum/discussion/321/web-panel-for-more-information/p1?

jpueyo

Hi,

I have to say that Google forms don't work with web panels. It works if I open it in web browser but don't inside Tygron.

Best wishes,

Hansje

I will ask my colleague to take a look in the project. I know you have changed the settings so we can entre teh project, but what is the name of your project?

jpueyo

Gi Ediblegame 1 0

The panel is already created with the Google form link set up.

Thank you!

Godelief

Hi @jpueyo,

Thanks for sharing the project.

I had a look into your project and you are right, it seems that it is not possible to fill in the Google Form in a web panel. Other forms do work.

We will look into this bug and let you know when there is an update. For now, there is no workaround but opening the Google Form in another browser.

jpueyo

What other forms work? Survey123 from ArcGIS works? I can use that or others instead of Google forms, I don't mind.

Thank you.

Godelief

Hi @jpueyo,

I meant other forms such as contact forms on a website that do work. I haven't yet tested any other survey tools. Maybe you can try it yourself and let us know if Survey123 works?

jpueyo

Survey123 from ArcGIS neither works.

I'll think about creating a web survey.

Thank you.

Godelief

Thanks for testing! When there is an update about this bug, we will let you know.

Hansje

Hello @jpueyo ,

I have some additional information about this topic from my colleague that I would like to share with you to give a little bit more context about why this may work or not:

Although we do support HTML5 in all our Panels, some more complex tools may not function in our environment in the same way as in common browsers. Google Forms is an example of very complex coding which has proven to be untested in our software. However, this does not preclude the use of forms in general. For example, the contact form at https://www.tygron.com/en/request_information/ is fully functional. Our recommendation for now would be to either explore alternative services providing forms, or to construct your own.

jpueyo

Hi!

I'm still struggling with web panels. I created a few and some websites work while others don't. I don't get what's the difference among them.

These works:

https://ediblecitygame.icradev.cat/ (PHP combined with Jquery and Vue and MySQL)

https://itlab.icra.cat/ (coded with Vue-cli interface and using axios to contact PHP API and SQLITE)

These don't work:

https://ediblesfl.icradev.cat/ (coded with Vue-cli interface and using axios to contant Express-js API and MySQL)

https://toolbox.edicitnet.com/showEcsProfile-alone/432 (coded with Vue-cli interface and using axios to contant Express-js API and MySQL)

So, I guess that the problem is the Express API, because in the websites that don't work the problem is that they don't load the data. Another problem is that alerts coded in javascript either don't work, that's a problem when using forms because you need to warn the user when some field is missing or incorrect, for instance.

I don't expect solutions, I just expect confirmation that my guess is right.

Thanks,

JPR

RudolfNL

Hi @jpueyo,

Although web panels and text panels are effectively fully HTML5 compliant content-wise, loading in external libraries (like vue and axios. I'm not familiar with express-js) may not work as expected due to the underlying way the web content is injected. This needn't be a universal problem (we've used axios succesfully for an internal project in the past, and as stated in an earlier post our tygron.com contact form functions correctly in such a setup as well), but without diving into the specific of what any given library does on a low-level it's not possible to give any guarantees for any specific library. Loading in a variety of librarties is also not something we have explicitly tested so far.

We'll be looking into this functionality in the summer to see if we can improve this behavior.

For communicating information (including warnings/errors) back to the user, I'd like to suggest that instead of alerts (which require a level of modality which the panels in the platform cannot offer) another approach could be to display the errors on the form itself. The contact form indicated in the previous post exhibits this behavior as well; errors are shown underneath the input fields where they apply, as well as a final warning near the submit button.

Your guess that it's Express-js specifically, I can't confirm for sure, but can't exclude either. The slightly-broader view that something in the libraries is not loading or functioning as expected, is correct.

Kind regards,

Rudolf

jpueyo

Hi!

Thank you for your answer. I replaced the API by a raw PHP API and it still didn't working. So, then, I realize that the problem is not the library but when API is external (in another subdomain). So, I integrated the PHP API as a subfolder in the same project and it worked perfectly. I don't know if it would work with the Express API, anyway, it can't be integrated as a subfolder as easy as with php files.

And yes, I changed the alerts by text under the fields as you just suggested. It's a perfect solution.

Best!

JPR

RudolfNL

Hi @jpueyo,

Thank you very much for that extra detail because that actually gives a bit of extra insight of where the issue probably lies. If it's related to the domain the external the API is running on, it sounds like it may be a Same-Origin Policy issue. Knowing this helps us to improve this part of our software, and may help you and others to find more appropriate ways to exchange data with an external API.

Some resources to look into (for you, or for others running into the same issue) may be CORS (Cross-origin resource sharing, a set of headers to allow inter-domain communication), and JSONP (Json with padding, a method of exchanging data by formatting it as javascript).

Kind regards,

Rudolf