Lesson 14: Add and Design Event Card Component

Welcome to Lesson 14 of our SmartUX Demo Application series. This guide will walk you through the process of adding and designing an Event Card Component in the Training. Follow these engaging instructions to create a visually appealing and functional event card for your platform.

Upon successful completion of the specified steps, the result will reflect the desired outcome as shown in the image below:

• Click on the Add Component.
• This will open a Select Program window with a List of Web Client Programs from Magic xpa.

• As we are adding a component for Event Card, Select the EventCard Program.
• Click on the Next button.
• This will take you to the Component Template screen.

• Select Blank Template as the Component Template for the “EventCard” program.
• Click on the Finish button.

• Click on the Expanded View icon to enable Expanded View.
• Click on the View Code icon to open a section below the Canvas to see the HTML source code of dropped Widgets.

• Select the Container widget on the Canvas.
• Click on the gear icon associated with the Form Name property for mapping.

• Here on the Select Data Model window, select “EventCard” Form Data Model.
• Click on the Save button to map.

• In the Class property of Container fill “allSideSpacing-containers”.

• Drag and drop the Row widget inside the Container.
• In the Class property of the Row widget fill “smallSpacingBottomOutsideContainer”.

• Inside the last dropped Row widget drop two columns one after another.

• Drag and drop the Heading H4 inside the first Column widget.
• In the properties sheet of the Heading H4 widget, input “Event Information” in the Text property.
• In the Class property of Heading input “horizontal-line-bottom”.

• Drag and drop the Heading H4 inside the second Column widget.
• In the properties sheet of the Heading H4 widget, input “Attendees” in the Text property.
• In the Class property of Heading input “horizontal-line-bottom”.

• As shown on the screen drag and drop the four Row widgets below the “Event Information” Heading inside the first Column.

• As shown on the screen drag and drop the two Row widgets below the “Attendees” Heading inside the second Column.

• As we dropped Four Rows under the Event Information Heading.
• Inside these four Rows drag and drop two columns for each Row as shown on screen.

• As we dropped Two Rows under the Attendees Heading.
• Inside these two Rows drag and drop one column for each Row as shown on screen.

• Drag and drop the Row widget inside the Form Container.
• Below is the first Row as shown on the screen.
• In the Properties Sheet of the Row widget, fill in the Class property with “horizontal-line-bottom”.

• Inside the last dropped Row widget, drop a Column widget.
• As shown on screen.

• Drag and drop the Row widget below the last dropped Row.
• Drop it inside the Form Container.

• Inside the last dropped Row widget, drop a Column widget.
• As shown on screen.

• Drag and drop the Input widget inside the first Row first Column under the Event Information Heading.
• In the Properties Sheet of the Input widget, click on the gear icon associated with the Data property.
• This will open a window to Select Data Model.

• Click on the Event_ID data model to map it with the Input widget.
• Click on the Save button to confirm mapping.

• In the properties sheet of the Input, fill in the Label property with “Event ID” text.
• In the Display Logic section, change the Appearance property to “Outline”.

• Drag and drop the Select Input widget inside the first Row second Column under the Event Information Heading.
• In the Properties Sheet of the Input widget, click on the gear icon associated with the Data property.
• This will open a window to Select Data Model.

• Click on the ComboEventType data model to map it with the Select Input widget.
• Click on the Save button to confirm mapping.

• In the properties sheet of the Select Input, fill in the Label property with “Event Type” text.
• In the Display Logic section, check the Required property.

• Drag and drop the Input widget inside the second Row first Column under the Event Information Heading.
• In the Properties Sheet of the Input widget, click on the gear icon associated with the Data property.
• This will open a window to Select Data Model.

• Click on the Event_Name data model to map it with the Input widget.
• Click on the Save button to confirm mapping.

• In the properties sheet of the Input, fill in the Label property with “Event Name” text.
• In the Display Logic section, check the Required property.
• In the Display Logic section, change the Appearance property to “Outline”.

• Drag and drop the Select Input widget inside the second Row second Column under the Event Information Heading.
• In the Properties Sheet of the Select Input widget, click on the gear icon associated with the Data property.
• This will open a window to Select Data Model.

• Click on the ComboEventLocation data model to map it with the Select Input widget.
• Click on the Save button to confirm mapping.

• In the properties sheet of the Select Input, fill in the Label property with “Event Location” text.
• In the Display Logic section, check the Required property.

• Drag and drop the Date widget inside the third Row first Column under the Event Information Heading.
• Now change Template Variable #Date and its references from the Template section for HTML code.
  • Change [matDatepicker]=”Date” to [matDatepicker]=”StartDate” from Input tag.
  • Change [for]=”Date” to [for]=”StartDate” from mat-datepicker-toggle tag.
  • Change #Date to #StartDate from mat-datepicker tag.
  • Note: This modification includes a unique template variable for each widget to prevent errors or conflicts arising from identical template variable names.
• In the Properties Sheet of the Date widget, click on the gear icon associated with the Data property.
• This will open a window to Select Data Model.

• Click on the Start_Date data model to map it with the Date widget.
• Click on the Save button to confirm mapping.

• In the properties sheet of the Date, fill in the Label property with “Start Date” text.
• In the Display Logic section, check the Required property.

