This tutorial will create a birthdate tracker App. First, create an App with the following fields:
|Field Type||Field Name||Field Code|
After activating the App, add a few records of sample data. Finally, navigate to the Views tab in the App settings. Create a new View with Custom as the view type. In the HTML code field, enter in the following HTML.
The custom view settings should look like below.
Save the custom view and update the App. Preparations for the tutorial are complete.
Display Data of All Records
If the created custom view is not displayed already, switch to the custom view from the views drop down menu. Although the record count shows there should be 5 records, the custom view is blank as shown below.
Make note of the series of numbers at the end of the URL. This is the view ID that will be used later.
Save and update the App. The custom view should now display the employee name and birthdate as shown below.
This section will explain the code step-by-step.
First, the app.record.index.show onload event is declared to determine when a record view is displayed. When the event is triggered, the code inside the event is run.
Then, an if statement is made that prevents the code following it from being run if the current view's View ID is not the specified View ID. This is necessary because in the following section, the div with the ID recordContent is retrieved, but if the div does not exist in the current view, an error is displayed in the console. To prevent this error, we will only run the code in the applicable view.
Next, a variable called recordContent is created to retrieve and hold the div element with the id of recordContent that was created in the custom view settings.
Then, a variable called records is created to hold the array of records retrieved by the event object.
This was a simple tutorial to explain how record data from an App can be accessed and displayed in a custom view. Beyond this, CSS may be applied to make the view more visibly appealing, and the data can also be filtered to show only certain records. As an example, here is a birthday view that will show those with birthdays this month with a cute, celebration design.