<div class="row row-cards-pf center" *ngIf="connection">
  <div class="col-xs-4">
    <div class="card-pf">
      <div class="card-pf-body">
        <div class="icon">
          <span class="fa {{connection.icon}}"></span>
        </div>
        <div class="name">
          <h2 class="card-pf-title">{{connection.name}}</h2>
        </div>
        <div class="description">{{connection.description}}</div>
      </div>
    </div>
  </div>

  <div class="col-xs-8">
    <div class="card-pf">
      <h2 class="card-pf-title">Connection Fields</h2>
      <div class="card-pf-body">
        <div *ngIf="mode === 'view'">
          <div *ngFor="let field of getFormFields(connection)">
            <dl class="dl-horizontal">
              <dt>
                {{ field.name }}
              </dt>
              <dd>
                {{ field.value || "&lt;not set&gt;" }}
              </dd>
            </dl>

          </div>
        </div>
        <div *ngIf="mode === 'edit'">
          <p>edit></p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row row-cards-pf center" *ngIf="connection">
  <div class="col-xs-4">
    <div class="card-pf">
      <div class="card-pf-body">
        <div class="icon">
          <span class="fa {{connection.icon}}"></span>
        </div>
        <div class="name">
          <h2 class="card-pf-title">{{connection.name}}</h2>
        </div>
        <div class="description">{{connection.description}}</div>
      </div>
    </div>
  </div>

  <div class="col-xs-8">
    <div class="card-pf">
      <h2 class="card-pf-title">Connection Fields</h2>
      <div class="card-pf-body">
        <div *ngIf="mode === 'view'">
          <div *ngFor="let field of getFormFields(connection)">
            <dl class="dl-horizontal">
              <dt>
                {{ field.title || field.displayName || field.name }}
              </dt>
              <dd>
                {{ field.value || "&lt;not set&gt;" }}
              </dd>
            </dl>

          </div>
        </div>
        <div *ngIf="mode === 'edit'">
          <p>edit></p>
        </div>
      </div>
    </div>
  </div>
</div>

Use displayName for connection properties view
Use displayName for connection properties view
