Skip to main content

Viewing The Enactor Code

Overview​

This task will show the how to view the Enactor source for the React POS modules.

[ * Time to Complete: 15-30 minutes ]

What You Will Learn​

  • Searching and viewing Enactor React POS components

Exercises​

Start the React Pos, and go to any screen. In this example we are going to use the SignOn screen

Open the developer tools → console

Look in the console for logs for the process id, and prompt url.

Process ID : Pos/SignOn/SignOn
Page URL : http://localhost:3009/
Prompt URL : Pos/SignOn/EnterUser

Navigate back to VSCode and Open the folder node_modules/@enactor.

This folder has all the source code for the Enactor React pos application. We can use this to find how existing screens are created

In the node_modules/@enactor/react-pos folder we are going to search for the prompts. The easy way to do this is to go to node_modules/@enactor/react-pos/src/components then navigate to the prompt by using the prompt url as a guide to find the prompt (excluding the “Pos/“ folder.)

Note: Some prompts use the index.js name structure. For instance node_modules/@enactor/react-pos/src/components/{PromptUrl}/index.js. Some prompts use an older format, where the index.js file doesn’t exist. The last folder is actually a javascript file.

For instance, given the prompt url Pos/SignOn/EnterUser we need to look in the folder structure for node_modules/@enactor/react-pos/src/components/SignOn/ for the SignOn.js file

Let’s find another prompt. Given the prompt url of Pos/Name/NamePrompt can you find the prompt?

Searching Enactor source code using VS Code​

You can also search using VSCode’s search feature.

  • Click the magnifying glass on the left hand side menu.
  • In the "Files to include" field add **/node_modules/@enactor
  • In the "Files to exclude" field add lib

Then add the prompt name, or any other code you want to find in enactor. For instance, NamePrompt.

Opening Enactor source code using VS Code​

By default VS Code stops the editor for searching for files in the node_modules including any children. You can display this by going to VS Code’s settings → “Exclude” → Remove the **/node_modules

Now use the file search cmd+p or ctrl+p and type “NamePrompt”