📚 General

Introduction to Customization

We built MachineTrader™ with all of the functionality you need to manage your trading and investments. However, the real beauty of MachineTrader™ is the way you can customize the platform so it works best for you. With some guidance from us, you will be able to easily make changes to the back end (”admin view”) of your MachineTrader™ instance, that will customize the front end (“display view”), to give you the information you need to optimize your trading strategies.

The image below shows the display view, or front end, of the home page of your unique MachineTrader™ client instance. 

628A31138C4F04B38Bdf552B Screen%20Shot%202022 05 22%20At%208.46.16%20Am

Now, create a new tab in your browser and enter the identical page url, except in this case remove the "/ui/" from the end of the url. This address will switch you to the "admin" view of your instance, which exposes the plumbing that makes the application run.  Your admin view should look similar to this:

625445B89D65Fe1Cbf8Ada00 Qckomqq01Btzvd7 1Opbdrwrdo1Wvaklolfvfnic O9Ywqhbeaorpzxwisnqmzmphzpx4K1Mmos2Fh Cdfwfhvljsywzatcxrztqvxbvmxvqhi4Svdayeiqvnswfx65De02Pqfj1

Make sure you click on the "Home" tab in the admin.  The image displays a collection of rectangular boxes, each of which contains small modules of JavaScript code - we call them "nodes."  The nodes are color-coded based on their type.

Let's click on the first node called "Refresh page." This exposes the underlying functionality of the node.

625445B7E1Db66341E94D9D8 Uzzvw7T3Erqeza3Lxkfpsuc9Zsq2Nzr5Vmvmpvvnufcp Bi8Bmanklahtrle6Omk1Tlem5Xyaf Eg16K0 9F2Sabv9J831Uaekemzitzlky5Ubrjuia 8Gdhdc92Win4X42W1Kf
625445B73Dcfe4Ee7D10B668 Jleekvkfgud9K6 Kvw8Awnplcubydpmgpsnockzdelz R7Wef7Vkfrb O1Fhkrqlqyhohjikahda5Hnqvys 9F7Ia0Eyghcxiygfp5Cwgmft6Dusmjqcwbdwvbcdl4I4Mh4 3 Mp

Each node shares a set of relevant properties for its type, as designated by its unique color.  The "ui" nodes (teal) are nodes that control the appearance of an element in your user interface ("the dashboard").  The "ui control node" is deployed whenever you want to start a process on a signal from the dashboard, that a user has entered on the page.

Let's return to your homepage dashboard to examine what events might be taking place behind the scenes.

625445B8B9F0Ea811A0Dcf39 W9Owmczdl18Ae33Bb Og2Y9Phg H8Buligmkxfunstnjouei97Obl0E5Znngcwjfznzodczjl8Rez Fy 3Gamtviinlr2Phzlobxwv45Mkaezk Vxfoqxsh A Uktmrovoi6Yj

The first thing that occurs is that you are asked to select an account from a pull- down menu. 

625445B7Ea0B349B208Dce1D V8Patkjd0Uetgoerr Lazk6Odwntnjc2Dv8Ztsvffq8 Zbtqa4Wjozn Ja6Akzfcnvm7T Z17Clbw3Nttbqwzpuc3D04Xyaealgp B2M7Jubvlismabazj77 Uvatsjqs4Bgfmz7

In the admin, this choice is represented by the ui dashboard node called "dropdown node". You can see under "options" below that the user is being asked to select either the "live" or the "paper" account. As you probably can imagine, all of these choices are completely configurable. You could manage 10 or more accounts (if they existed) simply by adding additional options. 

 

625445B786Ba82955B04Ab4B Wghecy0Ttbgawexseoqzkmiz3Jk0 Vag8Nqy Xmphc4Dh7Syzwe5Unms6Mzxau6 Rqxubtw8Kmzbgekcv Ozt0Osrhqfuujoojgqufdxzkjce5Mxbxikhjaza3Veauh8Pi8Giauh

The next step is to store the choice in a variable so that other actions will know which account is being used. We store variables in function nodes (yellow). In this case, we use a special function node called a "change node" which is used to  store variables. If the contents of the variable are only needed within the flow where we are working, we "set"  a "flow" variable (if the variable is required elsewhere in your instance, you set a "global" variable).  Attaching a "debug node" to another node allows you to see the function's output, which is stored by default as "msg.payload."

625445B77Cc77F2B6B834248 Ceaonrriguivn6Amyhrd49Ysphm Ecfdsedy3Tmv8Rtwef3Pn3Jh Epq7Gjmiauengbhejgsmiven7P5 35A5Mj Q06Xi1H Ooech Ts6Lnz5P Pi0Wlvp38Mzupb Vbytrtvnmb
625445B8F208B58310694A37 E2Olzmnakol2Yeycotvflildd572Av3Fvftuo7Yc0Mge6E2Acm661Ijtpxg7Xteob1Dvmaljhmzasr0H2Kverx Yb3Qgcycwyqvyaj2P6Reczph12Kk6Yxvgmpnrdabhcgqpjiar

When the live or paper account is selected, the event is triggered and the msg.payload contents will be shown in the debugger (top right),  after clicking the "bug" icon as shown below.

62546Bab1D7Eb77476Afa819 Screen%20Shot%202022 04 11%20At%201.55.33%20Pm

 

We have added a two-node flow consisting of an "inject node" and another function node for displaying the results of the stored "flow" variable. Inject nodes are one of the most frequently used nodes since they are used to kick off any process. They can be used to initiate a single event or can be set to repeat processes at recurring intervals or at specific times.

62546D61635D8A527D013711 Screen%20Shot%202022 04 11%20At%202.01.52%20Pm

In this case, we only want the event to occur once when we click so we use the default "Repeat" setting which is "none". Notice that when we click on the inject node (which by default is named "timestamp" because the default injection is a unix timestamp), the stored flow variable appears in the debugger on the right even though we did add a debugger node to the flow. This is where we will expose you to some of the "low-code" elements of MachineTrader™. The function node shown below named "Test stored value" contains some simple JavaScript code that tells the node to display the content of the "txt" variable with node.warn(txt ) function.

62546F93Cf43C04A78D315D4 Screen%20Shot%202022 04 11%20At%202.07.32%20Pm

Output in debugger:

62546Fb18924Be5817E545Ff Screen%20Shot%202022 04 11%20At%202.07.25%20Pm

This concludes this lesson.

Ready to Start Trading?

Put what you've learned into practice with MachineTrader's low-code platform.

Start Free Trial