Fonteva would like to make a Directory of Contacts with the following requirements:

  1. This Directory should be publicly available. 
  2. The Directory should include a banner (Image 1) and logo image (Image 2).
  3. Front end users should be able to search this Directory by First Name, Last Name, Full Name, City, or State.
  4. Front end users should also be able to filter their results by Membership Type and Recent DB Applied For.
  5. Users should also be able to Sort by First Name, Last Name, or Full Name.
  6. The Default Sort should be by Personal Email and in Alphabetical Order (Top of results should be A, end of results should be Z).
  7. Only the Geo Location view should display, and there should be 5 results per page.
  8. The following 4 fields should be viewable in your results – First Name, Last Name, City, and State.
  9. For clarification purposes, they would like to have the Label visible for City and State.
  10. Fonteva would also like to have images enabled so that users can see pictures of the Contacts in the front end, and a stock placeholder image (Image 3) for Contacts that do not have images.
  11. Fonteva would like each record to have a Detail Page that consists of Full Name, City, State, and Personal Email.
  12. There should be an action button on the Detail page that will direct users to the Contact's LinkedIn page.
  13. The Detail Page should also allow for end users to edit the fields of their personal record's Detail Page.
  14. They would also like to have a map component.  
  15. Add an Enhanced List component on the Detail page for Badges that includes the following fields: Badge ID (Name), Badge Type, and Badge Description. No Images, Action Buttons, or Filter Criteria is necessary. Only 5 results should show per page in the Enhanced List component.

How would Fonteva Create this Directory? 

