# APM Advanced Customization Examples with Modern Template, v15.1+

**URL:** <https://community.f5.com/t/apm-advanced-customization-examples-with-modern-template-v15-1/68581>\
**Category:** F5 Technical Articles\
**Tags:** big-ip-access-policy-manager-apm, customization, security\
**Created:** [March 31, 2020, 8:25pm UTC](https://community.f5.com/t/apm-advanced-customization-examples-with-modern-template-v15-1/68581 "2020-03-31T20:25:33Z")\
**Posts on this page:** 8\
**Page:** 2

<div class="post-metadata">

**Author:** ![krazzy522](https://avatars.discourse-cdn.com/v4/letter/k/6a8cbe/32.png) [@krazzy522](https://community.f5.com/u/krazzy522)\
**Post date:** [March 1, 2023, 8:35am UTC](https://community.f5.com/t/apm-advanced-customization-examples-with-modern-template-v15-1/68581/21 "2023-03-01T08:35:33Z")

</div>

Dear PSilva

I have added div to JS file like below and added CSS to the div

thank you for your time and support

var divlogo = document.createElement(“div”);  
divLogo.id = “logo”;  
document.body.appendChild(divLogo);  
var img = document.createElement(“img”);  
img.setAttribute(“src”, “logo.png”);  
divLogo.appendChild(img);

---

<div class="post-metadata">

**Author:** ![PSilva](https://d1p9zq3aats0t8.cloudfront.net/user_avatar/community.f5.com/psilva/32/13901_2.png) [@PSilva](https://community.f5.com/u/PSilva)\
**Post date:** [March 1, 2023, 5:25pm UTC](https://community.f5.com/t/apm-advanced-customization-examples-with-modern-template-v15-1/68581/22 "2023-03-01T17:25:07Z")

</div>

We’ll pass this on!

ps

---

<div class="post-metadata">

**Author:** ![kimhenriksen](https://avatars.discourse-cdn.com/v4/letter/k/9dc877/32.png) [@kimhenriksen](https://community.f5.com/u/kimhenriksen)\
**Post date:** [April 27, 2023, 7:24am UTC](https://community.f5.com/t/apm-advanced-customization-examples-with-modern-template-v15-1/68581/23 "2023-04-27T07:24:55Z")

</div>

Can someone share the templates? The old link is dead.

---

<div class="post-metadata">

**Author:** ![Ejes](https://d1p9zq3aats0t8.cloudfront.net/user_avatar/community.f5.com/ejes/32/3197_2.png) [@Ejes](https://community.f5.com/u/Ejes)\
**Post date:** [February 8, 2024, 9:23am UTC](https://community.f5.com/t/apm-advanced-customization-examples-with-modern-template-v15-1/68581/24 "2024-02-08T09:23:58Z")

</div>

I would like to do Pin Pad Web Customizing.  
Could you please tell me how to do it?

---

<div class="post-metadata">

**Author:** ![Lucas\_Thompson](https://d1p9zq3aats0t8.cloudfront.net/user_avatar/community.f5.com/lucas_thompson/32/19403_2.png) [@Lucas\_Thompson](https://community.f5.com/u/Lucas_Thompson)\
**Post date:** [February 8, 2024, 5:51pm UTC](https://community.f5.com/t/apm-advanced-customization-examples-with-modern-template-v15-1/68581/25 "2024-02-08T17:51:31Z")

</div>

The method to change the logon page to a PIN pad outlined in this article, in Example 4.

---

<div class="post-metadata">

**Author:** ![Ejes](https://d1p9zq3aats0t8.cloudfront.net/user_avatar/community.f5.com/ejes/32/3197_2.png) [@Ejes](https://community.f5.com/u/Ejes)\
**Post date:** [February 19, 2024, 2:24am UTC](https://community.f5.com/t/apm-advanced-customization-examples-with-modern-template-v15-1/68581/26 "2024-02-19T02:24:58Z")

</div>

Example 4 only says that Preact and CSS are used, and there is no explanation as to which CSS syntax should be applied to which CSS, how to use Preact, etc.

I’m not a web designer or developer, so I don’t really know what Preact is.

Could you please tell me some details?

---

<div class="post-metadata">

**Author:** ![DmitryT](https://avatars.discourse-cdn.com/v4/letter/d/c68b51/32.png) [@DmitryT](https://community.f5.com/u/DmitryT)\
**Post date:** [October 9, 2024, 8:10am UTC](https://community.f5.com/t/apm-advanced-customization-examples-with-modern-template-v15-1/68581/27 "2024-10-09T08:10:22Z")

</div>

Hello! how do I get an authorized user’s email on the webtop page? Via the user-webtop file.js in the store object - this data is missing, session is an empty string. Thanks

```typescript
import { App, EventType, PageType } from 'apmui';
const app = App.get();

app.subscribe(EventType.WEBTOP_CONFIGURATION_COMPLETE, (_, store) => {
    if (store.pageType !== PageType.WEBTOP) {
        return;
    }

    const session = '%{session}';
    const sessionJSON = JSON.stringify('%{session}', null, 2);

    console.log({ store, session, sessionJSON });
});

```

---

<div class="post-metadata">

**Author:** ![emalzer](https://avatars.discourse-cdn.com/v4/letter/e/c37758/32.png) [@emalzer](https://community.f5.com/u/emalzer)\
**Post date:** [January 1, 2025, 11:39am UTC](https://community.f5.com/t/apm-advanced-customization-examples-with-modern-template-v15-1/68581/28 "2025-01-01T11:39:09Z")

</div>

Is there any example on how to modify the header / footer via the user-common.js and modify the form in the corresponding user-logon.js? Any hint on how to do that is very much appreciated - see [APM Modern Customization - modify Header in user-common.js and form in user-logon.js - Technical Forums - DevCentral - An F5 Technical Community](https://community.f5.com/discussions/technicalforum/apm-modern-customization%5C-%5C-%5C-modify-header-in-user-common-js-and-form-in-user-logo/337697)

[Previous page](https://community.f5.com/t/apm-advanced-customization-examples-with-modern-template-v15-1/68581.md?page=1)