Questions to import 3rd part Electron libraries

Hi there, I am new to TMS Web Core Electron, I have some questions need your help:

  1. How can I IMPORT a 3rd part Electron library and its dependencies.
  2. Is there any tool such as NPM can helps importing a 3rd part Electron library(or SDK)?

Thanks.

Please, can anyone answer my questions??

3rd party Electron libraries are JavaScript based. There is not a tool from TMS WEB Core to import these. You would use NPM to get these and you'll need to interface with these from the TMS WEB Core app via calling its JavaScript APIs, for example from ASM blocks.

It is weekend and most staff is having time off in the weekend.

It's very helpful, thanks for your help.

Well, I have already import 3rd part Electron libraries into my project successful and I have a new question: I can run Java Script code in a Pascal code block with ASM now, it is really perfact. Further I need to run Pascal Code in a Java Script code block just like this:

var
rsProcess: string;

begin
rsPorcess := 'step1';

asm
const TimRender = require('./node_modules/im_electron_sdk/dist/renderer')
const timRender = new TimRender();

let promise = timRender.TIMGetSDKVersion();;
promise.then(function(imResponse) {
  console.log(imResponse.data); //Succ

    ***HERE, I WANT TO DO SOMETHING WITH PASCAL CODE

 }
}).catch(function(imError) {
  console.warn('login error:', imError); // error info

    ***AND HERE, I WANT TO DO SOMETHING WITH PASCAL CODE ALSO

});

end;

rsProcess := 'step3';
end;

How can I do that?

Thanks.

Hi there.... Pretty sure you won't be able to call Pascal code from within an ASM Javascript block. What you can do though is set local variables to handle various conditions that you can then execute once your Javascript code completes. Maybe something like this. Others may have better ideas.

var
  rsProcess: String;
  someData: String; // or whatever datatype you need
  someError: String; // or whatever datatype you need
  imSuccess: String;

begin
  rsProcess := 'step1';

  asm
    const TimRender = require('./node_modules/im_electron_sdk/dist/renderer');
    const timRender = new TimRender();

    let promise = timRender.TIMGetSDKVersion();
    promise.then(function(imResponse) {
      console.log(imResponse.data); //Succ
      someData = imResponse.data;
      imSuccess = 'Success';
    }).catch(function(imError) {
      console.warn('login error:', imError); // error info
      someError = imError;
      imSuccess = 'Fail';
    });    
  end;

  if imSuccess = 'Success' then
  begin
    // do something with someData as you would have done with imResponse.data
  end
  else
  begin
    // do something with someError as you would have done with imError
  end;

  rsProcess := 'step3';
end;

So, basically, just handle the Pascal code after the Javascript code and use local variables to keep track of whatever conditions are expected.

Thanks for reply, but your solution could not be used because the 'promise' in Java Script is asynchronous, you wiil find the 'STEP3' and other Pascal code under the ASM block run before the 'promise' code which is in the ASM code block.

So......I have to going on wait for other solutions.

Thank you all the same.

Ah, I didn't catch that. In that case, another approach is to call a Delphi function from Javascript. You can't add Pascal code there but you can add Delphi function calls. So maybe try setting up Delphi functions for imSuccess and imFail and then call those with whatever parameters you need to pass out the relevant information?

Try something like this?

    let promise = timRender.TIMGetSDKVersion();
    promise.then(function(imResponse) {
      console.log(imResponse.data); //Succ
      imSuccess(Response.data);
    }).catch(function(imError) {
      console.warn('login error:', imError); // error info
      imFail(imError);
    }); 

...

procedure imSuccess(data: String);
begin
  // do something
end;

procedure imFail(data: String);
begin
  // do something
end;

Might have to search around for the right function calls. For example, depending on where imSuccess and imFail are defined, you might have to use this.imSuccess() or something like that.

That is good idea, but I do not know how to add a Delphi function call, could you please give me an example code??

Yet another approach depending on how long the async calls might be is to setup a timer and just check periodically for a value to change. So for example you can define imSuccess and other new variables in my example as form variables and reference them in the JS code using something like this.imSuccess. And then just use the timer to check and see if imSuccess has been set to either 'Success' or 'Fail' periodically. I think the function call idea would be better but this has its uses also.

Yes, it works :heart_eyes:

type
TSuccFunc = procedure (msg: string);
TFailFunc = procedure (msg: string);

procedure imSucc(msg: string);
begin
showMessage(msg);
end;

procedure imFail(msg: string);
begin
showMessage(msg);
end;

procedure TForm1.WebButton1Click(Sender: TObject);
var
rsProcess: string;
SuccFunc: TSuccFunc;
FailFunc: TFailFunc;
begin
rsProcess := 'step1';

SuccFunc:=imSucc;
FailFunc:=imFail;

asm
const TimRender = require('./node_modules/im_electron_sdk/dist/renderer')
const timRender = new TimRender();

let promise = timRender.TIMGetSDKVersion();;
promise.then(function(imResponse) {
  console.log(imResponse.data); //Succ

// ***HERE, I WANT TO DO SOMETHING WITH PASCAL CODE
SuccFunc(imResponse.data);

}).catch(function(imError) {
  console.warn('login error:', imError); // error info

// ***AND HERE, I WANT TO DO SOMETHING WITH PASCAL CODE ALSO
FailFunc('error');
});
end;

rsProcess := 'step3';
end;

So happy, Thanks Thanks Thanks a lot~~~~

@AndrewSimard

Happy to help! Keep the questions coming. I'm no expert by any means but plenty of smart people around here that have likely run into any kind of problem you're likely to have.

1 Like

This topic was automatically closed 60 minutes after the last reply. New replies are no longer allowed.