Prerequisites

  1. From the App Picker, [Select] Directories.
  2. From the Directories tab, [Click] the New button.
  1. Create a Directory of Contacts.
    1. From the Create a New Directory modal, in the Primary Object field [Search and Select] Contact. In the Display Name field, [Type] Fonteva Directory of Contacts and [Click] the Save and Continue button.
  2. This Directory should be publicly available. 
    1. In the Visibility section of the Display tab, [Confirm] that the Authenticated Users Only checkbox is unchecked. 

  3. The Directory should include a banner (Image 1) and logo image (Image 2).
    1. From the Display tab, next to the Banner Image field, [Click] the Browse button. [Select] Image 1 from the Media Library. 
    2. From the Crop Image modal, [Crop] the image as desired and [Click] the Save button.
    3. From the Display tab, next to the Logo Image field, [Click] the Browse button. [Select] Image 2 from the Media Library. 
    4. From the Crop Image modal, [Crop] the image as desired and [Click] the Save button.

  4. Front end users should be able to search this Directory by First Name, Last Name, Full Name, City, or State.
    1. From the Search, Filter, & Sort tabs, [Drag and Drop] the following fields from the Available Search Fields text box to the Selected Search Fields text box: 
      1. First Name
      2. Last Name
      3. Full Name
      4. Billing City
      5. State

  5. Front end users should also be able to filter their results by Membership  Type (A custom picklist field on Fonteva's environment's Contact records).
    1. From the Search, Filter, & Sort tabs, [Drag and Drop] the following fields from the Available Filter Fields text box to the Selected Field Fields text box: 
      1. Membership Type

  6. Users should also be able to Sort by First Name, Last Name, or Full Name.
    1. From the Search, Filter, & Sort tabs, [Drag and Drop] the following fields from the Available Sort Fields text box to the Selected Sort Fields text box: 
      1. First Name
      2. Last Name
      3. Full Name

  7. The Default Sort should be by Personal Email and in Alphabetical Order (Top of results should be A, end of results should be Z).
    1. From the Search, Filter, & Sort tab, from the Default Sort Field field drop down [Select] Personal Email. 
    2. From the Search, Filter, & Sort tab, from the Default Sort Field Order picklist [Select] ASC. 

  8. Only Geo Location view should display, and there should be 5 results per page.
    1. From the Display tab, from the Default View menu, [Select] Geo.
    2. From the Enhanced List tab, [Uncheck] the Enable Enhanced List View checkbox. 
    3. From the Table tab, [Uncheck] the Enable Table List checkbox. 
    4. From the GeoLocation tab, in the Display Results field, [Enter] 5. 
    5. From the GeoLocation tab, in the Longitude field [Select] Billing Longitude.
    6. From the GeoLocation tab, in the Latitude field [Select] Billing Latitude.

  9. The following 4 fields should be viewable in your results – First Name, Last Name, Billing City, and Billing State.
    1. From the Geo Location tab, [Enter] the following values into the corresponding fields:
      1. Position 1 (Name) - First Name
      2. Position 2 (Subtitle) - Last Name
      3. Position 3 - Billing City
      4. Position 4 - Billing State

  10. For clarification purposes, they would like to have the Label visible for Billing City and Billing State.
    1. From the Geo Location tab, next to the Position 3 and Position 4 fields, [Check] the Show Label checkboxes. 

  11. Fonteva would also like to have Images enabled in their search results so that users can see pictures of the Contacts in the front end, and a stock placeholder image (Image 3) for Contacts that do not have images.
    1. From the Geo Location tab, [Check] the Enable Image checkbox. 
    2. From the Geo Location tab, next to the Placeholder Image field, [Click] the Browse button. [Select] Image 3 from the Media Library. 
    3. From the Geo Location tab, in the Image Field field, [Select] Image. 

  12. Fonteva would like each record to have a Detail Page that consists of First Name, Last Name, Billing City, Billing State, and Personal Email.
    1. From the Detail tab, in the Name Field, [Select] Last Name.
    2. From the Detail tab, in the Detail Subtitle field, [Select] First Name.
    3. From the Detail tab, [Drag and Drop] the following fields from the Available Fields text box to the Selected Fields text box: 
      1. Billing City
      2. Billing State
      3. Personal Email

  13. There should be an action button on the Detail page that will direct users to the Contact’s  LinkedIn page.
    1. From the Detail tab, [Check] the Enable Action Button checkbox. 
    2. From the Detail tab, in the Action Button Field [Select] LinkedIn URL (custom field).
    3. From the Detail tab, in the Action Button Label field [Type] Click Here. 

  14. The Detail Page should also allow for end users to edit the fields on their personal record's Detail Page.
    1. From the Detail tab, [Check] the Enable Listing Profile Edit checkbox. 
    2. In the Profile Fields section of the Detail tab, [Drag and Drop] the following fields from the Available Fields text box to the Selected Fields text box: 
      1. First Name
      2. Last Name
      3. Billing City
      4. Billing State
      5. Personal Email

  15. They would also like to have a map component. 
    1. From the Detail tab, in the Longitude field [Select] Billing Longitude.
    2. From the Detail tab, in the Latitude field [Select] Billing Latitude.
    3. From the Related List tab, underneath the Default Components column, [Drag and Drop] Map into the Drag and Drop Lightning Component box. 

  16. Add an Enhanced List component on the Detail page for Badges that includes the following fields: Badge ID (Name), Badge Type, and Badge Description. No images, action buttons, or filter criteria is necessary. Only 5 results should show per page in the Enhanced List component.
    1. From the Related List tab, underneath the Default Components column, [Drag and Drop] Enhanced List into the Drag and Drop Lightning Component box. 
    2. On the previously created Enhanced List Lightning Component, [Click] the Edit (pencil) button. 
    3. From the Enhanced List Lightning Component Edit screen, in the Object field, [Select] Badge-- OrderAPI__Badge__r.
    4. From the Enhanced List Lightning Component Edit screen, [Enter] the following values into the corresponding fields:
      1. Position 1 (Name) - Badge ID
      2. Position 2 (Subtitle) - Badge Type
      3. Position 3 - Badge Description
    5. From the Enhanced List Lightning Component Edit screen, in the Display Results field, [Enter] 5. 
    6. From the Enhanced List Lightning Component Edit screen, [Click] the Save button. 

Final Step

From the top-right corner of the Directory Builder, [Hover] your mouse over the downward pointing arrow next to the Save button. [Click] Save and Exit.