WebApp Layouts

 Last Edited: Jul 02, 2019

Once you have imported or created your WebApps, you can access WebApp layouts using Code Editor, which is within Site Settings in the left-hand Menu.

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 here. Right click on 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 here. Right click on the list folder to do this.

Once you have saved custom Layouts in these folders, Toolbox will automatically find them and off 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>

If you have any questions, get in touch via our Intercom in the bottom right-hand corner of your Admin and we'll be happy to help.