Adding List view content using App Framework Actions

Tweet Like

List view content is added inside the panel with unordered list item ul or ordered list item ol with class="list". With class="list", App Framework applies style to the list items.

        <div id="afui"> 
            <div id="content">
                <div class="panel" title="Listview"  id="listviewpage" selected="selected" >
                    <ul class="list" style="">
                        <li><a href="#detailitem">Item 1</a></li>
                        <li><a href="#detailitem">Item 2</a></li>
                        <li><a href="#detailitem">Item 3</a></li>
                    </ul>
                </div>
                <div id="detailitem" title="Item Details" class="panel">Item Description</div>
            </div>
           
            <div id="navbar">
                <a href="#listviewpage" id='navbar_home' class='icon home'>Home</a>
            </div>
        </div>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

Inset List:

To get a list with rounded corners and inset appearnce you can add class="inset" to the list (ul or ol). It gives a nicer look and it separates the list with other items on page.

        <div id="afui"> 
            <div id="content">
                <div class="panel" title="Listview"  id="listviewpage" selected="selected" >
                    <ul class="list inset" style="">
                        <li><a href="#detailitem">Item 1</a></li>
                        <li><a href="#detailitem">Item 2</a></li>
                        <li><a href="#detailitem">Item 3</a></li>
                    </ul>
                    <div>
                        <p>Additional items on the page go here</p>
                    </div>
                </div>
                <div id="detailitem" title="Item Details" class="panel">Item Description</div>
            </div>
           
            <div id="navbar">
                <a href="#listviewpage" id='navbar_home' class='icon home'>Home</a>
            </div>

        </div>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

List Dividers:

To organize the list items, you can use class="divider" on the list items (li). This list item is style differently with light gray color and the arrow closer to the item title to show the grouping clearly.

        <div id="afui"> 
            <div id="content">
                <div class="panel" title="Listview"  id="listviewpage" selected="selected" >
                    <ul class="list inset" style="">
                        <li class="divider"><a href="#">Books</a></li>
                        <li><a href="#detailitem">Classics</a></li>
                        <li><a href="#detailitem">Fictions</a></li>
                        <li class="divider"><a href="#">Videos</a></li>
                        <li><a href="#detailitem">Comdey</a></li>
                        <li><a href="#detailitem">Kids</a></li>
                    </ul>
                    <div>
                        <p>Additional items on the page go here</p>
                    </div>
                </div>
                <div id="detailitem" title="Item Details" class="panel">Item Description</div>
            </div>
           
            <div id="navbar">
                <a href="#listviewpage" id='navbar_home' class='icon home'>Home</a>
            </div>
        </div>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

To learn more about App Framework and links to other related articles, visit Getting Started with App Framework.