• Drag and drop the Date widget inside the third Row second Column under the Event Information Heading.
• Now change Template Variable #Date and its references from the Template section for HTML code.
  • Change [matDatepicker]=”Date” to [matDatepicker]=”EndDate” from Input tag.
  • Change [for]=”Date” to [for]=”EndDate” from mat-datepicker-toggle tag.
  • Change #Date to #EndDate from mat-datepicker tag.
  • Note: This modification includes a unique template variable for each widget to prevent errors or conflicts arising from identical template variable names.
• In the Properties Sheet of the Date widget, click on the gear icon associated with the Data property.
• This will open a window to Select Data Model.

• Click on the End_Date data model to map it with the Date widget.
• Click on the Save button to confirm mapping.

• In the properties sheet of the Date, fill in the Label property with “End Date” text.
• In the Display Logic section, check the Required property.

• Drag and drop the Time widget inside the fourth Row first Column under the Event Information Heading.
• In the Properties Sheet of the Time widget, click on the gear icon associated with the Data property.
• This will open a window to Select Data Model.

• Click on the EventStartTime data model to map it with the Time widget.
• Click on the Save button to confirm mapping.

• In the properties sheet of the Date, fill in the Label property with “Start Time” text.
• In the Display Logic section, change the Appearance to Outline.
• Check the Required property.

• Drag and drop the Time widget inside the fourth Row second Column under the Event Information Heading.
• In the Properties Sheet of the Time widget, click on the gear icon associated with the Data property.
• This will open a window to Select Data Model.

• Click on the Event_Information_End_Time data model to map it with the Time widget.
• Click on the Save button to confirm mapping.

• In the properties sheet of the Date, fill in the Label property with “End Time” text.
• In the Display Logic section, change the Appearance to Outline.
• Check the Required property.

• Drag and drop the Input widget inside the First Row first Column under the Attendees Heading.
• In the Properties Sheet of the Input widget, click on the gear icon associated with the Data property.
• This will open a window to Select Data Model.

• Click on the Minimum_Attendees data model to map it with the Input widget.
• Click on the Save button to confirm mapping.

• In the properties sheet of the Input, fill in the Label property with “Minimum Attendees” text.
• In the Display Logic section, check the Required property.
• Change the Appearance property to Outline.

• Drag and drop the Input widget inside the Second Row first Column under the Attendees Heading.
• In the Properties Sheet of the Input widget, click on the gear icon associated with the Data property.
• This will open a window to Select Data Model.

• Click on the Maximum_Attendees data model to map it with the Input widget.
• Click on the Save button to confirm mapping.

• In the properties sheet of the Input, fill in the Label property with “Maximum Attendees” text.
• In the Display Logic section, check the Required property.
• Change the Appearance property to Outline.

• Drag and drop the Accordion Container widget inside the Second Row Column under the Form Container.
• As shown in the screen.

• Drag and drop the Accordion Item inside the Accordion Container.

• Click on the Accordion Button.
• This is the Accordion Item Header.
• In the properties sheet of the Accordion Item Header, change the Label property to “Registered Members” under the Labels & Icons section.

• Drag and drop the Subform widget inside the Accordion Item Container.
• In the properties sheet of the Subform widget, click on the gear icon associated with the Data property.
• This will open a window to Select Data Model.

• Click on the SfRegisteredMembers data model to map it with the Subform widget.
• Click on the Save button to confirm mapping.

• Click on the Column inside the last Row of the Form container shown on the screen.
• In the properties sheet of the Column, fill in the Class property with “align-items-end” and “smallSpacingTopOutsideContainer”.

• Drag and drop the Button widget inside the last Row Column.
• In the properties sheet of the Button widget, Click on the gear icon associated with the Data Mapping property.
• This will open the window to Select Data Model.

• Click on the btnSave data model to map it with the Button widget.
• Click on the Save button to confirm mapping.

• In the properties sheet of the Button, under the Display Logic section change the Button Style property to Raised Button.
• In the Disable property fill in the field with “screenFormGroup.invalid”.
• Under the Label & Icons section, fill in the Label property field with “Save”.
• Under the Styling Overrides section, fill in the Class property with “savebutton”.

• Drag and drop another Button widget inside the last Row Column.
• In the properties sheet of the Button widget, Click on the gear icon associated with the Data Mapping property.
• This will open the window to Select Data Model.

• Click on the btnQuit data model to map it with the Button widget.
• Click on the Save button to confirm mapping.

• In the properties sheet of the Button, under the Display Logic section change the Button Style property to Raised Button.
• Change the Button Color property to “Warn”.
• Under the Label & Icons section, fill in the Label property field with “Cancel”.

• Click on the Save button to save all the steps performed during this lesson.

• Once disable the View Code and Expanded View you will see the the designed component.
• Let’s switch to Live Preview.

• From the sidebar navigation menu navigate to Events.
• Click on the Edit button or Create Event button to see the Event Card component in Live Preview.

• This is the result of the steps you have performed while designing the component.
• The Registered Members Accordion does not show anything as we have not added a component for that Subform.
• Let’s design the Registered Members component next lesson.

In this guide, you will learn how to efficiently add and design an Event Card component. Follow the detailed instructions to streamline the process effortlessly and enhance your understanding of creating event cards within the application. From setting dates and times to customizing buttons, you now have the tools to create engaging event cards for your training materials. From selecting the EventCard option to filling in event details, this guide ensures you create a comprehensive and visually appealing event card component.