Custom Widget (iFrame)

General Tutorials
21

@Arantec Developer

To download this sample HTML file, click here (Right and click → Save as). → Not working.

22

Hello guys!

Is there any way to pass parameters to a custom widget using queryParams in the Dashboard URL? I saw that some queryParams are already passed using this method like “&edit=yes” to edit the Dashboard.

Thanks

23

Hello,

i’m trying to use a custom widget unfortunately the widget looks like it’s loading non-stop.

I saved the following code in a file with the .html extension and uploaded it to the files page.

After copying the URL, I pasted it into the newly created custom widget and added the device and variable.

Unfortunately, no effect, could you point out where I made a mistake?

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script type="text\\javascript" scr="https://admin.tago.io/dist/custom-widget.min.js"></script>

    <title>My Widget</title>

</head>

<body>

    <button onclick="sendData()">

        Send data

    </button>



    <script>

        function sendData() {

        }



        window.TagoIO.onStart((widget) => {

            window.widget = widget;

        });



        window.TagoIO.ready();

    </script>

</body>
24

Hi, Adam.

I tested your code and it has an error in this line:

This line should be like this:

Hope this helps you. :slight_smile:

25

Thank you very much Mateus.
I have one more question, is it possible to download a list of devices in a custom widget, and is it possible to send information between widgets without using a specific device?

I would like to dynamically change the data on the dashboard depending on the selected device.

26

Hi Adam,

You can create a dummy mutable device for example config_dev to use when it’s not linked to an actual hw device.

Guilherme Costa

Software Engineer

27

You can utilize the tagoio-sdk to easily list all the devices and download their data as CSV using a custom widget. However, it is important to note that you cannot send data without selecting a device. The sendData method always requires a specific device to be chosen.

28

Hi, Mateus! Would mind giving us an example, please?
I can do it through analysis, but it is not working in a custom widget.

Many thanks!

29

You can build your widget using any kind of web technology, such as Angular, React, Vue, or even plain old Javascript.

Is there a tutorial about adding a Vue.js app as a custom widget?

I tried to add the the custom-widget.min.js script and the window.TagoIO.ready() call to the index.html of my Vue app, built it, and uploaded it to the Files storage, but all I see is an empty white widget.

I also tried to run my app on a standalone server which works, if opened from a browser directly. Then I tried to add it as an iframe inside the widget html code, but then once again I get an empty white content.

What is the proper way to do this?

30

“add the the custom-widget.min.js script and the window.TagoIO.ready() call to the index.html of my Vue app”

After some debugging it turned out that the problem was with the relative paths in the index.html. Fixing those paths solved the issue and my app works.

31

Dear Team,

Is it possible create custom widget with something simillar what is in widget device list, i want to push value to parametes using custom widget.

So for example, using “send data” button parameter - blue will be updated.

How to achive it ?