Homepage Personalisation

<p><div> <div>Onscreen Customize Menu</div> <div>Onscreen Edit State</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/homepage-personalization/media1_1a5d0f66112c99bea3400d2329aeda22dd180ed11.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1a5d0f66112c99bea3400d2329aeda22dd180ed11.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1a5d0f66112c99bea3400d2329aeda22dd180ed11.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/patterns/homepage/homepage-personalization/media%5C_1a5d0f66112c99bea3400d2329aeda22dd180ed11.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/homepage-personalization/media_1a5d0f66112c99bea3400d2329aeda22dd180ed11.png?width=750&format=png&optimize=medium</a>" width="5120" height="2880"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/homepage-personalization/media1_1863b52137c1089e729de5ca02f5ff2224f0d9a35.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1863b52137c1089e729de5ca02f5ff2224f0d9a35.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1863b52137c1089e729de5ca02f5ff2224f0d9a35.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/patterns/homepage/homepage-personalization/media%5C_1863b52137c1089e729de5ca02f5ff2224f0d9a35.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/homepage-personalization/media_1863b52137c1089e729de5ca02f5ff2224f0d9a35.png?width=750&format=png&optimize=medium</a>" width="5120" height="2880"> </picture> </div> </div></p>

<p><div> <div>Dialog User Settings Menu</div> <div>Overview – Dialog – Homepage Personalization Dialog</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/homepage-personalization/media1_1d18ab94307b313cf3a9378752c65cce8a6edda95.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1d18ab94307b313cf3a9378752c65cce8a6edda95.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1d18ab94307b313cf3a9378752c65cce8a6edda95.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/patterns/homepage/homepage-personalization/media%5C_1d18ab94307b313cf3a9378752c65cce8a6edda95.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/homepage-personalization/media_1d18ab94307b313cf3a9378752c65cce8a6edda95.png?width=750&format=png&optimize=medium</a>" width="5120" height="2880"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/homepage-personalization/media1_1c26566b7f7c6913aec2f62dd889f9e93e4776769.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1c26566b7f7c6913aec2f62dd889f9e93e4776769.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1c26566b7f7c6913aec2f62dd889f9e93e4776769.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/patterns/homepage/homepage-personalization/media%5C_1c26566b7f7c6913aec2f62dd889f9e93e4776769.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/homepage-personalization/media_1c26566b7f7c6913aec2f62dd889f9e93e4776769.png?width=750&format=png&optimize=medium</a>" width="5120" height="2880"> </picture> </div> </div></p>

