Skip to main content

Scheda - Prototype

Basic Knowledge​

What to Expect​

In this initial step, we will create a prototype data that will subsequently be utilized by the Matrix component and our Calendar component. We will demonstrate how assigning specific attributes allows us to manipulate these components effectively.

Prototype​

First, we need to create a prototype file. Since we don’t have real data at this stage of the tutorial, we will create mock data instead. Let's create new .set file named X1_X01_PRO.set. Within this file, we will set up a table named Activities.

::TBL Nam="ACTIVITIES" Tit="Activities"

Let's create the columns for this table along with their respective attributes. We need the following column names:

  • X1DATE: the date of the activity, formatted as D8*YYMD.
  • X1DESC: the description of the activity.
  • X1STIM: the starting time of the activity, represented in the I12 format.
  • X1ETIM: the ending time of the activity, also in the I12 format.
  • X1STCT: a code that identifies the style of the activity and its corresponding category.
  • X1CTGR: category description.
  • X1HOUR: activity duration in hours.
::TBL Nam="ACTIVITIES" Tit="Activities"
::COL Cod="X1DATE" Txt="Date" Tip="" Lun="08" IO="O" Ogg="D8*YYMD" Dpy="" Fill="" Aut="" ETxt=""
::COL Cod="X1DESC" Txt="Description" Tip="" Lun="50" IO="O" Ogg="" Dpy="" Fill="" Aut="" ETxt=""
::COL Cod="X1STIM" Txt="Start" Tip="" Lun="8" IO="O" Ogg="I12" Dpy="" Fill="" Aut="" ETxt=""
::COL Cod="X1ETIM" Txt="End" Tip="" Lun="8" IO="O" Ogg="I12" Dpy="" Fill="" Aut="" ETxt=""
::COL Cod="X1STCT" Txt="Style category" Tip="" Lun="5" IO="O" Ogg="" Dpy="" Fill="" Aut="" ETxt=""
::COL Cod="X1CTGR" Txt="Category" Tip="" Lun="" IO="O" Ogg="" Dpy="" Fill="" Aut="" ETxt=""
::COL Cod="X1HOUR" Txt="Total Hours" Tip="" Lun="5" IO="O" Ogg="NR" Dpy="" Fill="" Aut="" ETxt=""

At this point, let's populate our table with rows for activities scheduled throughout the week. Feel free to get creative and include your favorite activities!

::DAT Fld="20501205|GYM - YOGA LESSON|113000|124500|00D01|Sport|1.25"
::DAT Fld="20501206|CINEMA WITH LARA|140000|160000|53400|Free Time|2"
::DAT Fld="20501207|WORK MEETING|140000|180000|53200|Work|4"
::DAT Fld="20501208|DENTIST APPOINTMENT|090000|103000|00E20|Health|1.5"
::DAT Fld="20501209|SWIMMING CLASS|180000|193000|00D01|Sport|1.75"
::DAT Fld="20501210|BOOK CLUB MEETING|160000|180000|53200|Work|2"
::DAT Fld="20501211|DINNER WITH FRIENDS|190000|220000|53400|Free Time|3"
::DAT Fld="20501212|RUNNING SESSION|073000|090000|00D01|Sport|1.5"
Code Recap
::TBL Nam="ACTIVITIES" Tit="Activities"
::COL Cod="X1DATE" Txt="Date" Tip="" Lun="08" IO="O" Ogg="D8*YYMD" Dpy="" Fill="" Aut="" ETxt=""
::COL Cod="X1DESC" Txt="Description" Tip="" Lun="50" IO="O" Ogg="" Dpy="" Fill="" Aut="" ETxt=""
::COL Cod="X1STIM" Txt="Start" Tip="" Lun="8" IO="O" Ogg="I12" Dpy="" Fill="" Aut="" ETxt=""
::COL Cod="X1ETIM" Txt="End" Tip="" Lun="8" IO="O" Ogg="I12" Dpy="" Fill="" Aut="" ETxt=""
::COL Cod="X1STCT" Txt="Style category" Tip="" Lun="5" IO="O" Ogg="" Dpy="" Fill="" Aut="" ETxt=""
::COL Cod="X1CTGR" Txt="Category" Tip="" Lun="" IO="O" Ogg="" Dpy="" Fill="" Aut="" ETxt=""
::COL Cod="X1HOUR" Txt="Total Hours" Tip="" Lun="5" IO="O" Ogg="NR" Dpy="" Fill="" Aut="" ETxt=""
::DAT Fld="20501205|GYM - YOGA LESSON|113000|124500|00D01|Sport|1.25"
::DAT Fld="20501206|CINEMA WITH LARA|140000|160000|53400|Free Time|2"
::DAT Fld="20501207|WORK MEETING|140000|180000|53200|Work|4"
::DAT Fld="20501208|DENTIST APPOINTMENT|090000|103000|00E20|Health|1.5"
::DAT Fld="20501209|SWIMMING CLASS|180000|193000|00D01|Sport|1.75"
::DAT Fld="20501210|BOOK CLUB MEETING|160000|180000|53200|Work|2"
::DAT Fld="20501211|DINNER WITH FRIENDS|190000|220000|53400|Free Time|3"
::DAT Fld="20501212|RUNNING SESSION|073000|090000|00D01|Sport|1.5"

Matrix​

