How to use button

[Robin Ildefonso Ildefonso]

Hello, 

I am new in structr, 

I have my Schema 

And I check the REST API

i run this command 

I added a button that I want to use for this command 

fetch('/structr/rest/Project/info', {
    method: 'POST',
    credentials: 'include',
    body: JSON.stringify({
        name: "New Project"
    }),
}).then(function(response) {
    return response.json();
}).then(function(json) {
    json.result.forEach(project => {
        // process result
    });
});

Here is the button 

Can you help me how to use the onclick or how to put the POST script? i tried to console.log it its working but when im trying to add the POST function its not working 

[Kai Schwaiger]

Hello,

the “onclick" attribute simply outputs the given content into the onclick attribute in the HTML.

Outputting whole functions in there gets pretty messy pretty quick and will be hard to maintain later on,

so I would probably create a function “createProject” with your fetch call and put it in a script tag in the page

and simply put “javascript: createProject();” in the onclick attribute.

You could also add a HTML id to the button and keep the javascript completely encapsulated in the script tag (or file) and

look up the button by id and the attach a click listener with your code.

But all that is a lot of work to create basic functionality, if that is what you want and need then it is totally up to you, but there

is an easier way to achieve it. You should have a look at the “Events” tab for the button element.

With a configuration similar to the below screenshot you should be able to create the functionality without any javascript.

You only need to include the structr frontend javascript like so:

<script type="module" defer src="/structr/js/frontend/frontend.js"></script>

Hope that helps!

Best,

Kai

On 23. Aug 2024, at 03:32, Robin Ildefonso Ildefonso <ildefonso...@gmail.com> wrote:

Hello, 

I am new in structr, 

I have my Schema 

<image.png>

And I check the REST API

i run this command 

<image.png>

I added a button that I want to use for this command 

fetch('/structr/rest/Project/info', {
    method: 'POST',
    credentials: 'include',
    body: JSON.stringify({
        name: "New Project"
    }),
}).then(function(response) {
    return response.json();
}).then(function(json) {
    json.result.forEach(project => {
        // process result
    });
});

Here is the button 
<image.png>

Can you help me how to use the onclick or how to put the POST script? i tried to console.log it its working but when im trying to add the POST function its not working 

--
You received this message because you are subscribed to the Google Groups "structr" group.
To unsubscribe from this group and stop receiving emails from it, send an email to structr+u...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/structr/CACXY51zkjdV%2BTebg5%2B8Vh60Rk4DDvVHWP05Gvb%3DGHviqy4Ltrg%40mail.gmail.com.

[Robin Ildefonso Ildefonso]

Thank you for getting back to me so quickly.

I already solved the problem but can you please help me how to manage to edit the table? I already managed to Add and delete

If I set the data-structr-action in my td to Edit, I can see the save and cancel buttons but I can't update the fields, can you help me?

Here is the output, and also where can I put my code if I want to update it?

To view this discussion on the web, visit https://groups.google.com/d/msgid/structr/F21D5189-50F9-4DEF-94B5-2E0CBA4AE608%40structr.com.

[Kai Schwaiger]

The Edit Mode Binding Feature has been deprecated for a while and is removed in the newest snapshots and thus in the next major version 6.0.

The event mapping in the “Events” tab is the new place to do such things.

You can configure the edit behaviour like in the following screenshot. The outer tr has a repeater which lists all projects and makes the individual project available as “project”.

Hope that helps!

Kai

On 25. Aug 2024, at 07:22, Robin Ildefonso Ildefonso <ildefonso...@gmail.com> wrote:

Thank you for getting back to me so quickly.

I already solved the problem but can you please help me how to manage to edit the table? I already managed to Add and delete

<image.png>

If I set the data-structr-action in my td to Edit, I can see the save and cancel buttons but I can't update the fields, can you help me?

<image.png>

Here is the output, and also where can I put my code if I want to update it?

<image.png>

On Sun, 25 Aug 2024 at 13:09, 'Kai Schwaiger' via structr <str...@googlegroups.com> wrote:

Hello,

the “onclick" attribute simply outputs the given content into the onclick attribute in the HTML.

Outputting whole functions in there gets pretty messy pretty quick and will be hard to maintain later on,

so I would probably create a function “createProject” with your fetch call and put it in a script tag in the page

and simply put “javascript: createProject();” in the onclick attribute.

You could also add a HTML id to the button and keep the javascript completely encapsulated in the script tag (or file) and

look up the button by id and the attach a click listener with your code.

But all that is a lot of work to create basic functionality, if that is what you want and need then it is totally up to you, but there

is an easier way to achieve it. You should have a look at the “Events” tab for the button element.

With a configuration similar to the below screenshot you should be able to create the functionality without any javascript.

You only need to include the structr frontend javascript like so:

<script type="module" defer src="/structr/js/frontend/frontend.js"></script>

Hope that helps!

Best,

Kai

To view this discussion on the web, visit https://groups.google.com/d/msgid/structr/CACXY51x95eY9aaanWjzoQtzLbVtYq%2B14qtapgnTp8xo%2BZjqgiA%40mail.gmail.com.

[Robin Ildefonso Ildefonso]

I tried to replicate your image but the update is not working here is the screenshot 

I already dragged the Input to the Form input. here is my preview. Do i need to add function to my script? although it has a direct event in the data object?

To view this discussion on the web, visit https://groups.google.com/d/msgid/structr/A430D2B5-E264-4270-A0F2-35467B75801F%40structr.com.

[Kai Schwaiger]

With that configuration you should not need to do anything manually in your own javascript. The only thing you need is the frontend library in that page:

<script type="module" defer src="/structr/js/frontend/frontend.js"></script>

Otherwise it is hard to tell why this does not work as expected. The repeater uses the data key “project”, as it is used here in ${project.id}, correct?

The “Add” and “Delete” work? Maybe the mixture of the deprecated “Edit Mode Binding” and the new “Event Action Mapping” does not work. It is really hard to diagnose...

I assume you are running version 5.2. You could try updating to the current snapshot version 6.0-SNAPSHOT

On 25. Aug 2024, at 15:17, Robin Ildefonso Ildefonso <ildefonso...@gmail.com> wrote:

I tried to replicate your image but the update is not working here is the screenshot 

<image.png>

I already dragged the Input to the Form input. here is my preview. Do i need to add function to my script? although it has a direct event in the data object?

<image.png>

On Sun, 25 Aug 2024 at 15:35, 'Kai Schwaiger' via structr <str...@googlegroups.com> wrote:

The Edit Mode Binding Feature has been deprecated for a while and is removed in the newest snapshots and thus in the next major version 6.0.

The event mapping in the “Events” tab is the new place to do such things.

You can configure the edit behaviour like in the following screenshot. The outer tr has a repeater which lists all projects and makes the individual project available as “project”.

Hope that helps!

Kai

To view this discussion on the web, visit https://groups.google.com/d/msgid/structr/CACXY51zcmFcsjef3RFMawHE3EF0etR-mVjOMwP7YLBS-jtrpeg%40mail.gmail.com.

[Robin Ildefonso Ildefonso]

Hello, 

Yes, I followed the sample schema and data using the project convention. Upon checking my screenshot, and your screenshot has a difference.

I tried to update the docker from 5.0 to the latest but it is still pulling the 5.0 version

[Kai Schwaiger]

I think you can try "structr/structr:5.2.0” for the latest stable version or you could go with "structr/structr:6.0-SNAPSHOT” for the most recent build.

In the 5.2.0 version there will still be a difference (the “dialog” feature has been added very recently) but it should work.

The 6.0-SNAPSHOT version should also work and have the most recent features.

On 27. Aug 2024, at 02:39, Robin Ildefonso Ildefonso <ildefonso...@gmail.com> wrote:

Hello, 

Yes, I followed the sample schema and data using the project convention. Upon checking my screenshot, and your screenshot has a difference.

I tried to update the docker from 5.0 to the latest but it is still pulling the 5.0 version

<Screenshot 2024-08-27 at 8.27.22 AM.png>

<Screenshot 2024-08-27 at 8.35.50 AM.png>

To view this discussion on the web, visit https://groups.google.com/d/msgid/structr/87f92299-3fec-4b1b-8836-0a59734e9d71n%40googlegroups.com.
<Screenshot 2024-08-27 at 8.27.22 AM.png><Screenshot 2024-08-27 at 8.36.38 AM.png><Screenshot 2024-08-27 at 8.35.50 AM.png>

[Robin Ildefonso Ildefonso]

Thank you, I just skipped this because it's nice to have. 

I have another inquiry, I wasn't able to put it in a row like this 

\ The image below is my actual structr page. I update my existing div but it's returning like this. 

[Robin Ildefonso Ildefonso]

Hi, please ignore my previous email.  Sorry 

I have a question sir, do you know if structr supports Carousel? In my demo my local carousel is working, when I imported it into Strucr the image did not automatically transform into another image.

[Kai Schwaiger]

If the carousel works in your local demo then it should also work in structr. Usually carousels are javascript components, so if

the javascript files and images (+ possible css) are correctly imported into structr and are correctly included in the page it should work.

To view this discussion on the web, visit https://groups.google.com/d/msgid/structr/d35ac14c-b754-4a30-b6dc-c91837d9cb05n%40googlegroups.com.

[Robin Ildefonso Ildefonso]

Thank you, also can we get the elements of the HTML and put it in an example repeater?

[Robin Ildefonso Ildefonso]

Hello, 

My apologies; please disregard my previous question. My inquiry is: can you share how to use widgets as shareable components and shareable data?

I'm trying to insert my data in Datagrid widgets. 

Thank you