<p><div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>High Contrast White</div> <div>High Contrast Black</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/homepage-personalization/media1_1b64132e336ebb9449cbd153e32679948e6ba52e3.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1b64132e336ebb9449cbd153e32679948e6ba52e3.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1b64132e336ebb9449cbd153e32679948e6ba52e3.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/patterns/homepage/homepage-personalization/media%5C_1b64132e336ebb9449cbd153e32679948e6ba52e3.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/homepage-personalization/media_1b64132e336ebb9449cbd153e32679948e6ba52e3.png?width=750&format=png&optimize=medium</a>" width="5120" height="2880"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/homepage-personalization/media1_103d281640711af11cff82e40f32f1a007b682f16.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_103d281640711af11cff82e40f32f1a007b682f16.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_103d281640711af11cff82e40f32f1a007b682f16.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/patterns/homepage/homepage-personalization/media%5C_103d281640711af11cff82e40f32f1a007b682f16.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/homepage-personalization/media_103d281640711af11cff82e40f32f1a007b682f16.png?width=750&format=png&optimize=medium</a>" width="5120" height="2880"> </picture> </div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/homepage-personalization/media1_1cc0b11fd2d9d2c49c428519c9112ef2b68ad096a.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1cc0b11fd2d9d2c49c428519c9112ef2b68ad096a.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1cc0b11fd2d9d2c49c428519c9112ef2b68ad096a.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/patterns/homepage/homepage-personalization/media%5C_1cc0b11fd2d9d2c49c428519c9112ef2b68ad096a.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/homepage-personalization/media_1cc0b11fd2d9d2c49c428519c9112ef2b68ad096a.png?width=750&format=png&optimize=medium</a>" width="5120" height="2880"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/homepage-personalization/media1_191656ef1bad155196e3a9828ad363b28d9b4f0a6.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_191656ef1bad155196e3a9828ad363b28d9b4f0a6.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_191656ef1bad155196e3a9828ad363b28d9b4f0a6.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/patterns/homepage/homepage-personalization/media%5C_191656ef1bad155196e3a9828ad363b28d9b4f0a6.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/homepage-personalization/media_191656ef1bad155196e3a9828ad363b28d9b4f0a6.png?width=750&format=png&optimize=medium</a>" width="5120" height="2880"> </picture> </div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/homepage-personalization/media1_14a77b54dce7b7f793090e0589ee68c648eec08c0.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_14a77b54dce7b7f793090e0589ee68c648eec08c0.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_14a77b54dce7b7f793090e0589ee68c648eec08c0.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/patterns/homepage/homepage-personalization/media%5C_14a77b54dce7b7f793090e0589ee68c648eec08c0.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/homepage-personalization/media_14a77b54dce7b7f793090e0589ee68c648eec08c0.png?width=750&format=png&optimize=medium</a>" width="5120" height="2880"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/homepage-personalization/media1_153848655fa15ec22b23f846b56a46f8f5bbbe8c2.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_153848655fa15ec22b23f846b56a46f8f5bbbe8c2.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_153848655fa15ec22b23f846b56a46f8f5bbbe8c2.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/patterns/homepage/homepage-personalization/media%5C_153848655fa15ec22b23f846b56a46f8f5bbbe8c2.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/homepage-personalization/media_153848655fa15ec22b23f846b56a46f8f5bbbe8c2.png?width=750&format=png&optimize=medium</a>" width="5120" height="2880"> </picture> </div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/homepage-personalization/media1_110d4be7b612b60abfd4611b5dc14c664fce73a60.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_110d4be7b612b60abfd4611b5dc14c664fce73a60.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_110d4be7b612b60abfd4611b5dc14c664fce73a60.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/patterns/homepage/homepage-personalization/media%5C_110d4be7b612b60abfd4611b5dc14c664fce73a60.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/homepage-personalization/media_110d4be7b612b60abfd4611b5dc14c664fce73a60.png?width=750&format=png&optimize=medium</a>" width="5120" height="2880"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/homepage-personalization/media1_1dcf636e24bc5eab050c888d37db2bb29e19b7713.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1dcf636e24bc5eab050c888d37db2bb29e19b7713.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1dcf636e24bc5eab050c888d37db2bb29e19b7713.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/patterns/homepage/homepage-personalization/media%5C_1dcf636e24bc5eab050c888d37db2bb29e19b7713.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/homepage-personalization/media_1dcf636e24bc5eab050c888d37db2bb29e19b7713.png?width=750&format=png&optimize=medium</a>" width="5120" height="2880"> </picture> </div> </div></p>

