<a href="/wiki/display/CPDesign/Tool+Layout">Tool Layout</a>
- Created by Milanov, Kalin, last modified by Kirichev, Alexander on Jan 25, 2024
Table of Contents
Overview
The Tool Layout is an essential part of most BTP tools. The layout combines the Tool Header and the Navigation components in one consistent structure. In addition, it provides necessary interaction between the two components out of the box.
FIORITECHP1-26798 - Getting issue details... STATUS
Look and Feel
<p><div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/layouts/layouts/tool-layout/media1_1fc304c597cf58ded4fde778de6e528e47833696c.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1fc304c597cf58ded4fde778de6e528e47833696c.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1fc304c597cf58ded4fde778de6e528e47833696c.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/layouts/layouts/tool-layout/media%5C_1fc304c597cf58ded4fde778de6e528e47833696c.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/layouts/layouts/tool-layout/media_1fc304c597cf58ded4fde778de6e528e47833696c.png?width=750&format=png&optimize=medium</a>" width="2880" height="1800"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/layouts/layouts/tool-layout/media1_1671c4ba1ed56fa9795e41f3b4d7a3ef076762282.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1671c4ba1ed56fa9795e41f3b4d7a3ef076762282.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1671c4ba1ed56fa9795e41f3b4d7a3ef076762282.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/layouts/layouts/tool-layout/media%5C_1671c4ba1ed56fa9795e41f3b4d7a3ef076762282.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/layouts/layouts/tool-layout/media_1671c4ba1ed56fa9795e41f3b4d7a3ef076762282.png?width=750&format=png&optimize=medium</a>" width="2880" height="1800"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/layouts/layouts/tool-layout/media1_1fbc2d5c7b317a3d727b97e3b833c44f85d513042.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1fbc2d5c7b317a3d727b97e3b833c44f85d513042.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1fbc2d5c7b317a3d727b97e3b833c44f85d513042.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/layouts/layouts/tool-layout/media%5C_1fbc2d5c7b317a3d727b97e3b833c44f85d513042.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/layouts/layouts/tool-layout/media_1fbc2d5c7b317a3d727b97e3b833c44f85d513042.png?width=750&format=png&optimize=medium</a>" width="2880" height="1800"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/layouts/layouts/tool-layout/media1_10c7e361b761af98166f0c6f81ea65ef6d6ef2ca1.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_10c7e361b761af98166f0c6f81ea65ef6d6ef2ca1.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_10c7e361b761af98166f0c6f81ea65ef6d6ef2ca1.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/layouts/layouts/tool-layout/media%5C_10c7e361b761af98166f0c6f81ea65ef6d6ef2ca1.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/layouts/layouts/tool-layout/media_10c7e361b761af98166f0c6f81ea65ef6d6ef2ca1.png?width=750&format=png&optimize=medium</a>" width="2880" height="1800"> </picture>3 </div> </div></p>
Anatomy
<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div><strong>A</strong></div> <div><strong>Tool Header</strong></div> <div>The Tool Header is always present and is a top-aligned UI element that contains global actions and controls navigation. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FTool%2BHeader%2BBar">Tool Header Bar</a> for full specifications.</div> </div> <div> <div><strong>B</strong></div> <div><strong>Navigation</strong></div> <div>The Navigation and all of its variants. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation">Navigation</a> for full specifications.</div> </div> <div> <div><strong>C</strong></div> <div><strong>Content Area</strong></div> <div>An empty container area that can hold any content.</div> </div>
Desktop Specification
Component Variables
Specification
<div> <div></div> <div>Element</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div><strong><br></strong></div> <div><strong>Tool Layout</strong></div> <div> <p>padding: 0.5rem 0.5rem 0 0.5rem;</p> <p>background: var(--sapToolLayout_Background)</p> </div> </div> <div> <div><strong>A</strong></div> <div><strong>Tool Header</strong></div> <div><strong>Horizontal Navigation</strong><br>The Horizontal Navigation is placed inside the Tool Header as a second row of content.</div> </div> <div> <div><strong>B</strong></div> <div><strong>Navigation</strong></div> <div> <p><strong>Vertical Navigation (Expanded and Snapped)</strong><br>margin-top: 0.5rem;<br>margin-right: 0.5rem;</p> <p><strong>Vertical Navigation (Popup)</strong><br>margin: 0;</p> <p><strong>Horizontal Navigation</strong><br>margin: 0;</p> </div> </div> <div> <div><strong>C</strong></div> <div><strong>Content Area</strong></div> <div> <p>width: 100%;<br>height: 100%;</p> <p>margin-top: 0.5rem;<br>border-radius: 0.5rem 0.5rem 0 0;<br>box-shadow: var(--sapContainer_Shadow1);</p> <p><strong>Page Background Design</strong><br>standard: var(--sapBackgroundColor); <strong>← Default</strong><br>solid: var(--sapBackgroundColor);<br>transparent: transparent, box-shadow: none;<br>list: var(--sapGroup_ContentBackground);</p> </div> </div>
Tablet Specification
Tablet specification depicts only deltas from the desktop specification.
<div> <div></div> <div>Element</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div><strong><br></strong></div> <div><strong>Tool Layout</strong></div> <div>padding: 0.5rem;</div> </div> <div> <div><strong>A</strong></div> <div><strong>Tool Header</strong></div> <div>No Deltas.</div> </div> <div> <div><strong>B</strong></div> <div><strong>Navigation</strong></div> <div>No Deltas.</div> </div> <div> <div><strong>C</strong></div> <div><strong>Content Area</strong></div> <div>border-radius: 0.5rem;</div> </div>
Phone Specification
<div> <div></div> <div>Element</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div><strong><br></strong></div> <div><strong>Tool Layout</strong></div> <div>padding: 0.25rem;</div> </div> <div> <div><strong>A</strong></div> <div><strong>Tool Header</strong></div> <div>No Deltas.</div> </div> <div> <div><strong>B</strong></div> <div><strong>Navigation</strong></div> <div>No Deltas.</div> </div> <div> <div><strong>C</strong></div> <div><strong>Content Area</strong></div> <div>margin-top: 0.25rem;</div> </div>