How to Add a Custom Icon to a List from Data Source (LFD)

Get Help
1

If you want to add a custom icon to the LFD, similar to the icons in the image below, please follow these steps. It is strongly recommended you have basic HTML experience to do this.

capture
capture364×741 31.9 KB

  1. Click on your LFD component in Edit mode of Studio to load the settings on the right.
  2. Scroll to the bottom and click 'Edit component's code'. *Please be extremely careful and only edit the code listed in this article. Editing other items could break this component.
  3. In the menu that opens on the right, first click the checkbox for 'I want to edit the HTML template'. Then click on the 'Detail template' tab below. This may already be done if you are using a Fliplet template.

    4. Capture2
    Capture21048×207 14.6 KB

  4. You will add a code block into this section. Where this is added will vary somewhat on the LFD type and if there was other code added. In a new Directory screen, it should be added on line 49 before the div tag. Please be careful adding this code as adding it to a different section may break the appearance.
  5. The code is below is an example, there will be several things to change. 
    {{#if originalData.[New Data]}}
  <div class="small-card-list-detail-button">
    <a href="{{originalData.[New Data]}}" target="_blank" class="focus-outline" tabindex="0" data-attribute="{{originalData.Office}}">
      <div class="small-card-list-detail-button-image"><span class="fa fa-plus"></span></div>
      <div class="small-card-list-detail-button-text">Add</div>
    </a>
  </div>
{{/if}}
    • Adjust the 'New Data' in both places of the example below to the name of the column in the data source.
    • Change the 'span' element's class to the Font Awesome icon you would like - https://fontawesome.com/v4.7/icons
    • Change the Text inside the final div ('Add' in this example) to the text you want below the icon.
    • Optionally add or change the data-attribute to something you will want to refer to if you are using query parameters.
  6. After adjusting the code, click Save & Close.

The button you’ve added in this will work correctly if it is a URL. If you want to open another screen in the app or take some other action, you will need to add Javascript to the screen (do NOT go back and add JS to the component!).
Test in Preview mode of Studio to ensure the button looks and functions correctly.