<p><div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>High Contrast White</div> <div>High Contrast Black</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/homepage-personalization/media1_18040592477090823e4edb70ef50263e19201aca6.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_18040592477090823e4edb70ef50263e19201aca6.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_18040592477090823e4edb70ef50263e19201aca6.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/patterns/homepage/homepage-personalization/media%5C_18040592477090823e4edb70ef50263e19201aca6.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/homepage-personalization/media_18040592477090823e4edb70ef50263e19201aca6.png?width=750&format=png&optimize=medium</a>" width="5120" height="2880"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/homepage-personalization/media1_194998e622833bda8c6394a9e2d1ad5295d22c5c7.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_194998e622833bda8c6394a9e2d1ad5295d22c5c7.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_194998e622833bda8c6394a9e2d1ad5295d22c5c7.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/patterns/homepage/homepage-personalization/media%5C_194998e622833bda8c6394a9e2d1ad5295d22c5c7.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/homepage-personalization/media_194998e622833bda8c6394a9e2d1ad5295d22c5c7.png?width=750&format=png&optimize=medium</a>" width="5120" height="2880"> </picture> </div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/homepage-personalization/media1_1df1d7be45aeef36bd8a0a55a1a510a279553c763.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1df1d7be45aeef36bd8a0a55a1a510a279553c763.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1df1d7be45aeef36bd8a0a55a1a510a279553c763.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/patterns/homepage/homepage-personalization/media%5C_1df1d7be45aeef36bd8a0a55a1a510a279553c763.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/homepage-personalization/media_1df1d7be45aeef36bd8a0a55a1a510a279553c763.png?width=750&format=png&optimize=medium</a>" width="5120" height="2880"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/homepage/homepage-personalization/media1_1a7bde94ecba752060ec605c5c662670730a7f0a4.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1a7bde94ecba752060ec605c5c662670730a7f0a4.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1a7bde94ecba752060ec605c5c662670730a7f0a4.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/patterns/homepage/homepage-personalization/media%5C_1a7bde94ecba752060ec605c5c662670730a7f0a4.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/homepage/homepage-personalization/media_1a7bde94ecba752060ec605c5c662670730a7f0a4.png?width=750&format=png&optimize=medium</a>" width="5120" height="2880"> </picture> </div> </div> <div> <div></div> <div></div> </div> <div> <div></div> <div></div> </div></p>

<div> <div></div> <div>Name</div> <div>Description</div> </div> <div> <div>A</div> <div>Edit (Floating Action Button)</div> <div>Floating Action button that activates the Edit Homepage mode</div> </div> <div> <div>B</div> <div>Customize (Floating Action Button)</div> <div>Floating Action button that activates a Popover allowing users to show or hide specific sections</div> </div> <div> <div>C</div> <div>Popover Menu</div> <div>Popover Menu containing the list of section that user can show or hide on their Homepage</div> </div>

<div> <div></div> <div>Name</div> <div>Description</div> </div> <div> <div>A</div> <div>Section</div> <div>Section containing widgets</div> </div> <div> <div>B</div> <div>Section Header</div> <div>Section Header with actions relevant to Section in header</div> </div> <div> <div>C</div> <div>Actions</div> <div>Actions button – contains actions related to Sections</div> </div> <div> <div>D</div> <div>Move Section up</div> <div>Button to move a Section above another Section</div> </div> <div> <div>E</div> <div>Move Section down</div> <div>Button to move a Section below another Section</div> </div> <div> <div>F</div> <div>Widget</div> <div>Widget / Card / Tile</div> </div> <div> <div>G</div> <div>Save</div> <div>Save button – Saves current state of Section and Widgets in Section</div> </div> <div> <div>H</div> <div>Reset</div> <div>Reset button – Resets back to state when changes were made</div> </div> <div> <div>I</div> <div>Cancel</div> <div>Cancel button – Cancels any amends made and reverts to previously saved state of Section</div> </div> <div> <div>J</div> <div>Footer</div> <div>Floating Footer containing actions related to the edit state of the section</div> </div>

<div> <div></div> <div>Name</div> <div>Description</div> </div> <div> <div>A</div> <div>Widgets Menu</div> <div>(Add to beginning of Widgets)</div> </div> <div> <div>B</div> <div>Sections Menu</div> <div>(Add Before Current)</div> </div> <div> <div>C</div> <div>Section Actions Menu</div> <div></div> </div> <div> <div>D</div> <div>Widgets Menu</div> <div></div> </div> <div> <div>E</div> <div>Widget Actions Menu</div> <div>(Add to end of Widgets)</div> </div> <div> <div>F</div> <div>Sections Menu</div> <div>(Add After Current)</div> </div> <div> <div></div> <div></div> <div></div> </div>

