# Sample Page Code ## Introduction Having a sample page for an App, specifically when it provides page macros, is a very useful thing. It gives you a quick way to check on the App’s functionality when you get Incident reports about it from your users or after you upgraded your Confluence version. This page describes a quick and easy way to create such a page and provides the complete code for it. ## Requirement In order to us this code you need the free “Confluence Source Editor” plugin from Atlassian installed on your site. You can find it here: It will add a little button to the page editor menu bar (top right) that allows you to directly edit the page’s source code.

## Steps to create the sample page 1. Create a new page. Give it a title and save it (the Confluence Source Editor only works on existing/saved pages) 2. Add the sample image (see below) as an attachment to the page. 3. Edit the page again 4. Click the Confluence Source Editor button. A new editor window will open on top. 5. Paste the sample code (see below). Tip: Expand the code and double-click in it. That will select all the code to copy to your clipboard. 6. Apply the source code editor 7. Save the page ## Sample Image

*Historical City gate of the German town Dülmen in the state of North Rhine Westfalia.* *Photo: (C) 2018 by George Lewe*\ \&#xNAN;*License: Open Source. You can use it for any commercial and noncommercial purpose.* ## Sample Code {% code lineNumbers="true" %} ```html

Bootstrap Alertbox

true My Alertbox danger

This is the body of the alertbox macro

Bootstrap Badge

100% warning

Button danger In a button warning

Bootstrap Button

Tooltip... https://www.lewe.com

Tooltip... danger https://www.lewe.com

Tooltip... success (3D) https://www.lewe.com

Bootstrap Button Group

info Button 1

info Button 2

info Button 3

info Button 4

Bootstrap Callout

This is the body of the Callout macro

Bootstrap Card

The Header The Footer info true 400px

City Gate of Dülmen

Bootstrap List Group

300px

Active Active list group item

Another list group item

And another list group item

Guess what... another list group item

true 1080px

Active Active list group item

Another list group item

And another list group item

Guess what... another list group item

Default Items	Active Items	Disabled Items
300px New page Lewe.com A normal item in default style https://www.lewe.com New page A normal item in danger style danger New page A normal item in dark style dark New page A normal item in info style info New page A normal item in light style light New page A normal item in primary style primary New page A normal item in secondary style secondary New page A normal item in success style success New page A normal item in warning style warning	300px Active New page Lewe.com An active item in default style https://www.lewe.com Active New page An active item in danger style danger Active New page An active item in dark style dark Active New page An active item in info style info Active New page An active item in light style light Active New page An active item in primary style primary Active New page An active item in secondary style secondary Active New page An active item in success style success Active New page An active item in warning style warning	300px Disabled New page Lewe.com A disabled item in default style https://www.lewe.com Disabled New page A disabled item in danger style danger Disabled New page A disabled item in dark style dark Disabled New page A normal item in info style info New page A disabled item in light style light Disabled New page A disabled item in primary style primary Disabled New page A disabled item in secondary style secondary Disabled New page A disabled item in success style success Disabled New page A disabled item in warning style warning

Bootstrap Jumbotron

This is the body of the Jumbotron macro

Bootstrap Panel

width:400px;

Text

false padding:8px;border-width:8px !important;width:400px; warning rounded light info false false

Heading 2

This macro adds a customizable Bootstrap panel to your page.

width:50px;height:50px;border-width:4px !important;text-align:center;font-size:32px; warning rounded-circle white danger

Bootstrap Progress Bar

44% true success

88% true true warning 400px

88% true true danger 400px

Start Date	End Date
2021-07-01	2021-12-31
2021-07-01 true 2021-12-31

Bootstrap Spacer

Bootstrap Spinner

Shape	Small	Normal	Medium	Large	As Button
Border	Small danger		Medium warning	Large info	Large danger true This page is currently being updated...
Growing	Growing Circle Small	Growing Circle success	Growing Circle Medium dark	Growing Circle Large danger	Growing Circle Large true

``` {% endcode %}