Low Code Ep 6

gistfile1.html

{% extends "base-recordview" %}

{% set resource_name="aircraft" %}

{% block header %}
<sp-split-row>
    <div slot="left">
  <sp-header style="margin-bottom: 0">
    <sp-column>
      <sp-heading size="2xl" level="1">
          {% block title %}
              <platform-component package-name="recordpage" name="RecordDefiner"></platform-component>
          {% endblock title %}
      </sp-heading>
        <sp-row style="--sp-row-spacing: var(--sp-spacing-3);">
          <sp-icon icon="details"></sp-icon>
          <span>Aircraft </span>
      </sp-row>
    </sp-column>
     </sp-header>
    </div>
    <div slot="right" style="text-align: right;">
        <sp-header style="margin-bottom: 0">
        <sp-heading>
    <platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<a href="/platform/page/aircraft-edit?uid={{UID}}"> <sp-button>Edit</sp-button>' }}"></platform-component>
    </sp-heading>
      </sp-header>
    </div>
  </sp-split-row>
{% endblock header %}

{% block body %}
<sp-tabs selected="{{_.queryParams.selectedtab}}">
  <platform-component package-name="nav" name="ReflectiveTabs" search-param="selectedtab"
  tabs="{{  [
              {"name":"details","label":"Details"},
              {"name":"aircraft-parts","label":"Aircraft Parts"},
              {"name":"fleet-assignments","label":"Fleet Assignments"}
            ]   |dump}}">
   </platform-component>


    <sp-tab-panel name="details" shown>
      <sp-responsive-columns>
      <div>
        <sp-heading size="base" style="margin-bottom: var(--sp-spacing-4)">Description</sp-heading>
     <sp-record-row>
    <span slot="label">Hyperspace</span>
    <platform-component package-name="recordpage" name="RecordFieldView" field-name="Hyperspace"></platform-component> 
  </sp-record-row>   
  <sp-record-row>
    <span slot="label"># of Seats</span>
    <platform-component package-name="recordpage" name="RecordFieldView" field-name="Seats"></platform-component> 
  </sp-record-row>
     <sp-record-row>
    <span slot="label">Release Date</span>
    <platform-component package-name="recordpage" name="RecordFieldView" field-name="ReleaseDate"></platform-component> 
  </sp-record-row>  
  <sp-record-row>
    <span slot="label">Last Service Date</span>
    <platform-component package-name="recordpage" name="RecordFieldView" field-name="LastService"></platform-component> 
  </sp-record-row>    
    </div>
  <div>
     <sp-record-row>
     <span slot="label">Branding</span>
        <platform-component package-name="recordpage" name="RecordTemplate" 
                            template="{{ '{% if Branding == "Rebellion" %}
<img src="https://starwarsblog.starwars.com/wp-content/uploads/2015/11/rebel-symbol-536x536.jpg" alt="Rebellion" width="100" height="100">
{% else %}
<img src="https://starwarsblog.starwars.com/wp-content/uploads/2016/02/imperialseal-536x536.jpg" alt="Empire" width="100" height="100">
{% endif %}' }}"></platform-component>
    </sp-record-row>     
    <sp-record-row>
      <span slot="label">Image</span>
      <platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<img src="{{Image}}" alt="{{name}}" width="200" height="200">' }}"></platform-component>
    </sp-record-row>
  </div>
  </sp-responsive-columns>
  </sp-tab-panel>
        
    <sp-tab-panel name="aircraft-parts">
 <sp-split-row>         
      <div slot = "right" style="text-align: right;">
        <sp-header style="margin-bottom: 0">
          <platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<a href="/platform/page/aircraft-parts-create"> <sp-button button-type="secondary">Add Part</sp-button>' }}"></platform-component>
        </sp-header>
      </div>
    </sp-split-row>

    <div style="padding-top: var(--sp-spacing-4)">
      <platform-component 
        package-name="recordpage"
        name="RecordTemplate"
        template= " {{ '{% if UID %}
              <platform-eventbus-scope closed>
                <platform-component package-name="listview" 
                 name="RelatedListView" 
                 resource-name="aircraft Parts"
                 foreign-key="AircraftId"
                 foreign-key-value="{{UID}}">
                </platform-component> 
              </platform-eventbus-scope>
              {% endif %}' }} " >
      </platform-component>
      </div>
    </sp-tab-panel> 
   
       <sp-tab-panel name="fleet-assignments">
        <sp-split-row>         
      <div slot = "right" style="text-align: right;">
        <sp-header style="margin-bottom: 0">
          <platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<a href="/platform/page/fleet-create"> <sp-button button-type="secondary">Add Fleet Assignment</sp-button>' }}"></platform-component>
        </sp-header>
      </div>
    </sp-split-row>
            <platform-component 
        package-name="recordpage"
        name="RecordTemplate"
        template=" {{ '{% if UID %}
              <platform-eventbus-scope closed>
                <platform-component package-name="listview" 
                 name="RelatedListView" 
                 resource-name="fleet"
                 foreign-key="AircraftId"
                 foreign-key-value="{{UID}}">
                </platform-component> 
              </platform-eventbus-scope>
              {% endif %}' }}" >
      </platform-component>
         </div>
    </sp-tab-panel> 
  </sp-tabs>

{% endblock body %}