This article will walk you through the steps on how to create a button in your guided project that will allow your learners to open a file in an integrated cloud IDE.

About the feature

Every so often guided projects require learners to create files, folders, or even clone repositories from repository hosting platforms such as Github. The learners can interact with these files, folders, and repositories inside the integrated cloud IDE.

As an author, you might want your learners to open a certain file inside their instance of cloud IDE. Rather than specifying the instruction on how to open a file in cloud IDE using plain text, you can now create a button that will achieve exactly that.

Instructions

1. Click on the file icon inside the toolbar
   
   The following dialog menu will pop up.
   

2. Enter the file name and click "Enter"
   
   It is important to note that the learners will have their instance of cloud IDE opened inside /home/project directory by default. Therefore, any path you specify will be relative to /home/project directory. However, you can also specify an absolute path by starting with / (an example of an absolute path is /my/absolute/path/file.txt).

Congratulations! You have successfully created a button that will open your file in cloud IDE whenever a learner clicks on it.

As you can see, a directive was autogenerated inside your editor. This directive is detected by the renderer and is converted to an actual button.

• Make sure to always maintain an empty line directly above and below the directive for the renderer to correctly identify the directive.

• If you choose so, you can manually modify the path to your file directly in the editor by changing the text inside path="".

Learners' perspective

Now that you know how to create a button to open a file in IDE, let's take a look at it from the learners' perspective.

As you can see, we are using the guided project from the previous steps. The instructions are on the left, and the cloud IDE is on the right.

For demonstration purposes, my-project/file.txt file was manually created inside the learner's /home/project directory beforehand.

When the "Open file.txt in IDE" button is clicked, a new tab inside cloud IDE is opened displaying the contents of /home/project/my-project/file.txt.

And that is exactly what we wanted.

Extra features

Opening a file that for some reason does not exist in the learner's environment will prompt an error with an option to create the file.