# Custom UI in Header

**URL:** <https://pdfjs.community/t/custom-ui-in-header/3459>\
**Category:** Technical Support\
**Created:** [October 1, 2024, 8:19am UTC](https://pdfjs.community/t/custom-ui-in-header/3459 "2024-10-01T08:19:02Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![prajneshu.khandavall](https://avatars.discourse-cdn.com/v4/letter/p/eb8c5e/32.png) [@prajneshu.khandavall](https://pdfjs.community/u/prajneshu.khandavall)\
**Post date:** [October 1, 2024, 8:19am UTC](https://pdfjs.community/t/custom-ui-in-header/3459/1 "2024-10-01T08:19:02Z")

</div>

**Which product are you using?**  
PDF.js Express Plus

**PDF.js Express Version**  
8.4.7  
**Detailed description of issue**  
Hi,  
We are trying to add custom elements using dev express controls like dropdown to the header section in the viewer. we were able to add ui control but the dropdown menu position is not with in the viewer iframe and its opening some where in the web application. is there any setting to bound in pdf express viewer?

**Expected behaviour**  
NA

**Does your issue happen with every document, or just one?**  
NA

**Link to document**

```
const renderbutton = () => {
    const divElement = document.createElement('div');
    divElement.id = 'searchDrpDwn';
    divElement.style = 'width:150px';
    let dropdownArray = allSearchTermsArray.map((s, i) => ({ elemId: s.elemId, description: s.description }));
    $(divElement).dxTagBox({
        dataSource: dropdownArray,
        placeholder: "select search",
        displayExpr: "description",
        valueExpr:'elemId',
        showSelectionControls: true,
        searchEnabled: true,
        maxDisplayedTags: 1,
        value: searchTermsArray.map(c => c.elemId),
        onValueChanged: function (data) {
            instance.docViewer.clearSearchResults();
            results = [];
            searchDropDownClick(data.value);
            instance.UI.openElements(['searchPanel']);
        }
    });
    return divElement;
}
async function searchDropDownClick(selectedIdLst) {
    for (var selectedElemId of selectedIdLst) {
        await performSearch(allSearchTermsArray.find(k => k.elemId == selectedElemId));
    }
}
const newCustomElement = {
    type: 'customElement',
    id: 'searchLst',
    render: renderbutton
};
instance.UI.setHeaderItems((header) => {
    let exiIndex = header.getItems().findIndex(item => item.id == 'searchLst');
    if (exiIndex > -1) {
        header.delete(exiIndex);
    }
    /*header.unshift(newCustomElement); */
    header.push(newCustomElement);    
});

```

**Code snippet**  
{Provide a relevant code snippet}

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/1/161bafca36f0dce1444310a20c9037f567e98847.png)

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [October 1, 2024, 3:57pm UTC](https://pdfjs.community/t/custom-ui-in-header/3459/3 "2024-10-01T15:57:09Z")

</div>

Hello prajneshu.khandavall,

Using the code provided I wasnt able to add it to a sample project and see the issue shown in the screenshot, could you provide a sample project clearly demonstrating the issue?

Best regards,  
Tyler

---

<div class="post-metadata">

**Author:** ![prajneshu.khandavall](https://avatars.discourse-cdn.com/v4/letter/p/eb8c5e/32.png) [@prajneshu.khandavall](https://pdfjs.community/u/prajneshu.khandavall)\
**Post date:** [October 3, 2024, 5:36am UTC](https://pdfjs.community/t/custom-ui-in-header/3459/4 "2024-10-03T05:36:35Z")

</div>

Hi sorry for the late. i am attaching sample code in angularjs and modified the code.

```javascript
please use this link to download the code https://drive.google.com/file/d/1lU6AOQOx042Dgpzz11rpacqQFr8GzMfD/view?usp=sharing
```

---

<div class="post-metadata">

**Author:** ![prajneshu.khandavall](https://avatars.discourse-cdn.com/v4/letter/p/eb8c5e/32.png) [@prajneshu.khandavall](https://pdfjs.community/u/prajneshu.khandavall)\
**Post date:** [October 8, 2024, 5:09am UTC](https://pdfjs.community/t/custom-ui-in-header/3459/5 "2024-10-08T05:09:25Z")

</div>

Hi @tgordon can you please help on this?

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [October 22, 2024, 4:20pm UTC](https://pdfjs.community/t/custom-ui-in-header/3459/6 "2024-10-22T16:20:47Z")

</div>

Hello prajneshu.khandavall,

Could you instead add it to a github repository? For security reasons I am unable to download for an untrusted drive link.  
If you want to make a private repo, my github username is tyler-gordon

Best regards,  
Tyler

---

<div class="post-metadata">

**Author:** ![prajneshu.khandavall](https://avatars.discourse-cdn.com/v4/letter/p/eb8c5e/32.png) [@prajneshu.khandavall](https://pdfjs.community/u/prajneshu.khandavall)\
**Post date:** [October 23, 2024, 6:08am UTC](https://pdfjs.community/t/custom-ui-in-header/3459/7 "2024-10-23T06:08:24Z")

</div>

Hey @tgordon thanks for letting know the issue. i created a github repository and added you. please let me if you are facing access issues

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [October 23, 2024, 2:54pm UTC](https://pdfjs.community/t/custom-ui-in-header/3459/8 "2024-10-23T14:54:21Z")

</div>

Hello prajneshu.khandavall,

Looks like the application does not run correctly, when downloading the repo then using a different PDF file (couldnt find it in the folders) I get these errors:

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/3/3792c649170e7cc121872ab628394cdf9c9d191f.png)

It looks like Jquery isnt installed in the repo

Best regards,  
Tyler

---

<div class="post-metadata">

**Author:** ![prajneshu.khandavall](https://avatars.discourse-cdn.com/v4/letter/p/eb8c5e/32.png) [@prajneshu.khandavall](https://pdfjs.community/u/prajneshu.khandavall)\
**Post date:** [October 23, 2024, 4:25pm UTC](https://pdfjs.community/t/custom-ui-in-header/3459/9 "2024-10-23T16:25:47Z")

</div>

@tgordon i included jquery and working in my local. may be issue with not mentioning mime types. just i added its type as "type=“application/javascript” in the script tag. please get latest and let me know if you still getting errors.  
Thanks,  
Prajneshu k

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [October 25, 2024, 5:00pm UTC](https://pdfjs.community/t/custom-ui-in-header/3459/10 "2024-10-25T17:00:48Z")

</div>

Hello prajneshu.khandavall,

Please push the appropriate changes to the repo!

Best regards,  
Tyler

---

<div class="post-metadata">

**Author:** ![prajneshu.khandavall](https://avatars.discourse-cdn.com/v4/letter/p/eb8c5e/32.png) [@prajneshu.khandavall](https://pdfjs.community/u/prajneshu.khandavall)\
**Post date:** [November 14, 2024, 8:00am UTC](https://pdfjs.community/t/custom-ui-in-header/3459/11 "2024-11-14T08:00:07Z")

</div>

Hi @tgordon i pushed all changes to the main branch now. please try and let me know.

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [November 22, 2024, 6:43pm UTC](https://pdfjs.community/t/custom-ui-in-header/3459/12 "2024-11-22T18:43:11Z")

</div>

Hello prajneshu.khandavall,

The repo does not have the latest changes, the last commit was a month ago:

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/b/b63769581cd0bf39f254474087850fa70bad7c65.png)

Best regards,  
Tyler