CINXE.COM
Create custom code and views - Turn-key research data management repository
<!doctype html> <html lang="en" class="no-js"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="canonical" href="https://inveniordm.docs.cern.ch/develop/howtos/custom_code/"> <link rel="prev" href="../custom_fields/"> <link rel="next" href="../add_javascript/"> <link rel="icon" href="../../../images/favicon.svg"> <meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.5.40"> <title>Create custom code and views - Turn-key research data management repository</title> <link rel="stylesheet" href="../../../assets/stylesheets/main.8c3ca2c6.min.css"> <link rel="stylesheet" href="../../../assets/stylesheets/palette.06af60db.min.css"> <link rel="stylesheet" href="../../../stylesheets/extra.css"> <script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script> </head> <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="custom" data-md-color-accent="custom"> <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off"> <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off"> <label class="md-overlay" for="__drawer"></label> <div data-md-component="skip"> <a href="#creating-custom-code-and-views" class="md-skip"> Skip to content </a> </div> <div data-md-component="announce"> </div> <header class="md-header" data-md-component="header"> <nav class="md-header__inner md-grid" aria-label="Header"> <a href="../../.." title="Turn-key research data management repository" class="md-header__button md-logo" aria-label="Turn-key research data management repository" data-md-component="logo"> <img src="../../../images/logo-rdm.png" alt="logo"> </a> <label class="md-header__button md-icon" for="__drawer"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg> </label> <div class="md-header__title" data-md-component="header-title"> <div class="md-header__ellipsis"> <div class="md-header__topic"> <span class="md-ellipsis"> Turn-key research data management repository </span> </div> <div class="md-header__topic" data-md-component="header-topic"> <span class="md-ellipsis"> Create custom code and views </span> </div> </div> </div> <form class="md-header__option" data-md-component="palette"> <input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="custom" data-md-color-accent="custom" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0"> <label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg> </label> <input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="black" data-md-color-accent="orange" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1"> <label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg> </label> </form> <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script> <label class="md-header__button md-icon" for="__search"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> </label> <div class="md-search" data-md-component="search" role="dialog"> <label class="md-search__overlay" for="__search"></label> <div class="md-search__inner" role="search"> <form class="md-search__form" name="search"> <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required> <label class="md-search__icon md-icon" for="__search"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </label> <nav class="md-search__options" aria-label="Search"> <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> </button> </nav> </form> <div class="md-search__output"> <div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix> <div class="md-search-result" data-md-component="search-result"> <div class="md-search-result__meta"> Initializing search </div> <ol class="md-search-result__list" role="presentation"></ol> </div> </div> </div> </div> </div> <div class="md-header__source"> <a href="https://github.com/inveniosoftware/docs-invenio-rdm" title="Go to repository" class="md-source" data-md-component="source"> <div class="md-source__icon md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg> </div> <div class="md-source__repository"> GitHub </div> </a> </div> </nav> </header> <div class="md-container" data-md-component="container"> <nav class="md-tabs" aria-label="Tabs" data-md-component="tabs"> <div class="md-grid"> <ul class="md-tabs__list"> <li class="md-tabs__item"> <a href="../../.." class="md-tabs__link"> Home </a> </li> <li class="md-tabs__item"> <a href="../../../features/" class="md-tabs__link"> Features </a> </li> <li class="md-tabs__item"> <a href="../../../install/" class="md-tabs__link"> Install </a> </li> <li class="md-tabs__item"> <a href="../../../customize/" class="md-tabs__link"> Customize </a> </li> <li class="md-tabs__item md-tabs__item--active"> <a href="../../" class="md-tabs__link"> Develop </a> </li> <li class="md-tabs__item"> <a href="../../../deploy/" class="md-tabs__link"> Deploy </a> </li> <li class="md-tabs__item"> <a href="../../../reference/" class="md-tabs__link"> Reference </a> </li> <li class="md-tabs__item"> <a href="../../../releases/" class="md-tabs__link"> Releases </a> </li> <li class="md-tabs__item"> <a href="../../../maintenance/" class="md-tabs__link"> Maintainers </a> </li> <li class="md-tabs__item"> <a href="../../../contribute/" class="md-tabs__link"> Onboard & Contribute </a> </li> </ul> </div> </nav> <main class="md-main" data-md-component="main"> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" > <div class="md-sidebar__scrollwrap"> <div class="md-sidebar__inner"> <nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0"> <label class="md-nav__title" for="__drawer"> <a href="../../.." title="Turn-key research data management repository" class="md-nav__button md-logo" aria-label="Turn-key research data management repository" data-md-component="logo"> <img src="../../../images/logo-rdm.png" alt="logo"> </a> Turn-key research data management repository </label> <div class="md-nav__source"> <a href="https://github.com/inveniosoftware/docs-invenio-rdm" title="Go to repository" class="md-source" data-md-component="source"> <div class="md-source__icon md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg> </div> <div class="md-source__repository"> GitHub </div> </a> </div> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../.." class="md-nav__link"> <span class="md-ellipsis"> Home </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" > <label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0"> <span class="md-ellipsis"> Features </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_2"> <span class="md-nav__icon md-icon"></span> Features </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../features/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../features/ux/" class="md-nav__link"> <span class="md-ellipsis"> Beautiful UX </span> </a> </li> <li class="md-nav__item"> <a href="../../../features/scalable/" class="md-nav__link"> <span class="md-ellipsis"> Highly scalable </span> </a> </li> <li class="md-nav__item"> <a href="../../../features/customization/" class="md-nav__link"> <span class="md-ellipsis"> Customizable </span> </a> </li> <li class="md-nav__item"> <a href="../../../features/interoperable/" class="md-nav__link"> <span class="md-ellipsis"> Interoperable </span> </a> </li> <li class="md-nav__item"> <a href="../../../features/powerful/" class="md-nav__link"> <span class="md-ellipsis"> Powerful </span> </a> </li> <li class="md-nav__item"> <a href="../../../features/secure/" class="md-nav__link"> <span class="md-ellipsis"> Secure </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_8" > <label class="md-nav__link" for="__nav_2_8" id="__nav_2_8_label" tabindex="0"> <span class="md-ellipsis"> Features walk-through </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_2_8"> <span class="md-nav__icon md-icon"></span> Features walk-through </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../features/features-walk-through/" class="md-nav__link"> <span class="md-ellipsis"> Features overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../features/features-walk-through/banners/" class="md-nav__link"> <span class="md-ellipsis"> Site banners </span> </a> </li> <li class="md-nav__item"> <a href="../../../features/features-walk-through/notifications/" class="md-nav__link"> <span class="md-ellipsis"> Notifications </span> </a> </li> <li class="md-nav__item"> <a href="../../../features/features-walk-through/access_requests/" class="md-nav__link"> <span class="md-ellipsis"> Access requests </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" > <label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0"> <span class="md-ellipsis"> Install </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3"> <span class="md-nav__icon md-icon"></span> Install </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../install/" class="md-nav__link"> <span class="md-ellipsis"> Quick start </span> </a> </li> <li class="md-nav__item"> <a href="../../../install/requirements/" class="md-nav__link"> <span class="md-ellipsis"> System requirements </span> </a> </li> <li class="md-nav__item"> <a href="../../../install/cli/" class="md-nav__link"> <span class="md-ellipsis"> Install CLI </span> </a> </li> <li class="md-nav__item"> <a href="../../../install/scaffold/" class="md-nav__link"> <span class="md-ellipsis"> Scaffold </span> </a> </li> <li class="md-nav__item"> <a href="../../../install/build-setup-run/" class="md-nav__link"> <span class="md-ellipsis"> Build, setup & run </span> </a> </li> <li class="md-nav__item"> <a href="../../../install/configuration/" class="md-nav__link"> <span class="md-ellipsis"> Configure </span> </a> </li> <li class="md-nav__item"> <a href="../../../install/run/" class="md-nav__link"> <span class="md-ellipsis"> Use </span> </a> </li> <li class="md-nav__item"> <a href="../../../install/migrate/" class="md-nav__link"> <span class="md-ellipsis"> Migrate </span> </a> </li> <li class="md-nav__item"> <a href="../../../install/destroy/" class="md-nav__link"> <span class="md-ellipsis"> Destroy </span> </a> </li> <li class="md-nav__item"> <a href="../../../install/troubleshoot/" class="md-nav__link"> <span class="md-ellipsis"> Troubleshooting </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" > <label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0"> <span class="md-ellipsis"> Customize </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4"> <span class="md-nav__icon md-icon"></span> Customize </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_2" > <label class="md-nav__link" for="__nav_4_2" id="__nav_4_2_label" tabindex="0"> <span class="md-ellipsis"> Look-and-feel </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_2"> <span class="md-nav__icon md-icon"></span> Look-and-feel </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/look-and-feel/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/look-and-feel/logo/" class="md-nav__link"> <span class="md-ellipsis"> Change logo </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/look-and-feel/templates/" class="md-nav__link"> <span class="md-ellipsis"> Change templates </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/look-and-feel/theme/" class="md-nav__link"> <span class="md-ellipsis"> Change theme </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/look-and-feel/font/" class="md-nav__link"> <span class="md-ellipsis"> Change font </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../customize/authentication/" class="md-nav__link"> <span class="md-ellipsis"> Authentication </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/emails/" class="md-nav__link"> <span class="md-ellipsis"> Sending emails </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_5" > <label class="md-nav__link" for="__nav_4_5" id="__nav_4_5_label" tabindex="0"> <span class="md-ellipsis"> Search </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_5"> <span class="md-nav__icon md-icon"></span> Search </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/search/" class="md-nav__link"> <span class="md-ellipsis"> Change facets/sorting </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_6" > <label class="md-nav__link" for="__nav_4_6" id="__nav_4_6_label" tabindex="0"> <span class="md-ellipsis"> Vocabularies </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_6"> <span class="md-nav__icon md-icon"></span> Vocabularies </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/vocabularies/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/vocabularies/resource_types/" class="md-nav__link"> <span class="md-ellipsis"> Resource types </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/vocabularies/affiliations/" class="md-nav__link"> <span class="md-ellipsis"> Affiliations </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/vocabularies/names/" class="md-nav__link"> <span class="md-ellipsis"> Names </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/vocabularies/funding/" class="md-nav__link"> <span class="md-ellipsis"> Funding </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/vocabularies/subjects/" class="md-nav__link"> <span class="md-ellipsis"> Subjects </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/vocabularies/users/" class="md-nav__link"> <span class="md-ellipsis"> Users </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_7" > <label class="md-nav__link" for="__nav_4_7" id="__nav_4_7_label" tabindex="0"> <span class="md-ellipsis"> Metadata </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_7"> <span class="md-nav__icon md-icon"></span> Metadata </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/metadata/optional_fields/" class="md-nav__link"> <span class="md-ellipsis"> Optional metadata </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_7_2" > <label class="md-nav__link" for="__nav_4_7_2" id="__nav_4_7_2_label" tabindex="0"> <span class="md-ellipsis"> Custom fields </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_7_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_7_2"> <span class="md-nav__icon md-icon"></span> Custom fields </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/metadata/custom_fields/records/" class="md-nav__link"> <span class="md-ellipsis"> Add fields to records </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/metadata/custom_fields/communities/" class="md-nav__link"> <span class="md-ellipsis"> Add fields to communities </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../customize/record_landing_page/" class="md-nav__link"> <span class="md-ellipsis"> Record landing page </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/static_pages/" class="md-nav__link"> <span class="md-ellipsis"> Static pages </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/dois/" class="md-nav__link"> <span class="md-ellipsis"> DOI registration </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_11" > <label class="md-nav__link" for="__nav_4_11" id="__nav_4_11_label" tabindex="0"> <span class="md-ellipsis"> Other PIDs integrations </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_11_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_11"> <span class="md-nav__icon md-icon"></span> Other PIDs integrations </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customize/other-pids/urns/" class="md-nav__link"> <span class="md-ellipsis"> DNB URNs </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../customize/s3/" class="md-nav__link"> <span class="md-ellipsis"> Storage </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/upload_limits/" class="md-nav__link"> <span class="md-ellipsis"> Upload Limits </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/metadata_only/" class="md-nav__link"> <span class="md-ellipsis"> Metadata-only records </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/Logging/" class="md-nav__link"> <span class="md-ellipsis"> Logging </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/i18n-and-l10n/" class="md-nav__link"> <span class="md-ellipsis"> Internationalisation (i18n) and Localisation (l10n) </span> </a> </li> <li class="md-nav__item"> <a href="../../../customize/notifications/" class="md-nav__link"> <span class="md-ellipsis"> Notifications </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" checked> <label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex=""> <span class="md-ellipsis"> Develop </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="true"> <label class="md-nav__title" for="__nav_5"> <span class="md-nav__icon md-icon"></span> Develop </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2" > <label class="md-nav__link" for="__nav_5_2" id="__nav_5_2_label" tabindex="0"> <span class="md-ellipsis"> Getting started </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_2"> <span class="md-nav__icon md-icon"></span> Getting started </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../getting-started/source-code/" class="md-nav__link"> <span class="md-ellipsis"> Source code </span> </a> </li> <li class="md-nav__item"> <a href="../../getting-started/package-development/" class="md-nav__link"> <span class="md-ellipsis"> Package development </span> </a> </li> <li class="md-nav__item"> <a href="../../getting-started/instance-development/" class="md-nav__link"> <span class="md-ellipsis"> Instance development </span> </a> </li> <li class="md-nav__item"> <a href="../../getting-started/debugging/" class="md-nav__link"> <span class="md-ellipsis"> Debugging </span> </a> </li> <li class="md-nav__item"> <a href="../../getting-started/code-style/" class="md-nav__link"> <span class="md-ellipsis"> Coding style </span> </a> </li> <li class="md-nav__item"> <a href="../../getting-started/virtualenvs/" class="md-nav__link"> <span class="md-ellipsis"> Virtual environments </span> </a> </li> <li class="md-nav__item"> <a href="../../getting-started/help/" class="md-nav__link"> <span class="md-ellipsis"> Getting help </span> </a> </li> <li class="md-nav__item"> <a href="../../process/" class="md-nav__link"> <span class="md-ellipsis"> Development process </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_3" > <label class="md-nav__link" for="__nav_5_3" id="__nav_5_3_label" tabindex="0"> <span class="md-ellipsis"> Best practices </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_3"> <span class="md-nav__icon md-icon"></span> Best practices </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../best-practices/accessibility/" class="md-nav__link"> <span class="md-ellipsis"> Accessibility (a11y) </span> </a> </li> <li class="md-nav__item"> <a href="../../best-practices/commits/" class="md-nav__link"> <span class="md-ellipsis"> Commits, PRs & reviews </span> </a> </li> <li class="md-nav__item"> <a href="../../best-practices/css-js/" class="md-nav__link"> <span class="md-ellipsis"> CSS/JavaScript </span> </a> </li> <li class="md-nav__item"> <a href="../../best-practices/react/" class="md-nav__link"> <span class="md-ellipsis"> React </span> </a> </li> <li class="md-nav__item"> <a href="../../best-practices/ui/" class="md-nav__link"> <span class="md-ellipsis"> User interface </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_4" > <label class="md-nav__link" for="__nav_5_4" id="__nav_5_4_label" tabindex="0"> <span class="md-ellipsis"> Topic guides </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_4"> <span class="md-nav__icon md-icon"></span> Topic guides </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../topics/resource/" class="md-nav__link"> <span class="md-ellipsis"> Building resources </span> </a> </li> <li class="md-nav__item"> <a href="../../topics/service/" class="md-nav__link"> <span class="md-ellipsis"> Building services </span> </a> </li> <li class="md-nav__item"> <a href="../../topics/serializers/" class="md-nav__link"> <span class="md-ellipsis"> Building serializers </span> </a> </li> <li class="md-nav__item"> <a href="../../topics/uow/" class="md-nav__link"> <span class="md-ellipsis"> Grouping atomic operations </span> </a> </li> <li class="md-nav__item"> <a href="../../topics/validation/" class="md-nav__link"> <span class="md-ellipsis"> Sanitize input data </span> </a> </li> <li class="md-nav__item"> <a href="../../topics/theming/" class="md-nav__link"> <span class="md-ellipsis"> Theming </span> </a> </li> <li class="md-nav__item"> <a href="../../topics/administration_panel/" class="md-nav__link"> <span class="md-ellipsis"> Administration panel </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_5" checked> <label class="md-nav__link" for="__nav_5_5" id="__nav_5_5_label" tabindex="0"> <span class="md-ellipsis"> How-to guides </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_5_label" aria-expanded="true"> <label class="md-nav__title" for="__nav_5_5"> <span class="md-nav__icon md-icon"></span> How-to guides </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../i18n/" class="md-nav__link"> <span class="md-ellipsis"> Translation (i18n) </span> </a> </li> <li class="md-nav__item"> <a href="../custom_fields/" class="md-nav__link"> <span class="md-ellipsis"> Create a new custom field </span> </a> </li> <li class="md-nav__item md-nav__item--active"> <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc"> <label class="md-nav__link md-nav__link--active" for="__toc"> <span class="md-ellipsis"> Create custom code and views </span> <span class="md-nav__icon md-icon"></span> </label> <a href="./" class="md-nav__link md-nav__link--active"> <span class="md-ellipsis"> Create custom code and views </span> </a> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class="md-nav__title" for="__toc"> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> <li class="md-nav__item"> <a href="#enable-the-site-folder" class="md-nav__link"> <span class="md-ellipsis"> Enable the site folder </span> </a> </li> <li class="md-nav__item"> <a href="#configure-your-new-view" class="md-nav__link"> <span class="md-ellipsis"> Configure your new view </span> </a> </li> <li class="md-nav__item"> <a href="#register-the-view" class="md-nav__link"> <span class="md-ellipsis"> Register the view </span> </a> </li> <li class="md-nav__item"> <a href="#adding-javascript-to-your-template" class="md-nav__link"> <span class="md-ellipsis"> Adding JavaScript to your template </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../add_javascript/" class="md-nav__link"> <span class="md-ellipsis"> Add JavaScript </span> </a> </li> <li class="md-nav__item"> <a href="../override_components/" class="md-nav__link"> <span class="md-ellipsis"> Override UI React components </span> </a> </li> <li class="md-nav__item"> <a href="../search_terms_migration/" class="md-nav__link"> <span class="md-ellipsis"> Create search terms mappings </span> </a> </li> <li class="md-nav__item"> <a href="../alembic/" class="md-nav__link"> <span class="md-ellipsis"> Create a database migration </span> </a> </li> <li class="md-nav__item"> <a href="../security-fix/" class="md-nav__link"> <span class="md-ellipsis"> Fix a vulnerability </span> </a> </li> <li class="md-nav__item"> <a href="../dev_email/" class="md-nav__link"> <span class="md-ellipsis"> Test emails locally </span> </a> </li> <li class="md-nav__item"> <a href="../route_migration/" class="md-nav__link"> <span class="md-ellipsis"> Migrate legacy routes </span> </a> </li> <li class="md-nav__item"> <a href="../backup_search_indices/" class="md-nav__link"> <span class="md-ellipsis"> Back up search indices </span> </a> </li> <li class="md-nav__item"> <a href="../restrict_access/" class="md-nav__link"> <span class="md-ellipsis"> Restrict access to pages </span> </a> </li> <li class="md-nav__item"> <a href="../notifications/" class="md-nav__link"> <span class="md-ellipsis"> Create and configure notifications </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_6" > <label class="md-nav__link" for="__nav_5_6" id="__nav_5_6_label" tabindex="0"> <span class="md-ellipsis"> Architecture </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_6"> <span class="md-nav__icon md-icon"></span> Architecture </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../architecture/" class="md-nav__link"> <span class="md-ellipsis"> Introduction </span> </a> </li> <li class="md-nav__item"> <a href="../../architecture/infrastructure/" class="md-nav__link"> <span class="md-ellipsis"> Infrastructure </span> </a> </li> <li class="md-nav__item"> <a href="../../architecture/software/" class="md-nav__link"> <span class="md-ellipsis"> Software </span> </a> </li> <li class="md-nav__item"> <a href="../../architecture/runtime/" class="md-nav__link"> <span class="md-ellipsis"> Runtime </span> </a> </li> <li class="md-nav__item"> <a href="../../architecture/requests/" class="md-nav__link"> <span class="md-ellipsis"> Requests </span> </a> </li> <li class="md-nav__item"> <a href="../../architecture/communities/" class="md-nav__link"> <span class="md-ellipsis"> Communities </span> </a> </li> <li class="md-nav__item"> <a href="../../architecture/records/" class="md-nav__link"> <span class="md-ellipsis"> Records </span> </a> </li> <li class="md-nav__item"> <a href="../../architecture/event_handling/" class="md-nav__link"> <span class="md-ellipsis"> Event handling </span> </a> </li> <li class="md-nav__item"> <a href="../../architecture/notifications/" class="md-nav__link"> <span class="md-ellipsis"> Notifications </span> </a> </li> <li class="md-nav__item"> <a href="../../architecture/reading/" class="md-nav__link"> <span class="md-ellipsis"> Recommended reading </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_7" > <label class="md-nav__link" for="__nav_5_7" id="__nav_5_7_label" tabindex="0"> <span class="md-ellipsis"> Concepts </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_7"> <span class="md-nav__icon md-icon"></span> Concepts </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../concepts/concurrency-control/" class="md-nav__link"> <span class="md-ellipsis"> Optimistic concurrency control </span> </a> </li> <li class="md-nav__item"> <a href="../../concepts/transactions/" class="md-nav__link"> <span class="md-ellipsis"> Database transaction management </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../deploy/" class="md-nav__link"> <span class="md-ellipsis"> Deploy </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" > <label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0"> <span class="md-ellipsis"> Reference </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_7"> <span class="md-nav__icon md-icon"></span> Reference </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../reference/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/cli/" class="md-nav__link"> <span class="md-ellipsis"> CLI </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/configuration/" class="md-nav__link"> <span class="md-ellipsis"> Configuration </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/metadata/" class="md-nav__link"> <span class="md-ellipsis"> Metadata </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/metadata/optional_metadata/" class="md-nav__link"> <span class="md-ellipsis"> Optional metadata </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/oai_pmh/" class="md-nav__link"> <span class="md-ellipsis"> OAI-PMH </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/export_formats/" class="md-nav__link"> <span class="md-ellipsis"> Export formats </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7_8" > <label class="md-nav__link" for="__nav_7_8" id="__nav_7_8_label" tabindex="0"> <span class="md-ellipsis"> REST API </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_7_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_7_8"> <span class="md-nav__icon md-icon"></span> REST API </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../reference/rest_api_index/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_quickstart/" class="md-nav__link"> <span class="md-ellipsis"> Quickstart </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_communities/" class="md-nav__link"> <span class="md-ellipsis"> Communities </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_drafts_records/" class="md-nav__link"> <span class="md-ellipsis"> Drafts and Records </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_groups/" class="md-nav__link"> <span class="md-ellipsis"> Groups </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_members/" class="md-nav__link"> <span class="md-ellipsis"> Members </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_requests/" class="md-nav__link"> <span class="md-ellipsis"> Requests </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_users/" class="md-nav__link"> <span class="md-ellipsis"> Users </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_reviews/" class="md-nav__link"> <span class="md-ellipsis"> Reviews </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_vocabularies/" class="md-nav__link"> <span class="md-ellipsis"> Vocabularies </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_names/" class="md-nav__link"> <span class="md-ellipsis"> Names </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_funders/" class="md-nav__link"> <span class="md-ellipsis"> Funders </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_awards/" class="md-nav__link"> <span class="md-ellipsis"> Awards </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_oaipmh_sets/" class="md-nav__link"> <span class="md-ellipsis"> OAI-PMH Sets </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/rest_api_statistics/" class="md-nav__link"> <span class="md-ellipsis"> Statistics </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7_9" > <label class="md-nav__link" for="__nav_7_9" id="__nav_7_9_label" tabindex="0"> <span class="md-ellipsis"> Custom fields </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_7_9_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_7_9"> <span class="md-nav__icon md-icon"></span> Custom fields </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../reference/custom_fields/widgets/" class="md-nav__link"> <span class="md-ellipsis"> UI widgets </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7_10" > <label class="md-nav__link" for="__nav_7_10" id="__nav_7_10_label" tabindex="0"> <span class="md-ellipsis"> Administration </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_7_10_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_7_10"> <span class="md-nav__icon md-icon"></span> Administration </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../reference/administration_reference/" class="md-nav__link"> <span class="md-ellipsis"> Reference </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../reference/file_storage/" class="md-nav__link"> <span class="md-ellipsis"> File storage </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/statistics/" class="md-nav__link"> <span class="md-ellipsis"> Usage statistics </span> </a> </li> <li class="md-nav__item"> <a href="../../../reference/notifications/" class="md-nav__link"> <span class="md-ellipsis"> Notifications </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8" > <label class="md-nav__link" for="__nav_8" id="__nav_8_label" tabindex="0"> <span class="md-ellipsis"> Releases </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8"> <span class="md-nav__icon md-icon"></span> Releases </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/maintenance-policy/" class="md-nav__link"> <span class="md-ellipsis"> Maintenance policy </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/upgrade-policy/" class="md-nav__link"> <span class="md-ellipsis"> Upgrade policy </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/security-policy/" class="md-nav__link"> <span class="md-ellipsis"> Security policy </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_5" > <label class="md-nav__link" for="__nav_8_5" id="__nav_8_5_label" tabindex="0"> <span class="md-ellipsis"> Version v12.0 LTS </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_8_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_5"> <span class="md-nav__icon md-icon"></span> Version v12.0 LTS </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v12/version-v12.0.0/" class="md-nav__link"> <span class="md-ellipsis"> Release Notes v12.0 </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/v12/upgrade-v12.0/" class="md-nav__link"> <span class="md-ellipsis"> Upgrade from v11 to v12 </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_6" > <label class="md-nav__link" for="__nav_8_6" id="__nav_8_6_label" tabindex="0"> <span class="md-ellipsis"> Version v11.0 STS </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_8_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_6"> <span class="md-nav__icon md-icon"></span> Version v11.0 STS </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v11/version-v11.0.0/" class="md-nav__link"> <span class="md-ellipsis"> Release Notes v11.0 </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/v11/upgrade-v11.0/" class="md-nav__link"> <span class="md-ellipsis"> Upgrade from v10 to v11 </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_7" > <label class="md-nav__link" for="__nav_8_7" id="__nav_8_7_label" tabindex="0"> <span class="md-ellipsis"> Version v9.1 LTS </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_8_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_7"> <span class="md-nav__icon md-icon"></span> Version v9.1 LTS </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v9/version-v9.1.0/" class="md-nav__link"> <span class="md-ellipsis"> Release Notes v9.1 </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/v9/version-v9.0.0/" class="md-nav__link"> <span class="md-ellipsis"> Release Notes v9.0 </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/migrate-docker-images/" class="md-nav__link"> <span class="md-ellipsis"> Migrate Docker images </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/v9/migrate-opensearch-v9/" class="md-nav__link"> <span class="md-ellipsis"> Migrate v9 to OpenSearch </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/v9/upgrade-v9.0/" class="md-nav__link"> <span class="md-ellipsis"> Upgrade from v8 to v9 </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8" > <label class="md-nav__link" for="__nav_8_8" id="__nav_8_8_label" tabindex="0"> <span class="md-ellipsis"> Legacy Versions </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_8_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8"> <span class="md-nav__icon md-icon"></span> Legacy Versions </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_1" > <label class="md-nav__link" for="__nav_8_8_1" id="__nav_8_8_1_label" tabindex="0"> <span class="md-ellipsis"> Version v10.1 </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_1_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_1"> <span class="md-nav__icon md-icon"></span> Version v10.1 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v10/version-v10.1.0/" class="md-nav__link"> <span class="md-ellipsis"> Release Notes v10.1 </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/v10/version-v10.0.0/" class="md-nav__link"> <span class="md-ellipsis"> Release Notes v10.0 </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/v10/upgrade-v10.0/" class="md-nav__link"> <span class="md-ellipsis"> Upgrade from v9 to v10 </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/migrate-docker-images/" class="md-nav__link"> <span class="md-ellipsis"> Migrate Docker images </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_2" > <label class="md-nav__link" for="__nav_8_8_2" id="__nav_8_8_2_label" tabindex="0"> <span class="md-ellipsis"> Version v8.0 </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_2"> <span class="md-nav__icon md-icon"></span> Version v8.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v8/version-v8.0.0/" class="md-nav__link"> <span class="md-ellipsis"> Release Notes v8.0 </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/v8/upgrade-v8.0/" class="md-nav__link"> <span class="md-ellipsis"> Upgrade from v7 to v8 </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_3" > <label class="md-nav__link" for="__nav_8_8_3" id="__nav_8_8_3_label" tabindex="0"> <span class="md-ellipsis"> Version v7.0 </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_3"> <span class="md-nav__icon md-icon"></span> Version v7.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v7/version-v7.0.0/" class="md-nav__link"> <span class="md-ellipsis"> Release Notes v7.0 </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/v7/upgrade-v7.0/" class="md-nav__link"> <span class="md-ellipsis"> Upgrade from v6 to v7 </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_4" > <label class="md-nav__link" for="__nav_8_8_4" id="__nav_8_8_4_label" tabindex="0"> <span class="md-ellipsis"> Version v6.0.5 </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_4"> <span class="md-nav__icon md-icon"></span> Version v6.0.5 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v6/version-v6.0.5/" class="md-nav__link"> <span class="md-ellipsis"> Release Notes v6.0.5 </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/v6/upgrade-v6.0.5/" class="md-nav__link"> <span class="md-ellipsis"> Upgrade from v6.0.x to v6.0.5 </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/v6/version-v6.0.0/" class="md-nav__link"> <span class="md-ellipsis"> Release Notes v6.0.0 </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/v6/upgrade-v6.0/" class="md-nav__link"> <span class="md-ellipsis"> Upgrade from v4 to v6 </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_5" > <label class="md-nav__link" for="__nav_8_8_5" id="__nav_8_8_5_label" tabindex="0"> <span class="md-ellipsis"> Version v5.0 </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_5"> <span class="md-nav__icon md-icon"></span> Version v5.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v5/version-v5.0.0/" class="md-nav__link"> <span class="md-ellipsis"> Release Notes v5.0 </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_6" > <label class="md-nav__link" for="__nav_8_8_6" id="__nav_8_8_6_label" tabindex="0"> <span class="md-ellipsis"> Version v4.0 </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_6"> <span class="md-nav__icon md-icon"></span> Version v4.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v4/version-v4.0.0/" class="md-nav__link"> <span class="md-ellipsis"> Release Notes v4.0 </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/v4/upgrade-v4.0/" class="md-nav__link"> <span class="md-ellipsis"> Upgrade from v3 to v4 </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_7" > <label class="md-nav__link" for="__nav_8_8_7" id="__nav_8_8_7_label" tabindex="0"> <span class="md-ellipsis"> Version v3.0 </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_7"> <span class="md-nav__icon md-icon"></span> Version v3.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v3/version-v3.0.0/" class="md-nav__link"> <span class="md-ellipsis"> Release Notes v3.0 </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/v3/upgrade-v3.0/" class="md-nav__link"> <span class="md-ellipsis"> Upgrade from v2 to v3 </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_8" > <label class="md-nav__link" for="__nav_8_8_8" id="__nav_8_8_8_label" tabindex="0"> <span class="md-ellipsis"> Version v2.0 </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_8"> <span class="md-nav__icon md-icon"></span> Version v2.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v2/version-v2.0.0/" class="md-nav__link"> <span class="md-ellipsis"> Release Notes v2.0 </span> </a> </li> <li class="md-nav__item"> <a href="../../../releases/v2/upgrade-v2.0/" class="md-nav__link"> <span class="md-ellipsis"> Upgrade from v1 to v2 </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_8_9" > <label class="md-nav__link" for="__nav_8_8_9" id="__nav_8_8_9_label" tabindex="0"> <span class="md-ellipsis"> Version v1.0 </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_8_9_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8_8_9"> <span class="md-nav__icon md-icon"></span> Version v1.0 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../releases/v1/version-v1.0.0/" class="md-nav__link"> <span class="md-ellipsis"> Release Notes v1.0 </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_9" > <label class="md-nav__link" for="__nav_9" id="__nav_9_label" tabindex="0"> <span class="md-ellipsis"> Maintainers </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_9_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_9"> <span class="md-nav__icon md-icon"></span> Maintainers </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../maintenance/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/newcomers/" class="md-nav__link"> <span class="md-ellipsis"> Newcomers </span> </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/board-workflow/" class="md-nav__link"> <span class="md-ellipsis"> Sprintboard workflow </span> </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/pr-community-board/" class="md-nav__link"> <span class="md-ellipsis"> Community PR board </span> </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/release-management/" class="md-nav__link"> <span class="md-ellipsis"> Release management </span> </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/modules/" class="md-nav__link"> <span class="md-ellipsis"> Modules on GitHub </span> </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/branch-management/" class="md-nav__link"> <span class="md-ellipsis"> Branch management </span> </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/demosite/" class="md-nav__link"> <span class="md-ellipsis"> Demo site & docs </span> </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/docker-images/" class="md-nav__link"> <span class="md-ellipsis"> Docker images </span> </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/rfcs/" class="md-nav__link"> <span class="md-ellipsis"> RFCs </span> </a> </li> <li class="md-nav__item"> <a href="../../../maintenance/documentation/" class="md-nav__link"> <span class="md-ellipsis"> Writing documentation </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_10" > <label class="md-nav__link" for="__nav_10" id="__nav_10_label" tabindex="0"> <span class="md-ellipsis"> Onboard & Contribute </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_10_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_10"> <span class="md-nav__icon md-icon"></span> Onboard & Contribute </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../contribute/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../contribute/onboarding/" class="md-nav__link"> <span class="md-ellipsis"> Onboarding </span> </a> </li> <li class="md-nav__item"> <a href="../../../contribute/code-of-conduct/" class="md-nav__link"> <span class="md-ellipsis"> Code of conduct </span> </a> </li> <li class="md-nav__item"> <a href="../../../contribute/copyright-policy/" class="md-nav__link"> <span class="md-ellipsis"> Copyright policy </span> </a> </li> <li class="md-nav__item"> <a href="../../../contribute/roadmap/" class="md-nav__link"> <span class="md-ellipsis"> Roadmap </span> </a> </li> <li class="md-nav__item"> <a href="../../../contribute/translators-guide/" class="md-nav__link"> <span class="md-ellipsis"> Translators guide </span> </a> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" > <div class="md-sidebar__scrollwrap"> <div class="md-sidebar__inner"> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class="md-nav__title" for="__toc"> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> <li class="md-nav__item"> <a href="#enable-the-site-folder" class="md-nav__link"> <span class="md-ellipsis"> Enable the site folder </span> </a> </li> <li class="md-nav__item"> <a href="#configure-your-new-view" class="md-nav__link"> <span class="md-ellipsis"> Configure your new view </span> </a> </li> <li class="md-nav__item"> <a href="#register-the-view" class="md-nav__link"> <span class="md-ellipsis"> Register the view </span> </a> </li> <li class="md-nav__item"> <a href="#adding-javascript-to-your-template" class="md-nav__link"> <span class="md-ellipsis"> Adding JavaScript to your template </span> </a> </li> </ul> </nav> </div> </div> </div> <div class="md-content" data-md-component="content"> <article class="md-content__inner md-typeset"> <h1 id="creating-custom-code-and-views">Creating custom code and views<a class="headerlink" href="#creating-custom-code-and-views" title="Permanent link">¶</a></h1> <p><em>Introduced in InvenioRDM v11</em></p> <p>To extend your instance with your own custom code and views, you can use the predefined “site” folder in your instance. The site folder works just like any other installed package. This means that you no longer need to develop and publish a separate package to add custom views and functionality to your instance.</p> <p>Example of customizations could be the creation of new Python modules or utilities, new views (including Jinja templates) or REST APIs, new UI components and JavaScript code.</p> <p>Let's go through an example of making a new view with some JavaScript files in our instance.</p> <h2 id="enable-the-site-folder">Enable the site folder<a class="headerlink" href="#enable-the-site-folder" title="Permanent link">¶</a></h2> <p>First of all, you need to make sure the site folder is available and editable. When bootstrapping InvenioRDM, you will get the following option:</p> <div class="highlight"><pre><span></span><code>Select<span class="w"> </span>site_code: <span class="m">1</span><span class="w"> </span>-<span class="w"> </span>yes <span class="m">2</span><span class="w"> </span>-<span class="w"> </span>no Choose<span class="w"> </span>from<span class="w"> </span><span class="m">1</span>,<span class="w"> </span><span class="m">2</span><span class="w"> </span><span class="o">[</span><span class="m">1</span><span class="o">]</span>: </code></pre></div> <p>To generate the site folder, you will need to select option <code>1 - yes</code> (this is already the default option). Now, after the bootstrapping is finished, you can see a folder named "site" in the root folder of your instance, as well as the following line in your instance folder's Pipfile:</p> <div class="highlight"><pre><span></span><code><span class="p">[</span><span class="n">packages</span><span class="p">]</span> <span class="o">...</span> <span class="hll"><span class="n">my</span><span class="o">-</span><span class="n">site</span> <span class="o">=</span> <span class="p">{</span><span class="n">editable</span><span class="o">=</span><span class="n">true</span><span class="p">,</span> <span class="n">path</span><span class="o">=</span><span class="s2">"./site"</span><span class="p">}</span> </span></code></pre></div> <p>This means that the site folder will be installed as a package with the name <code>my-site</code>, and it is editable. This package now works as any other package installed in your instance (<code>invenio-app-rdm</code>, <code>invenio-communities</code>, etc.), allowing you to customize your instance and create new views and features without adding a separate package manually.</p> <p>When bootstrapped, your project will include the following structure:</p> <div class="highlight"><pre><span></span><code>├── site │ ├── my_site │ │ ├── assets │ │ ├── templates │ │ ├── __init__.py │ │ ├── views.py │ │ ├── webpack.py │ ├── setup.cfg │ ├── setup.py │ ├── tests </code></pre></div> <p>For existing installations, there is no automatic procedure. One easy way could be to generate a new InvenioRDM instance in another folder with the exact same naming as the original one, and then copy from it the <code>site</code> folder over to your existing instance's root directory.</p> <h2 id="configure-your-new-view">Configure your new view<a class="headerlink" href="#configure-your-new-view" title="Permanent link">¶</a></h2> <p>To get started with the custom view, add a new folder in <code>./site/my_site</code>. In this example, you will create a "support" view, hence name your folder "support". The folder structure should look like this:</p> <div class="highlight"><pre><span></span><code>├── site │ ├── my_site │ │ ├── support │ │ │ ├── __init__.py │ │ │ └── support.py </code></pre></div> <p>In <code>support.py</code>, you define the class for our new support-view:</p> <div class="highlight"><pre><span></span><code><span class="kn">from</span> <span class="nn">flask</span> <span class="kn">import</span> <span class="n">render_template</span> <span class="kn">from</span> <span class="nn">flask.views</span> <span class="kn">import</span> <span class="n">MethodView</span> <span class="k">class</span> <span class="nc">MySiteSupport</span><span class="p">(</span><span class="n">MethodView</span><span class="p">):</span> <span class="w"> </span><span class="sd">"""MySite support view."""</span> <span class="k">def</span> <span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span> <span class="bp">self</span><span class="o">.</span><span class="n">template</span> <span class="o">=</span> <span class="s2">"my_site/support.html"</span> <span class="k">def</span> <span class="nf">get</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span> <span class="w"> </span><span class="sd">"""Renders the support template."""</span> <span class="k">return</span> <span class="n">render_template</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">template</span><span class="p">)</span> </code></pre></div> <p>In the <code>__init__</code> method, you define the path to the template. The <code>get</code> method returns the rendered Jinja template as HTML.</p> <p>Create the new template <code>support.html</code> in the <code>templates</code> folder:</p> <div class="highlight"><pre><span></span><code>├── site │ ├── my_site │ │ ├── support │ │ ├── templates │ │ │ ├── semantic-ui │ │ │ │ ├── my_site │ │ │ │ │ └── support.html </code></pre></div> <p>Here is the code of the template:</p> <div class="highlight"><pre><span></span><code><span class="cp">{%</span>- <span class="k">extends</span> <span class="s2">"invenio_theme/page.html"</span> <span class="cp">%}</span> <span class="cp">{%</span> <span class="k">block</span> <span class="nv">page_body</span> <span class="cp">%}</span> <span class="x"> <div id="contact-page" class="ui container"></span> <span class="x"> <h1>Contact us</h1></span> <span class="x"> </span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">root_section</span> <span class="cp">%}</span> <span class="x"> <div id="root-container" class="panel-body"></div></span> <span class="x"> </span><span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span> <span class="x"> </div></span> <span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span> </code></pre></div> <p>The <code><div></code> element with id <code>root-container</code> will then later render a React application.</p> <h2 id="register-the-view">Register the view<a class="headerlink" href="#register-the-view" title="Permanent link">¶</a></h2> <p>Let's register the view configured in <code>support.py</code>. To do this, open the <code>views.py</code> file in <code>./site/my_site</code> and add a new URL rule within the <code>create_blueprint</code> function like the following:</p> <div class="highlight"><pre><span></span><code><span class="kn">from</span> <span class="nn">flask</span> <span class="kn">import</span> <span class="n">Blueprint</span> <span class="kn">from</span> <span class="nn">.support.support</span> <span class="kn">import</span> <span class="n">MySiteSupport</span> <span class="k">def</span> <span class="nf">create_blueprint</span><span class="p">(</span><span class="n">app</span><span class="p">):</span> <span class="n">blueprint</span> <span class="o">=</span> <span class="n">Blueprint</span><span class="p">(</span> <span class="s2">"my_site"</span><span class="p">,</span> <span class="vm">__name__</span><span class="p">,</span> <span class="n">template_folder</span><span class="o">=</span><span class="s2">"./templates"</span><span class="p">,</span> <span class="p">)</span> <span class="hll"> <span class="n">blueprint</span><span class="o">.</span><span class="n">add_url_rule</span><span class="p">(</span> </span><span class="hll"> <span class="s2">"/support"</span><span class="p">,</span> </span><span class="hll"> <span class="n">view_func</span><span class="o">=</span><span class="n">MySiteSupport</span><span class="o">.</span><span class="n">as_view</span><span class="p">(</span><span class="s2">"support_form"</span><span class="p">),</span> </span><span class="hll"> <span class="p">)</span> </span> <span class="k">return</span> <span class="n">blueprint</span> </code></pre></div> <p>That is really all you need to get your custom view available on your desired path. If you now open your instance on <code>/support</code>, you will see the new template we added, <code>support.html</code>:</p> <p><img alt="Custom view" src="../img/mysite_custom_views/mysite_custom_view.png" /></p> <h2 id="adding-javascript-to-your-template">Adding JavaScript to your template<a class="headerlink" href="#adding-javascript-to-your-template" title="Permanent link">¶</a></h2> <p>If you want, or need, to use JavaScript for your template, you will need to configure a Webpack bundle for the <code>site</code> folder. This is done in the predefined <code>webpack.py</code> file of <code>site/my_site</code>.</p> <p>Let's start by creating a JavaScript file in the assets folder:</p> <div class="highlight"><pre><span></span><code>├── site │ ├── my_site │ │ ├── assets │ │ │ ├── semantic-ui │ │ │ │ ├── js │ │ │ │ │ ├── my_site │ │ │ │ │ │ └── support.js │ │ ├── support │ │ ├── templates </code></pre></div> <p>The JavaScript file could be anything that should be executed when the page is rendered, as an example it can render a simple Semantic UI form:</p> <div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span> <span class="k">import</span><span class="w"> </span><span class="nx">ReactDOM</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react-dom"</span><span class="p">;</span> <span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Button</span><span class="p">,</span><span class="w"> </span><span class="nx">Form</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"semantic-ui-react"</span><span class="p">;</span> <span class="kd">const</span><span class="w"> </span><span class="nx">rootContainer</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"root-container"</span><span class="p">);</span> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span> <span class="w"> </span><span class="o"><</span><span class="nx">Form</span><span class="o">></span> <span class="w"> </span><span class="o"><</span><span class="nx">Form</span><span class="p">.</span><span class="nx">Input</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">"Name"</span><span class="w"> </span><span class="o">/></span> <span class="w"> </span><span class="o"><</span><span class="nx">Form</span><span class="p">.</span><span class="nx">TextArea</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">"Message"</span><span class="w"> </span><span class="nx">placeholder</span><span class="o">=</span><span class="s2">"Write your message here"</span><span class="w"> </span><span class="o">/></span> <span class="w"> </span><span class="o"><</span><span class="nx">Button</span><span class="w"> </span><span class="nx">type</span><span class="o">=</span><span class="s2">"submit"</span><span class="o">></span><span class="nx">Submit</span><span class="o"><</span><span class="err">/Button></span> <span class="w"> </span><span class="o"><</span><span class="err">/Form>,</span> <span class="w"> </span><span class="nx">rootContainer</span><span class="w"> </span><span class="c1">// Target container on where to render the React components.</span> <span class="p">);</span> </code></pre></div> <p>Now let's register this file in the Webpack bundle. In the file <code>webpack.py</code>, add a new entry, pointing to your new JavaScript file:</p> <div class="highlight"><pre><span></span><code><span class="kn">from</span> <span class="nn">invenio_assets.webpack</span> <span class="kn">import</span> <span class="n">WebpackThemeBundle</span> <span class="n">theme</span> <span class="o">=</span> <span class="n">WebpackThemeBundle</span><span class="p">(</span> <span class="vm">__name__</span><span class="p">,</span> <span class="s2">"assets"</span><span class="p">,</span> <span class="n">default</span><span class="o">=</span><span class="s2">"semantic-ui"</span><span class="p">,</span> <span class="n">themes</span><span class="o">=</span><span class="p">{</span> <span class="s2">"semantic-ui"</span><span class="p">:</span> <span class="nb">dict</span><span class="p">(</span> <span class="n">entry</span><span class="o">=</span><span class="p">{</span> <span class="hll"> <span class="s2">"my-site-support"</span><span class="p">:</span> <span class="s2">"./js/my_site/support.js"</span><span class="p">,</span> </span> <span class="p">},</span> <span class="p">),</span> <span class="p">},</span> <span class="p">)</span> </code></pre></div> <p>Here you can see the new alias for the JavaScript file <code>my-site-support</code>, which is the name that will be used to reference the bundle.</p> <p>Now, you are all set to include the JavaScript file to the template. In the template file <code>support.html</code>, add the following Jinja block:</p> <div class="highlight"><pre><span></span><code><span class="cp">{%</span>- <span class="k">extends</span> <span class="s2">"invenio_theme/page.html"</span> <span class="cp">%}</span> <span class="cp">{%</span> <span class="k">block</span> <span class="nv">page_body</span> <span class="cp">%}</span> <span class="x"> <div id="contact-page" class="ui container"></span> <span class="x"> <h1>Contact us</h1></span> <span class="x"> </span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">root_section</span> <span class="cp">%}</span> <span class="x"> <div id="root-container" class="panel-body"></div></span> <span class="x"> </span><span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span> <span class="x"> </div></span> <span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span> <span class="hll"><span class="cp">{%</span> <span class="k">block</span> <span class="nv">javascript</span> <span class="cp">%}</span> </span><span class="hll"><span class="x"> </span><span class="cp">{{</span> <span class="nb">super</span><span class="o">()</span> <span class="cp">}}</span> </span><span class="hll"><span class="x"> </span><span class="cp">{{</span> <span class="nv">webpack</span><span class="o">[</span><span class="s1">'my-site-support.js'</span><span class="o">]</span> <span class="cp">}}</span> </span><span class="hll"><span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span> </span></code></pre></div> <p>As you can see, we are extending the predefined template from <a href="https://github.com/inveniosoftware/invenio-theme/blob/master/invenio_theme/templates/semantic-ui/invenio_theme/page.html" target="_blank"><code>invenio-theme/page.html</code></a>. We are calling <code>{{ super() }}</code> as we don't want to replace the existing JavaScript bundles, but rather extend them to also include the new JavaScript file.</p> <p>To include the new JavaScript bundle in the final built assets, you will have to rebuild them by running the following command:</p> <div class="highlight"><pre><span></span><code>invenio-cli assets build </code></pre></div> <p>and restart the instance:</p> <div class="highlight"><pre><span></span><code>invenio-cli run </code></pre></div> <p>That's all! Now you should be all set to further develop your custom view as you like.</p> <p>The final result should look like this:</p> <p><img alt="Support page" src="../img/mysite_custom_views/mysite_support_page.png" /></p> </article> </div> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> </main> <footer class="md-footer"> <nav class="md-footer__inner md-grid" aria-label="Footer" > <a href="../custom_fields/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Create a new custom field"> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </div> <div class="md-footer__title"> <span class="md-footer__direction"> Previous </span> <div class="md-ellipsis"> Create a new custom field </div> </div> </a> <a href="../add_javascript/" class="md-footer__link md-footer__link--next" aria-label="Next: Add JavaScript"> <div class="md-footer__title"> <span class="md-footer__direction"> Next </span> <div class="md-ellipsis"> Add JavaScript </div> </div> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class="md-copyright"> <div class="md-copyright__highlight"> Copyright © 2019-2024 CERN, Northwestern University and contributors. </div> Made with <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener"> Material for MkDocs </a> </div> <div class="md-social"> <a href="https://github.com/inveniosoftware" target="_blank" rel="noopener" title="github.com" class="md-social__link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </a> </div> </div> </div> </footer> </div> <div class="md-dialog" data-md-component="dialog"> <div class="md-dialog__inner md-typeset"></div> </div> <script id="__config" type="application/json">{"base": "../../..", "features": ["navigation.tabs", "navigation.footer", "content.code.copy"], "search": "../../../assets/javascripts/workers/search.6ce7567c.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script> <script src="../../../assets/javascripts/bundle.525ec568.min.js"></script> </body> </html>