Our first component to be included in the scheda will be a matrix, one of the most useful and versatile components. This matrix will call the mock data service and read the data directly from our table, magically displaying the output in a tabular format.

::G.SEZ Pos(1)
::G.SUB.MAT Tit="*NONE"
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;X1_X01_PRO) 2(;;ACTIVITIES)

Sounds exciting, right? Let's spice up our table! There are many attributes that allow us to do some interesting things, and to implement them, we need to add them in the line ::G.SET.

One attribute we could explore is grouping ( DftGroup), which takes the name of a column as its value and groups the rows accordingly. For example, let’s group our activities by date.

::G.SET.MAT DftGroup="X1DATE,H"

Now, as we examine our nicely grouped table, what stands out that might be a bit off? Exactly, the X1STCT column is not relevant to the user at this stage. While it will be useful later in the calendar for categorizing activities (as we will explore), it is unnecessary in this matrix view. Let's specify which columns we want to display in our table using the Columns attribute.

::G.SET.MAT DftGroup="X1DATE,H" Columns="X1DATE|X1DESC|X1STIM|X1ETIM"
Code Recap
  • At this point, our table is adequately configured. Below is the complete code:
::G.SEZ Pos(1)
::G.SUB.MAT Tit="*NONE"
::G.SET.MAT DftGroup="X1DATE,H" Columns="X1DATE|X1DESC|X1STIM|X1ETIM"
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;X1_X01_PRO) 2(;;ACTIVITIES)

Calendar​

The next component in this tutorial is the calendar (CAL). Leveraging the same mock data, it will create a comprehensive calendar that showcases all of our scheduled activities.

Let's position this new component in the second row of our scheda:

::G.SEZ Pos(2)
::G.SUB.CAL Tit="*NONE"
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;X1_X01_PRO) 2(;;ACTIVITIES)

First, we want to ensure we are using the latest version of the component from the Ketchup library. To accomplish this, we will add the attribute Ketchup in the setup.

::G.SET.CAL Ketchup="Yes"
warning

As this is continuously being updated, this section may become irrelevant in the future.


Our component needs to be informed about which column to use for the start and end times of the activities; otherwise, it will assume that the activities are set for "All Day" which is not our intention.

Here again, we can use the attributes: IniCol for the start column and FinCol for the end column.

::G.SET.CAL Ketchup="Yes" IniCol="X1STIM" FinCol="X1ETIM"

We want to configure our component to display the calendar in weekly format by default, using the ShowAsWeek attribute.

Additionally, we want to assign a style to our activities for categorization, pulling this information from the X1STCT column, as previously mentioned. This will be assigned to the StyCol attribute.

::G.SET.CAL Ketchup="Yes" ShowAsWeek="Yes" StyCol="X1STCT" IniCol="X1STIM" FinCol="X1ETIM"
Code Recap
::G.SEZ Pos(2)
::G.SUB.CAL Tit="*NONE"
::G.SET.CAL Ketchup="Yes" ShowAsWeek="Yes" StyCol="X1STCT" IniCol="X1STIM" FinCol="X1ETIM" 
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;X1_X01_PRO) 2(;;ACTIVITIES)

Final Scheda Summary Step 1​

::G.SEZ Pos(1)
::G.SUB.MAT Tit="*NONE"
::G.SET.MAT DftGroup="X1DATE,H" Columns="X1DATE|X1DESC|X1STIM|X1ETIM"
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;X1_X01_PRO) 2(;;ACTIVITIES)

::G.SEZ Pos(2)
::G.SUB.CAL Tit="*NONE"
::G.SET.CAL Ketchup="Yes" ShowAsWeek="Yes" StyCol="X1STCT" IniCol="X1STIM" FinCol="X1ETIM" 
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;X1_X01_PRO) 2(;;ACTIVITIES)

If you have completed the Micro Executor or RPGLE section of the back-end tutorial, you can retrieve real Activities data from the backend instead of using prototype data. Simply update the FUN to call the specific service:

  • Micro Executor - Java

    ::G.SEZ Pos(1)
    ::G.SUB.MAT Tit="*NONE"
    ::G.SET.MAT DftGroup="X1DATE,H" Columns="X1DATE|X1DESC|X1STIM|X1ETIM"
    ::D.FUN.STD F(EXB;X1_X01_01;GET) 

    ::G.SEZ Pos(2)
    ::G.SUB.CAL Tit="*NONE"
    ::G.SET.CAL Ketchup="Yes" ShowAsWeek="Yes" StyCol="X1STCT" IniCol="X1STIM" FinCol="X1ETIM" 
    ::D.FUN.STD F(EXB;X1_X01_01;GET)

  • RPGLE

    ::G.SEZ Pos(1)
    ::G.SUB.MAT Tit="*NONE"
    ::G.SET.MAT DftGroup="X1DATE,H" Columns="X1DATE|X1DESC|X1STIM|X1ETIM"
    ::D.FUN.STD F(EXB;X1_X01_03;GET) 

    ::G.SEZ Pos(2)
    ::G.SUB.CAL Tit="*NONE"
    ::G.SET.CAL Ketchup="Yes" ShowAsWeek="Yes" StyCol="X1STCT" IniCol="X1STIM" FinCol="X1ETIM"  
    ::D.FUN.STD F(EXB;X1_X01_03;GET)