How to do it...

1. Open your AL project folder in Visual Studio Code. If you have not done so already, delete HelloWorld.al.
2. In the Visual Studio Code Explorer, right-click and select New File. Name this file Television Show.al.

Repeat this process and create two more files:

• • Television Show List.al
  • Television Show Card.al

1. Let's define the new table.

In Explorer, select Television Show.al. In the Editor tab, enter the following:

table 50100 "Television Show"
{ 
    fields
    {
        field(1; Code; Code[20])
        {
             NotBlank = true;
        }
        field(2; Name; Text[80])
        {
        }
        field(3; Synopsis; Text[250])
        {
        }
        field(4; Status; Option)
        {
            OptionCaption = 'Active,Finished';
            OptionMembers = Active,Finished;
        }
        field(5; "First Aired"; Date)
        {
        }
    }
 
    keys
    {
        key(PK; Code)
        {
            Clustered = true;
        }
    } 
}

Make sure you save your changes.

1. Now, let's create a card to display the detailed information for our Television Show records.

In Explorer, select Television Show Card.al. In the Editor tab, enter the following:

page 50100 "Television Show Card"
{
    PageType = Card;
    SourceTable = "Television Show";
    DelayedInsert = true;

    layout
    {
        area(Content)
        {
            group(General)
            {
                field(Code; Code)
                {
                    ApplicationArea = All;
                }
                field(Name; Name)
                {
                    ApplicationArea = All;
                }
                field(Synopsis; Synopsis)
                {
                    ApplicationArea = All;
                }
                field(Status; Status)
                {
                    ApplicationArea = All;
                }
                field("First Aired"; "First Aired")
                {
                    ApplicationArea = All;
                }
            }
        }
    }
}

1. Now, we'll build a list page to display the records from our new table.

In Explorer, select Television Show List.al. In the Editor tab, enter the following:

page 50101 "Television Show List"
{
    PageType = List;
    ApplicationArea = All;
    UsageCategory = Lists;
    Editable = false;
    CardPageId = "Television Show Card";
    SourceTable = "Television Show";

    layout
    {
        area(Content)
        {
            repeater(Group)
            {
                field(Code; Code)
                {
                    ApplicationArea = All;
                }
                field(Name; Name)
                {
                    ApplicationArea = All;
                }
                field(Status; Status)
                {
                    ApplicationArea = All;
                }
            }
        }
    }
}

1. Our basic application is ready to be published for testing. In the launch.json file, set the following properties:

"startupObjectId": 50101
"startupObjectType": "Page"

1. Press F5 to publish the application to your development sandbox. Your web browser will open and, once you log in, you will be presented with your new Television Show List page:

1. Of course, there is not much to see until you enter some records. Try that out by clicking the +New button in the ribbon; the Television Show Card should open: