Other Defaultpagetemplate views

Question

question

vigneshs asked Sep 28, '21 Connor A commented Oct 7, '21

Other Defaultpagetemplate views

Hey team,

I knew that FlexSim web server we can overwrite the web page that we need to show by using defaultpagetemplate in serverinterface. FlexSim supports Javascript and html for this. Does it support any other framework like React or some other single page applications. To be precise if i have a react app or Angular web app and can I show that in the flexSim defaultpagetemplate rather than the plain html and vanilla Javascript. If yes, how can I pull and show them in FlexSim web server.

Please let me know if this needs some more detailed explanation.

Software Version:

FlexSim 21.2.3

flexsim webserver html views

· 1

5 |100000

Attachments: Up to 12 attachments (including images) can be used with a maximum of 23.8 MiB each and 47.7 MiB total.

Connor A commented · Oct 07, 2021 at 05:13 AM

Hi @vigneshs, was Ben Wilson's answer helpful? If so, please click the "Accept" button at the bottom of their answer. Or if you still have questions, add a comment and we'll continue the conversation.

If we haven't heard back from you within 3 business days we'll auto-accept an answer, but you can always unaccept and comment back to reopen your question.

0 ·

Answer 1 · 2021-09-28T17:55:30Z

Ben Wilson answered Sep 28, '21 Ben Wilson edited Oct 1, '21

Hi @vignesh.s ,

You can link to other scripts and stylesheets using the same <script> or <link> tag syntax that you see in the example default page template:

The "flexsimweb" folder that all these external files are being loaded from is under FlexSim's program directory. If you installed FlexSim in its default location, that should be C:\Program Files\FlexSim 2021 Update 2\program:

So go ahead and put Angular or React javascript files into the flexsimweb folder and include them into your pages as needed.

Good luck!

1632851507002.png (55.6 KiB)

1632851612795.png (22.3 KiB)

· 2

5 |100000

Attachments: Up to 12 attachments (including images) can be used with a maximum of 23.8 MiB each and 47.7 MiB total.

vigneshs commented · Sep 30, 2021 at 06:36 PM

@Ben Wilson Thanks. Does that mean, i can copy the entire Reactapplication project and place it in the flexsimweb folder as mentioned ? how should is call the react application page instead of default flexsim web page showing. Can you please help on this

0 ·

Ben Wilson ♦♦ vigneshs commented · Oct 01, 2021 at 07:48 PM

You would develop your React app in some development environment. When it is ready, compile it for production.

Take the production files, put them under the program/flexsimweb folder. The contents of the application's index.html should be copied into your FlexSim model's Tools/serverinterface/defaultpageteamplate node.

For example:

Here is a page of example React applications: Example Projects – React (reactjs.org)

I'll demonstrate with this Calculator app: GitHub - ahfarmer/calculator: Simple calculator built with React

I took the compiled production code, as attached in this zip file (reactapp.zip) and extracted it to my FlexSim program folder such that I have this file path with the necessary files:

C:\Program Files\FlexSim 2021 Update 2\program\flexsimweb\reactapp\calculator

I modified the React calculator project's index.html code, appending "/flexsimweb/reactapp/calculator/ " to the paths of external files that get included.

This modified html text is copied into the FlexSim model at /Tools/serverinterface/defaultpagetemplate.

Here is my example FlexSim model with this demonstration web app ready to go: react_app_test.fsm

With the .zip files extracted in the proper place, and the webserver installed, configured, and running, I can start and connect to an instance of that model and see the exact React Calculator webapp embedded in FlexSim Webserver's interface as you see right here: React Calculator (ahfarmer.github.io)

==========

Likely you'll want to include elements of FlexSim's interface and simulation data into your webpage. Since only the defaultpagetemplate node is actually run by FlexSim (the other external files are just requested and run by the viewing web browser), you need to include in defaultpagetemplate's html all of the FlexScript necessary to get whatever data and elements you want to show in your web app. These ?flexscript calls can be embedded within script tags and their output saved to JavaScript variables. You'll need to use some creativity to get it all working, but it is all eminently doable.

Good luck.

0 ·

react-app-test.fsm (24.9 KiB)

question