49
Views
6
Comments
Solved
Javascript and HTML for showing the response of an API
Question
Application Type
Reactive

Hello there,

I would like to present in my application an area where the user can see the transactions remaining in his disposal like this one: 

I have implemented the following js code that have tested, which returns the credits used:

In the UI though, I get this error:

Any help would be much appreciated!

Kind regards, 
Vasilis

2024-07-05 14-16-55
Daniël Kuhlmann
Ā 
MVP
Solution

Hi,

Yeah no problem see attached.

This is the CSS.

I added a Producer REST API to mock your API it just returns the current credits en total credits

In your case, you don't need it.

Then I created a Consumer REST API that consumes the Mock REST API, this REST API you should use to implement accessing the API as used in your Js logic

On the screen, I have a DataAction querying the REST API, and one expression that formats the result and added the right class to the Style classes property.

On the OnAfterFetch of the DataAction I calculate via JavaScript the percentage used credits:

and update a CSS Variable to handle the filling of the container.

That's it, this is the result:

CreditsUsedSample.oml
2024-07-05 14-16-55
Daniël Kuhlmann
Ā 
MVP

ah I see I forgot one thing: the percentage filled background-colour.

I will add that to the sample oml

2024-05-17 07-53-09
Vasilis Roumeliotis

Thank you very much for your precious assistance!

2024-07-05 14-16-55
Daniël Kuhlmann
Ā 
MVP

Hi Vasilis,

I removed the Marked solution, as that reply of me was not the solution.

I also updated the reply with the correct solution to now include the percentaged filled background based on used and total credits.

The OML version is also updated. If this works for you than please mark that reply of me with the OML as solution.

2024-07-05 14-16-55
Daniël Kuhlmann
Ā 
MVP

Hi,

Why you want to do this all with JavaScript, if you can do it the low code way in OutSystems?

The API you can consume on the Logic tab.

The UI part is easily done with a container and a bit of CSS.

No JavaScript needed.

Regards,

Daniel

2024-05-17 07-53-09
Vasilis Roumeliotis

Hello,

Can you guide me a little bit with the container and css part? I 've created the service that gets the response of the API (thank you for the idea) but I do not know how to pass the value into the screen!

2024-07-05 14-16-55
Daniël Kuhlmann
Ā 
MVP
Solution

Hi,

Yeah no problem see attached.

This is the CSS.

I added a Producer REST API to mock your API it just returns the current credits en total credits

In your case, you don't need it.

Then I created a Consumer REST API that consumes the Mock REST API, this REST API you should use to implement accessing the API as used in your Js logic

On the screen, I have a DataAction querying the REST API, and one expression that formats the result and added the right class to the Style classes property.

On the OnAfterFetch of the DataAction I calculate via JavaScript the percentage used credits:

and update a CSS Variable to handle the filling of the container.

That's it, this is the result:

CreditsUsedSample.oml
2024-07-05 14-16-55
Daniël Kuhlmann
Ā 
MVP

ah I see I forgot one thing: the percentage filled background-colour.

I will add that to the sample oml

2024-05-17 07-53-09
Vasilis Roumeliotis

Thank you very much for your precious assistance!

2024-07-05 14-16-55
Daniël Kuhlmann
Ā 
MVP

Hi Vasilis,

I removed the Marked solution, as that reply of me was not the solution.

I also updated the reply with the correct solution to now include the percentaged filled background based on used and total credits.

The OML version is also updated. If this works for you than please mark that reply of me with the OML as solution.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.