Other Defaultpagetemplate views

Question

question

vigneshs asked Sep 28 2021 at 5:19 PM Connor A commented Oct 07 2021 at 5:13 AM

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

______

Cookie preferences

Your privacy is important to us and so is an optimal experience. To help us customize information and build applications, we collect data about your use of this site.

May we collect and use your data?

Learn more about the Third Party Services we use and our Privacy Statement.

Strictly necessary – required for our site to work and to provide services to you

These cookies allow us to record your preferences or login information, respond to your requests or fulfill items in your shopping cart.

YES

Improve your experience – allows us to show you what is relevant to you

These cookies enable us to provide enhanced functionality and personalization. They may be set by us or by third party providers whose services we use to deliver information and experiences tailored to you. If you do not allow these cookies, some or all of these services may not be available for you.

YES

NO

Customize your advertising – permits us to offer targeted advertising to you

These cookies collect data about you based on your activities and interests in order to show you relevant ads and to track effectiveness. By collecting this data, the ads you see will be more tailored to your interests. If you do not allow these cookies, you will experience less targeted advertising.

YES

NO

Are you sure you want a less customized experience?

We can access your data only if you select "yes" for the categories on the previous screen. This lets us tailor our marketing so that it's more relevant for you. You can change your settings at any time by visiting our privacy statement

Your experience. Your choice.

We care about your privacy. The data we collect helps us understand how you use our products, what information you might be interested in, and what we can improve to make your engagement with Autodesk more rewarding.

May we collect and use your data to tailor your experience?

Explore the benefits of a customized experience by managing your privacy settings for this site or visit our Privacy Statement to learn more about your options.

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

Ben Wilson answered Sep 28 2021 at 5:55 PM Ben Wilson edited Oct 01 2021 at 7:55 PM

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

vigneshs commented · Sep 30 2021 at 6: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 7: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