Introduced in v3.12 to support Continuing Education, this component is used on the Student Community, to display the short courses that are offered (Study Offerings).
For example, you can create a new page called 'Short Courses' on the Community Builder to place this component (navigate to Setup > Digital Experiences > All Sites).
This will act as a list of short courses (Study Offerings) displayed.
You can also place the RIO Ed - Short Course Filter component on top of the same page), for students to search / filter courses (as seen in the first diagram above).
See here for the other components and how they work in relation with one another.
Attribute Name |
API Name |
Description |
Object Name |
objectApiName |
Automatically bind the page's object name to the component variable. E.g. rio_ed__Study_Offering__c |
Object Filter Criteria |
predefinedFilters |
Enter criteria to define the default records to be shown on the short course wizard, e.g. rio_ed__Course_Offering_Status__c[=]Running;rio_ed__Default__c[=]true;hed__Section_ID__c[=]A, the SOQL query will fetch the records meeting the criteria. |
Object Filter Criteria Rule |
predinedCriteriaRule |
Enter criteria rule to define the default records to be shown on the short course wizard e.g. {0} AND ({1} OR {2}). |
Number of Records to Display |
noOfCourses |
Enter a value to show how many number of record card to be visible in a single view, i.e. on “show more” the same number will be added. |
Image Field Name |
imageApiName |
Api name of the image field to display. Add image of resolution 1500 x 300 pixels. |
Field 1 Name Field 2 Name Field 3 Name Field 4 Name |
field1ApiName field2ApiName field3ApiName field4ApiName |
To display record related details enter the API name of the field, e.g. StartDate__c or Description__c. |
Field 1 CSS Field 2 CSS Field 3 CSS Field 4 CSS |
field1Styling field2Styling field3Styling field4Styling |
To define the styling for this field go to Themes > Click on the dropdown > Click 'Edit CSS'. Add attributes, e.g. font-weight: 600;font-size: 14px;color: #984140;. Then, copy the name of the class and paste here, e.g. cardHeading2CSS. |
Sort By Date Field Name |
sortByDate |
Enter a DateTime API name, e.g. StartDate__c . This will help sorting the displayed records in ascending order. |
Sort By Text Field Name |
sortByText |
Enter a Text field API name, e.g. Name. This will help sorting the displayed records in alphabetical order. |
Sorting Picklist Label |
sortByValueLabel |
Enter the name which will be visible as label on the sorting combobox. E.g. Sort By. |
Show more button Label |
showMoreButtonLabel |
Enter the name which will be visible as label on the show more button. E.g. Show More. |
Filter Result Label |
filteredResultFoundHeading |
Enter the value which will be displayed as heading of filtered result. E.g. Result(s) found. |
Debug Mode |
enableDebugMode |
Enable debug mode. |