Description

The modules start page is the introductory and welcome page of all creation module tools. This floorplan offers a consistent starting point for creation workflows belonging to that tool, from which users can create new files or browse existing ones.

This floorplan is one of the defining characteristics of the modules framework.

Usage

Anatomy

Behavior & Interactions

Contextual help

Click on the "Learn More…" link in the page header to open the help center dialog, where relevant learning materials for that module tool can be accessed contextually.

Responsive Behavior

The module start page behaves responsively according to the space available when resizing the browser screen. The Recent Files table uses a UI5 table that has the proper behavior built in. If a custom table is used instead of the UI5 table, please ensure these responsive behaviors are honored.

Best Practices

Use a tabbed header to provide a convenient access to different, but related, object files belonging to the same tool. For example, the tool in the SAP Analytics Cloud houses related objects under the same tool instead of creating individual module tools for each one of them; such as:

It makes sense to place public dimensions, currency conversions, and points of interests in the Modeler tool because each of those objects files are used to build a model — even though they require independent object files of their own, and their own options for starting new files.

2
do
false
Use tabbed headers to separate different but related object files in a start page.
dont
false
Don't use tabbed headers for anchor navigation, or for filtering files types in the same start page.

Provide multiple options to start

Use the creation tiles to give the user multiple options for starting a new file. These options can make a workflow less rigid and allow users a higher degree of flexibility with how they will interact with a module tool.

Options could include different starting points for the same file type, or different types of files within the same creation module. For example:

Display the most recent 25 files

The module intro pages displays the most recently accessed files for that module tool – not all files ever created by it. All saved files from that module tool are stored in the central file repository, where additional security and file management features enhance the content strategy experience of a product. As such, do not save files to a module's intro screen, and avoid showing more than 25 files at a time.

Onboard and support

Think of the start page as a place to onboard users to a new tool they may have never used before. Ensure the page and its contents work together to guide the user through an unfamiliar space and workflow. The page header should have a name and a clear description of how its object files relate to the rest of the application.

Organize creation tiles by the most popular option first, followed by more unique or technical options. Ideally, the tiles should inform the suggested order or progression of the main workflow executed by the module. Where possible, offer ready-made templates to speed up the user’s flow, and ensure the Learn More link in the header can provide more support.

Specifications

<div> <div>Flag</div> <div>Component</div> <div>CSS</div> <div>Details</div> </div> <div> <div></div> <div></div> <div><a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2F%23%2Fapi%2Fsap.m.ObjectHeader">sap.m.ObjectHeader</a></div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2035266895">Object Header (Fiori3)</a></div> </div> <div> <div></div> <div></div> <div><a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2F%23%2Fapi%2Fsap.m.IconTabHeader">sap.m.IconTabHeader</a></div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2043268480">Icon Tab Bar (Fiori3)</a> "Inline mode" only.</div> </div> <div> <div></div> <div></div> <div>see below</div> <div>see below</div> </div> <div> <div></div> <div></div> <div><a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2F%23%2Fapi%2Fsap.m.Table">sap.m.Table</a></div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2036071095">Tables (Fiori3)</a></div> </div>

<div> <div>Flag</div> <div>Component</div> <div>CSS</div> <div>Details</div> </div> <div> <div></div> <div></div> <div> <p>width: 11.125rem;</p> <p>height: 5.375rem;</p> <p>border-radius: --sapElement_BorderCornerRadius; 0.25rem;</p> <p>background-color: --sapTile_Background;</p> <p>box-shadow: --sapContent_Shadow0;</p> <p>icon font: FAP-Icons</p> <p>icon size: 3rem;</p> <p>icon color: --sapContent_IconColor;</p> <p>Icon is center-aligned vertically and horizontally</p> </div> <div> <p>width: 178px;</p> <p>height: 86px;</p> <p>border-radius: 4px;</p> <p>background-color: #FFFFFF;</p> <p>box-shadow: 0 0 0 0.0625rem</p> <p>fade(#000000, 10), 0 0.125rem 0.5rem 0 fade(#000000, 10);</p> <p>icon font: FAP-Icons;</p> <p>icon size: 48px;</p> <p>icon color: #0854A0;</p> <p>Icon is center-aligned vertically and horizontally</p> </div> </div> <div> <div></div> <div></div> <div> <p>background-color: --sapTile_Hover_Background;</p> <p>box-shadow: none;</p> <p>border: 0.0625rem;</p> <p>--sapTile_Interactive_BorderColor;</p> </div> <div> <p>background-color: #F5F5F5;</p> <p>box-shadow: none;</p> <p>border: 1px; #B3B3B3;</p> </div> </div> <div> <div></div> <div></div> <div> <p>font-family: --sapFontFamily;</p> <p>font-size: -- sapFontSmallSize;</p> <p>font-weight: normal;</p> <p>color: --sapContent_LabelColor;</p> <p>line-height: 1.25rem; 20pt</p> <p>max-width: 11.125rem; 178px;</p> <p>text-align: center</p> <p>padding: 0.25rem; between tile and label</p> </div> <div> <p>font-family: 72;</p> <p>font-size: 12pt;</p> <p>font-weight: regular;</p> <p>color: #6A6D70;</p> <p>line-height: 20pt;</p> <p>max-width: 178px;</p> <p>text-align: center;</p> <p>padding: 4px; between tile and label</p> </div> </div> <div> <div></div> <div></div> <div>padding: 1.5rem; between all tiles</div> <div>padding: 24px; between tiles</div> </div> <div> <div></div> <div></div> <div> <p>font-family: --sapFontFamily;</p> <p>font-size: --sapFontSize;</p> <p>font-weight: normal;</p> <p>color: --sapTextColor;</p> <p>line-height: --sapContent_LineHeight;</p> <p>padding: 1rem; between group label and tile group</p> </div> <div> <p>font-family: 72;</p> <p>font-size: 14pt;</p> <p>font-weight: regular;</p> <p>color: #32363A;</p> <p>line-height: 1.4;</p> <p>padding: 16px; between group label and tile group</p> </div> </div> <div> <div></div> <div></div> <div> <p>width: 100%</p> <p>height: auto</p> <p>padding-top: 1.5rem;</p> <p>padding-left: 2rem;</p> <p>padding-right: 2rem;</p> <p>padding-bottom: 2rem;</p> <p>background-color: --sapBackgroundColor;</p> </div> <div> <p>width: 100%</p> <p>height: auto</p> <p>padding-top: 24px;</p> <p>padding-left: 32px;</p> <p>padding-right: 32px;</p> <p>padding-bottom: 32px;</p> <p>background-color: #F7F7F7;</p> </div> </div>

Accessibility

Learn about accessibility for start pages in the Modules Framework pattern guidelines.