How to do it...

  1. Open your AL project folder in Visual Studio Code.
  2. In order for Designer to work with our AL project, we need to make a small change to the project. Add the following property to the app.json file:
"showMyCode": true
  1. Press F6. This will publish your extension to your sandbox and launch Designer. When your browser opens, you will see that the design mode is active through the box in the top-center of your window:

While in design mode, you are still looking at the actual data in the system and can interact with the system, just as you would when Designer is not running.
  1. While still in design mode, navigate to the Items page, and then select any item in order to open the Item Card.

Move your cursor around the page, over the top of various controls on the page. As you move over the fields, you will notice that a triangle appears within the control. For page elements, such as fact boxes, you will notice that the element is highlighted and that the triangle appears within the control. Some examples are as follows:

We can have a single triangle, as in the following screenshot:

We can also have double triangles, as shown here:

  1. Move your cursor over any field on the page and click the triangle. Select Remove. The page will reload with the field now gone:

  1. Move your cursor over another field on the page, and then click and drag the triangle to move the field to another location on the page. Release the mouse button to place the field in the new location.
  2. Now, let's add a new field to the page:
    1. In the top-center of your screen, in the Designer box, click More.
    2. Select + Field. A list will open to the right listing all the fields that are available to add to the page.
    3. Drag any field from the list to anywhere on the page.
Each field in the list will have a status of either Ready or Placed to indicate whether the field already exists on the page. Note that you can add a field more than once to a page.
  1. Now that we're done making our updates to the page, let's save the changes:
    1. In the top-right corner of your browser window, press Stop designing.
    2. Uncheck the Download Code option.
    3. Press Save in the bottom-right corner of your browser window.
  2. Now, we pull the changes into our AL project. In Visual Studio Code, press F7. This will pull back the changes you just made to the Item Card.
  3. In Visual Studio Code's Explorer pane, open the PageExtension50101.al file and take note of the code in it. The AL code represents the exact changes you made in Designer.

You have just generated AL code by writing no code at all! How cool is that!?

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset