Introduction


Once you have imported or created your WebApps, you can access WebApp layouts.

File Structure

Code Editor can be found within Site Manager in the left-hand Menu. Use the screenshot below to help you find the WebApp you want to add a custom layout to:

You will find a default Detail Layout stored within:
 

layouts/webapps/webapp name/detail/


and you should create any custom detail layouts for the WebApp beside it. Click on the button on the right of the detail folder to do this.

You will find a default List Layout stored within:

 layouts/webapps/webapp name/list/ 

and you should create any custom list layouts for the WebApp beside it. Click on the button on the right of the list folder to do this.

Once you have saved custom Layouts in these folders, Toolbox will automatically find them and offer you the option of selecting them when outputting WebApps on a page.

Copying over Layouts

Copy the content of a WebApp Layout from your BC site, create the layout within the correct detail or list folder and paste it in. Now all that's left to do is update the liquid to match the Siteglide fields. You can use the "Insert field" dropdown along the top of Code Editor to automatically output the liquid for each field.

Example BC Layout:

<div class="medium-6 columns end portfolioList">
  <div class="ministry-box box-inner">
    <div class="row">
      <div class="medium-12 columns">
        <a href="{tag_itemurl_withhost}">
          <img src="{tag_list - image_value}">
        </a>
      </div>
      <div class="medium-12 columns portfolioListText">
        <h3>{tag_name}</h3>
        <span class="portfolioListDescription">{tag_list - description}</span>
        <p class="portfolioListButton">
          <a href="{tag_itemurl_withhost}" class="button tiny">{tag_link text}</a>
        </p>
      </div>
    </div>
  </div>
</div>


Example Siteglide Layout:

<div class="medium-6 columns end portfolioList">
  <div class="ministry-box box-inner">
    <div class="row">
      <div class="medium-12 columns">
        <a href="{{this['full_slug']}}">
        <img src="{{this['List - Image'] | asset_url}}" alt="{{item.properties.name}}" />
        </a>
      </div>
      <div class="medium-12 columns portfolioListText">
        <h3>{{this['name']}}</h3>
        <span class="portfolioListDescription">{{this['List - Description']}}</span>
        <p class="portfolioListButton">
          <a href="{{this['slug']}}" class="button tiny">{{this['Link Text']}}</a>
        </p>
      </div>
    </div>
  </div>
</div>
Did this answer your question?