<div> <div></div> <div>Name</div> <div>Description</div> </div> <div> <div>A</div> <div>Show/Hide Widgets Submenu</div> <div>Show/Hide Widgets Submenu</div> </div> <div> <div>B</div> <div>Show/Hide Sections Submenu</div> <div>Show/Hide Sections Submenu</div> </div> <div> <div>C</div> <div>Section Actions – Show/Hide Widgets Submenu</div> <div>Section Actions – Show/Hide Widgets Submenu</div> </div> <div> <div>D</div> <div>Widget Actions – Resize Widgets Submenu</div> <div>Widget Actions – Resize Widgets Submenu</div> </div>

<div> <div></div> <div>Name</div> <div>Description</div> </div> <div> <div>A</div> <div>User Settings Menu</div> <div>User Settings Menu</div> </div> <div> <div>B</div> <div>Personalization</div> <div>Personalization</div> </div> <div> <div>C</div> <div>Personalization Sub Menu</div> <div>Personalization Sub Menu</div> </div>

<div> <div></div> <div>Name</div> <div>Description</div> </div> <div> <div>A</div> <div></div> <div></div> </div> <div> <div>B</div> <div></div> <div></div> </div> <div> <div>C</div> <div></div> <div></div> </div> <div> <div>D</div> <div></div> <div></div> </div> <div> <div>E</div> <div></div> <div></div> </div> <div> <div>F</div> <div></div> <div></div> </div> <div> <div>G</div> <div></div> <div></div> </div> <div> <div>H</div> <div></div> <div></div> </div> <div> <div>I</div> <div></div> <div></div> </div> <div> <div>J</div> <div></div> <div></div> </div> <div> <div>K</div> <div></div> <div></div> </div> <div> <div>L</div> <div></div> <div></div> </div> <div> <div>M</div> <div></div> <div></div> </div> <div> <div>N</div> <div></div> <div></div> </div> <div> <div>O</div> <div></div> <div></div> </div> <div> <div>P</div> <div></div> <div></div> </div> <div> <div>Q</div> <div></div> <div></div> </div>

<div> <div></div> <div>Name</div> <div>Description</div> </div> <div> <div>A</div> <div></div> <div></div> </div> <div> <div>B</div> <div></div> <div></div> </div> <div> <div>C</div> <div></div> <div></div> </div> <div> <div>D</div> <div></div> <div></div> </div> <div> <div>E</div> <div></div> <div></div> </div> <div> <div>F</div> <div></div> <div></div> </div> <div> <div>G</div> <div></div> <div></div> </div> <div> <div>H</div> <div></div> <div></div> </div> <div> <div>I</div> <div></div> <div></div> </div> <div> <div>J</div> <div></div> <div></div> </div>

<div> <div></div> <div>Name</div> <div>Description</div> </div> <div> <div>A</div> <div></div> <div></div> </div> <div> <div>B</div> <div></div> <div></div> </div> <div> <div>C</div> <div></div> <div></div> </div> <div> <div>D</div> <div></div> <div></div> </div> <div> <div>E</div> <div></div> <div></div> </div> <div> <div>F</div> <div></div> <div></div> </div> <div> <div>G</div> <div></div> <div></div> </div> <div> <div>H</div> <div></div> <div></div> </div> <div> <div>I</div> <div></div> <div></div> </div> <div> <div>J</div> <div></div> <div></div> </div> <div> <div>K</div> <div></div> <div></div> </div>

<a href="/wiki/display/CPDesign/Homepage+Personalisation">Homepage Personalisation</a>

Table of Contents

Overview

Look and Feel

Dialog Option

Anatomy

Dialog Option

Interaction States

Desktop Specification

Tablet Specification

Phone Specification

Accessibility