- Open your AL project folder in Visual Studio Code. If you have not done so already, delete HelloWorld.al.
- 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
All files that contain AL code need to have an .al extension.
- Let's define the new table.
You can quickly add the basic structure for a table and field by using the ttable and tfield snippets. Do this by typing in your chosen snippet name and pressing Tab.
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.
- Now, let's create a card to display the detailed information for our Television Show records.
You can quickly add the basic structure for a card page by using the tpage snippet. There are multiple types of page snippets, so be sure to select the correct one.
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;
}
}
}
}
}
- Now, we'll build a list page to display the records from our new table.
Only show the most relevant and frequently used information on your list pages.
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;
}
}
}
}
}
In order to make your pages (and reports) searchable in the Business Central Web Client, you need to populate ApplicationArea and UsageCategory in the AL object file.
- Our basic application is ready to be published for testing. In the launch.json file, set the following properties:
"startupObjectId": 50101
"startupObjectType": "Page"
- 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:
- 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:
