How to perform Client calculation?

Stemon63 · December 28, 2023

Hi,
How can perform calculations (or checks) only on the client side?
I mean field c=field a+field b, but directly in the client store or on the values present directly in the editors (DB) that are in the form.
But all on client side, without making ajax calls to the server?
(Server dataset must be updated on post record)

Thank you

Stemon63 · January 3

calm down, calm down, don't rush, one solution at a time, please!

:-)

Kurt · January 4

Hello,

Are you using it in grid?

Stemon63 · January 4

Hi Kurt,
yes I use calculation in Dbgrids.
But I can use also in "normal" UniDb components.
In short I want to say how to perform calculation at store level or at field level, WITHOUT call the server;
I cannot call the server every time for perform fieldc= fielda+ fieldb, if all value are on the client. Especially on fast insertion in Grids (like invoices or expense reports);
Server calculation are ok, but for IMMEDIATE calculation I must perform them on the client (same also for immediate checks or limits).
Have you a solution?
Thanks

Abaksoft · January 5

21 hours ago, Stemon63 said:

Have you a solution?
Thanks

Good morning Stemon,

ChatGpt is your best friend.

I asked :

Hellow, Ho to calculate with javascript on client side, the Field C = Field A + Field B.

Let say Field A and Field B are edit text on the browser ? Thx

Answer :

Hello! In JavaScript, you can perform calculations on the client side by accessing the values of the input fields, performing the addition, and then updating the value of the result field. Here's a simple example assuming you have two input fields (Field A and Field and you want to display the result in another input field (Field C):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculate Fields</title>
</head>
<body>

<label for="fieldA">Field A:</label>
<input type="text" id="fieldA" />

<label for="fieldB">Field B:</label>
<input type="text" id="fieldB" />

<label for="fieldC">Field C (Result):</label>
<input type="text" id="fieldC" readonly />

// Add event listeners to trigger the calculation when the input changes
fieldA.addEventListener('input', calculate);
fieldB.addEventListener('input', calculate);

function calculate() {
// Get values from input fields and convert them to numbers
var valueA = parseFloat(fieldA.value) || 0;
var valueB = parseFloat(fieldB.value) || 0;

// Perform the calculation
var result = valueA + valueB;

// Update the result field
fieldC.value = result;
}
</script>

</body>
</html>

This example uses basic HTML and JavaScript to achieve the desired calculation on the client side. The calculate function is triggered whenever the input in Field A or Field B changes, and it updates the result in Field C accordingly.

__________

I am not in my office to test it. But i am sur, you can do something with these elements.

Abaksoft · January 5

I asked:

Great. How to translate this on unigui framework ?

Answer:

To achieve a similar functionality in UniGUI, you need to adapt the JavaScript logic within the context of a UniGUI application. UniGUI is a framework for developing web applications using Delphi Object Pascal. Here's an example of how you might translate the logic using UniGUI:

Assuming you have three UniEdit components named UniEditA, UniEditB, and UniEditC on your UniGUI form:

If you want to perform the calculation on the client side without involving server communication, you can use JavaScript directly in UniGUI. UniGUI allows you to execute JavaScript code from the server side.

Assuming you have three UniEdit components named UniEditA, UniEditB, and UniEditC, you can attach the following event handlers to their client-side events:

unit MainForm;

interface

uses
Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
Dialogs, uniGUIForm, uniGUIClasses, uniBasicGrid, uniDBGrid, uniButton, uniBitBtn,
uniSpeedButton, uniGUIBaseClasses, uniPanel, uniLabel, uniEdit, uniGUIFrame,
uniFrame;

type
TMainForm = class(TUniForm)
UniLabelA: TUniLabel;
UniLabelB: TUniLabel;
UniLabelC: TUniLabel;
UniEditA: TUniEdit;
UniEditB: TUniEdit;
UniEditC: TUniEdit;
UniButtonCalculate: TUniButton;
UniFrameController: TUniFrameController;
procedure UniFormCreate(Sender: TObject);
private
{ Private declarations }
public
{ Public declarations }
end;

var
MainForm: TMainForm;

implementation

{$R *.dfm}

procedure TMainForm.UniFormCreate(Sender: TObject);
var
Script: string;
begin
// Attach the client-side events
Script :=
'function calculateFields() {' +
' var valueA = parseFloat(document.getElementById("' + UniEditA.JSName + '").value) || 0;' +
' var valueB = parseFloat(document.getElementById("' + UniEditB.JSName + '").value) || 0;' +
' var result = valueA + valueB;' +
' document.getElementById("' + UniEditC.JSName + '").value = result;' +
'}' +
'document.getElementById("' + UniButtonCalculate.JSName + '").addEventListener("click", calculateFields);';

UniFrameController.ExecuteJSCode(Script);
end;

initialization
RegisterAppFormClass(TMainForm);

end.

This code uses the UniFrameController component to execute JavaScript code on the client side. It attaches a client-side event to the button click, which performs the calculation in JavaScript without communicating with the server. Adjust the code based on your specific needs and UI structure in UniGUI.

________

All this is from ChatGpt

Stemon63 · January 5

Hi,
ABAKSoft, thank you for the idea.
There is also a solution for DBgrid calculation in ChatGpt? 🙂

Abaksoft · January 6

Interesting !

I am tchatting with ChatGpt 3.5

Q: Thank you. Is AjaxRequest client side in unigui ?

A: I apologize for any confusion in my previous responses. I made an error in my explanation. The AjaxRequest function in UniGUI is indeed server-side and is used for making asynchronous requests to the server.

To perform calculations on the client side in UniGUI, you can use UniSession.AddJS to execute JavaScript code directly on the client. I appreciate your understanding, and I'm here to assist with any further questions or adjustments you may need.

Q: So, what benefits to use UniSession.AddJS instead of pascal code ?

A: Using UniSession.AddJS to execute JavaScript code on the client side in UniGUI provides several benefits:

Client-Side Interactivity: It allows you to enhance the interactivity of your UniGUI applications by directly manipulating the client-side (browser) behavior. This is useful for tasks that are more efficiently handled on the client side without requiring a round-trip to the server.
Reduced Server Load: Client-side operations with JavaScript don't involve server round-trips, reducing the load on the server. This is beneficial for tasks that can be handled locally by the browser without the need for server-side processing.
Dynamic Updates: You can dynamically update the client-side user interface in response to user actions without refreshing the entire page. This leads to a smoother and more responsive user experience.
Asynchronous Processing: JavaScript code executed via UniSession.AddJS is asynchronous, allowing you to perform actions on the client side while other server-side operations may be ongoing. This can improve the overall responsiveness of your application.
Access to Browser Features: JavaScript provides direct access to browser features and APIs, enabling you to utilize a wide range of client-side functionalities that may not be easily achievable with Pascal code alone.

However, it's essential to strike a balance and use client-side code judiciously. Certain tasks are better suited for execution on the server side, especially when involving sensitive data or complex server interactions. Always consider the security implications and user experience when deciding whether to use client-side or server-side logic.

You

Great !

ChatGPT

I'm glad you found the information helpful! If you have any more questions, whether they're related to UniGUI, web development, or any other topic, feel free to ask. Happy coding!

ChatGPT can make mistakes. Consider checking important information.

Stemon63 · January 8

HI Abaksoft,
thank you for the help!
But I think an analysis by Farshad or Sherzod is necessary to explain how to interact with the Js routines that they have created, in order to be able to carry out client operations on grids and stores (client dataset) in an "official" way and in a to then be able to update the data on the server dataset.
Only in this way can we develop truly powerful and fast applications since we can divide the load between calculations on the client (sometimes very fast and immediate) and server-side operations. I ask for their analysis on the problem, which is certainly good for Unigui's performances and tuning. Thank you!

Sherzod · January 8

@Stemon63 @Abaksoft

Yes, we must wait for the release of a version that will use the light implementation of the grid.

Stemon63 · January 9

14 hours ago, Sherzod said:

@Stemon63 @Abaksoft

Yes, we must wait for the release of a version that will use the light implementation of the grid.

OK Sherzod,
but with light grid, what operations we can perform on client WITHOUT involve server?
And then, how to synchronize the updated and modified data on the client on the server?
Is it possible to have some previews on the applied logic?
Is there some kind of UniClientDataset and then some kind of Applyudates, for example (which would be optimal)?
Or events that allow you to synchronize modified records?
Any news or predictions are welcome.
I won't hide the fact that, for a project that requires very fast grid input and immediate quick calculations (sums and checks directly line by line) I'm testing TMS Web Core which manages the datasets entirely on the client.
But I would prefer to continue this project with Unigui, if possible.
Good work. Thanks in advance!

Kathlyn · March 20

What does "Client calculation" mean, and why is it important in software development?

Abaksoft · March 20

19 hours ago, Kathlyn said:

What does "Client calculation" mean, and why is it important in software development?

Hello,

Let see an example :

1. Assume, you have a grid where we can see all money operations for a person (100 lines) and at the last column its current balance.

2. Assume, you just commit an update on line 5 :

update TOperations set amount = 777 where (IDOperation = 23000)

At this point, the server will commit this without problem as the transaction is fast !

And you want to see, not only the refreshed record at line 5, but all records after, affected the current balance.

3. So, obviously you will say : Ok, i will Re-Open the Query and show the new balance colum.

Humm....the problem is here !

4. In web development, we have to think differently : assume you have a mini server, with low ressources and 500 opened sessions in real time.

The 500 users are doing updates, with re-open (refreshing).

Not tested, but obviouly, our mini server will make a face 🥶

5. Here is where comes "Client Calculation" :

After updating line 5, we don'nt have to re-open the query (saturate the server), but work only on the grid locally, client side

Ovoid technic .Edit .Post as it is server side.

6. Working on the grid locally, client side take advantage of javascript already integrated on known browsers as Chrome, Opera, FireFox, etc...

7. JavaScript on client side (Client Calculation) allows you to refresh the 95 lines in a flash time, without the need to re-call the server, nor even updating anything on sever.

8. I think FmSoft team is doing her best to release a next build with this feature.

😊

How to perform Client calculation?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation