Iterate related records, display images from string name of contentAsset in Community Cloud

Question

I'm very new to Salesforce, so my apologies if my approach is all wrong.

I want to display a list of buttons with images using a lightening component in Community Cloud. The list comes from records in an object related to the community partner account called "Apps".

I started by creating a component like so:

<aura:component>

<div aura:id="main">
<h2>My Apps</h2>
<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label"><!--*Select an app--></legend>
  <div class="slds-form-element__control">   
<aura:iteration items="{!v.arrvals}" var="r">
<a class="tooltip" href="/portal/s/app1" style="border-bottom:0">   
    <div class="slds-visual-picker slds-visual-picker_small">
      <input id="visual-picker-11" value="visual-picker-11" name="options" type="radio" />

      <label for="visual-picker-11">

        <span class="slds-visual-picker__figure slds-visual-picker__icon slds-align_absolute-center">
          <span class="slds-is-selected">
            <span class="slds-icon_container" title="description of icon when needed">
              <br/><img style="height:2.5em;opacity:1;" src="{!contentAsset.xerologocrop.1}" /><br/>&nbsp
              <span class="slds-assistive-text">Open App 1</span>
            </span>
          </span>
          <span class="slds-is-not-selected">
            <span class="slds-icon_container" title="description of icon when needed">
              <br/><img style="height:2.5em;opacity:1;" src="{!contentAsset.xerologocrop.1}" /><br/>&nbsp
              <span class="slds-assistive-text">Open App 1</span>
            </span>
          </span>
        </span>
        <span class="slds-visual-picker__body">
          <span class="slds-text-title" style="min-width: 8em; text-align:center">App 1</span>
          <span class="tooltiptext">Open App 1</span>
        </span>
      </label>
    </div>
</a>
</aura:iteration>
  </div>
</fieldset>
</div>

1) I'm not sure how to target the related list. I think I need a controller to query the DB and return the list, but not exactly sure what the next steps should be.

2) I'm not sure how to reference the contentAsset to display the image.

I've been doing some searching on lightening components, list iteration, and contentAsset, but finding myself more confused as I keep reading. Hopefully someone can help me! Thank you.

Answer 1

You're on the right track, just missing some pieces to keep moving forward.

You'll want to reference an apex controller which helps you with server side actions and surfaces the results to your lightning component. I am using the Account object in my example, in your case you would replace this with your custom object.

Create a class(ie appController.apxc) and on the first line of your app, reference it as the controller:

<aura:component controller='appController'>
<aura:attribute name="accounts" type="Account[]"/>

In this controller(appController.apxc), make a method which returns your list of Apps, with whichever fields you need to use as well. Replace accounts with whatever your custom object is:

public static Account[] getAccounts() { return [select id, name from accounts limit 5];

You will have to call this method from the Lightning component controller and set an attribute value within your lightning component:

doInit : function(component) {
      var action = component.get("c.getAccounts");

      action.setCallback(this, function(response) {
        if (response.getState() === "SUCCESS") {
            // Set account attribute to the response
            component.set('v.accounts', response.getReturnValue();
        } else if (response.getState() === "ERROR") {
            console.log('error');
        }
      });
      $A.enqueueAction(action);
    }

I wont flesh out the solution for you entirely because you're basically touching on many different interactions within the lightning framework, and there are great resources which can help you move further, so here are a few of those.

https://trailhead.salesforce.com/en/projects/quickstart-lightning-components

https://trailhead.salesforce.com/en/modules/lex_dev_lc_basics

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/intro_framework.htm