If you are like me, working on the layout can be rather time consuming. It would be great to be able to drag and drop fields around. There is a way to do just that with Visual Studio Code and Business Central. Let’s walk through that feature right now.

First you will need a Page or Page Extension. Here is a Page Extension for the Customer Card.

pageextension 50000 ARD_Customer extends "Customer Card"
{
}

Absolutely empty!

I’ve also created a Table Extension so we could have some non-standard fields to work with.

tableextension 50000 ARD_Customer extends Customer
{
    fields
    {
        field(50000; ARD_CatsName; Text[50])
        {
            Caption = 'Cats Name';
            ToolTip = 'Name of the cats.';
            DataClassification = ToBeClassified;
        }
    }
}

When we ran extensions from VS Code in the past, we have pressed F5 to start the Debugger, this time we press F6.

With F6 the system starts in Designer Mode.

I can now edit the Customer Card in Design Mode. In this case I’m going to click that “+ Field” button in the purple banner and add in the “ARD_CatsName” field.

Drag and Drop

By clicking on the purple arrow in the corner I can adjust the fields properties.

In this case, I’m going to unlock editing.

When I’m done, I’ll click the Stop Designing in the top right corner of the screen.

I’m going to ensure it has a name, Publisher, and the Download Code box is checked, then click Save.

Back to Visual Studio Code, I’ll press ALT+F6 and presto!

pageextension 50000 ARD_Customer extends "Customer Card"
{
    layout
    {
        addafter(Name)
        {
            field(ARD_CatsName10185; Rec.ARD_CatsName)
            {
                ApplicationArea = All;
            }
        }
    }
}

My code has been updated to include the changes I’ve just made!

This applies to all aspects of the page. Show/Hide actions, move buttons, update properties, set importance. It is a great way to work through your layouts in a more “What you see is what you get” interface.

We can’t work with Triggers or other more advanced aspects of page management, but if you are like me, getting the layout correct can be a real challenge. This also lets you work more collaboratively with an end user, allowing you to move and visualize the results in real time.

This is a short post for this week, I’m speaking at my local Dynamics User Group and there is a lot to do before my presentation. If you haven’t visited your local DUG, I highly recommend finding your local meetup. You will meet some amazing people, have a great time, and learn something.