CINXE.COM
Override UI React components - 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/override_components/"> <link rel="prev" href="../add_javascript/"> <link rel="next" href="../search_terms_migration/"> <link rel="icon" href="../../../images/favicon.svg"> <meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.5.40"> <title>Override UI React components - 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="#how-to-override-ui-react-components" 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"> Override UI React components </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"> <a href="../custom_code/" class="md-nav__link"> <span class="md-ellipsis"> Create custom code and views </span> </a> </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 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"> Override UI React components </span> <span class="md-nav__icon md-icon"></span> </label> <a href="./" class="md-nav__link md-nav__link--active"> <span class="md-ellipsis"> Override UI React components </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="#override-react-components" class="md-nav__link"> <span class="md-ellipsis"> Override React components </span> </a> </li> <li class="md-nav__item"> <a href="#steps" class="md-nav__link"> <span class="md-ellipsis"> Steps </span> </a> <nav class="md-nav" aria-label="Steps"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#identify-how-to-override" class="md-nav__link"> <span class="md-ellipsis"> Identify how to override </span> </a> </li> <li class="md-nav__item"> <a href="#find-the-react-overridable-id" class="md-nav__link"> <span class="md-ellipsis"> Find the React Overridable ID </span> </a> </li> <li class="md-nav__item"> <a href="#the-mapping-file" class="md-nav__link"> <span class="md-ellipsis"> The mapping file </span> </a> </li> <li class="md-nav__item"> <a href="#new-component-creation" class="md-nav__link"> <span class="md-ellipsis"> New component creation </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="#other-examples" class="md-nav__link"> <span class="md-ellipsis"> Other examples </span> </a> </li> </ul> </nav> </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="#override-react-components" class="md-nav__link"> <span class="md-ellipsis"> Override React components </span> </a> </li> <li class="md-nav__item"> <a href="#steps" class="md-nav__link"> <span class="md-ellipsis"> Steps </span> </a> <nav class="md-nav" aria-label="Steps"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#identify-how-to-override" class="md-nav__link"> <span class="md-ellipsis"> Identify how to override </span> </a> </li> <li class="md-nav__item"> <a href="#find-the-react-overridable-id" class="md-nav__link"> <span class="md-ellipsis"> Find the React Overridable ID </span> </a> </li> <li class="md-nav__item"> <a href="#the-mapping-file" class="md-nav__link"> <span class="md-ellipsis"> The mapping file </span> </a> </li> <li class="md-nav__item"> <a href="#new-component-creation" class="md-nav__link"> <span class="md-ellipsis"> New component creation </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="#other-examples" class="md-nav__link"> <span class="md-ellipsis"> Other examples </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="how-to-override-ui-react-components">How to override UI React components<a class="headerlink" href="#how-to-override-ui-react-components" title="Permanent link">¶</a></h1> <p><em>Introduced in InvenioRDM v11</em></p> <p>This documentation is targeted to developers who want to customize specific UI React components in an instance. For this guide, we assume that you are familiar with React and JavaScript.</p> <h2 id="override-react-components">Override React components<a class="headerlink" href="#override-react-components" title="Permanent link">¶</a></h2> <div class="admonition warning"> <p class="admonition-title">Experimental feature</p> <p>You can now override React components following this guide. However, the overriding mechanism in InvenioRDM v11 is not finalized and it has a few limitations. Be aware that future releases of InvenioRDM might introduce breaking changes. We will document them as extensively as possible.</p> <p><strong>Use it at your own risk!</strong></p> </div> <p>The UI of InvenioRDM is composed of classic HTML web pages for mostly static content, and React web apps for very dynamic content to enhance the user experience. While a <a href="../../../customize/look-and-feel/templates/">dedicated guide</a> describes how to override HTML web pages (Jinja templates), this guide focus on how to override React components.</p> <p>InvenioRDM uses the React library <a href="https://github.com/indico/react-overridable"><code>react-overridable</code></a>. The library provides a mechanism to mark React components as "overridable" by id. Developers can define a map <code>{ id: Overridden React component }</code>, which is then applied when each React component is rendered: the overridden component is rendered instead of the default one.</p> <p>As example for this guide, you will learn how to override the UI React component <strong>in the upload form that marks a record as "Metadata only"</strong>. More specifically, you will replace the "Metadata-only record" checkbox with a toggle, a "switch-like" component.</p> <p><img alt="Metadata-only record checkbox" src="../img/metadata_only_checkbox.png" /></p> <h2 id="steps">Steps<a class="headerlink" href="#steps" title="Permanent link">¶</a></h2> <h3 id="identify-how-to-override">Identify how to override<a class="headerlink" href="#identify-how-to-override" title="Permanent link">¶</a></h3> <p>At the moment, the easiest way to understand how to identify if the component that you want to override is a classic HTML component or a React component is to use the Developer Tools in your browser (e.g. <a href="https://developer.chrome.com/docs/devtools/">Chrome</a> or <a href="https://firefox-source-docs.mozilla.org/devtools-user/">Firefox DevTools</a>). You can inspect the code and take advantage of some useful <a href="https://beta.reactjs.org/learn/react-developer-tools">React browser extensions</a> to select and inspect elements:</p> <p><img alt="React browser extension example" src="../img/react_browser_extension_example.png" /></p> <p>You can then find the component in the InvenioRDM modules source code, searching it in your local development environment or using the search feature in GitHub in the <a href="https://github.com/search?q=org%3Ainveniosoftware+FileUploaderToolbar&type=code">inveniosoftware organization</a>.</p> <p>You can always <a href="../../getting-started/help/">ask for help</a>!</p> <h3 id="find-the-react-overridable-id">Find the React Overridable ID<a class="headerlink" href="#find-the-react-overridable-id" title="Permanent link">¶</a></h3> <p>The React component's overridable id for the '<code>Metadata-only record</code>' checkbox component is <code>ReactInvenioDeposit.FileUploaderToolbar.MetadataOnlyToggle.container</code>. It can be found in the <a href="https://github.com/inveniosoftware/react-invenio-deposit/blob/040b698967e7fee14ac7fe466e49f883efbe8c47/src/lib/components/FileUploader/FileUploaderToolbar.js#L55">react-invenio-deposit</a> module.</p> <h3 id="the-mapping-file">The mapping file<a class="headerlink" href="#the-mapping-file" title="Permanent link">¶</a></h3> <p>In a new InvenioRDM v11 or above installations, an almost empty file named <code>mapping.js</code> is available at the following path in your <code>assets</code> folder:</p> <div class="highlight"><pre><span></span><code>├── assets | ├── js | | ├── invenio_app_rdm | | | ├── overridableRegistry | | | | ├── mapping.js </code></pre></div> <p>For existing installations, you will have to create it. It is a very simple file:</p> <div class="highlight"><pre><span></span><code><span class="k">export</span><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">overriddenComponents</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{};</span> </code></pre></div> <p>The <code>const overriddenComponents</code> is the map that will contain all your future overridden components.</p> <h3 id="new-component-creation">New component creation<a class="headerlink" href="#new-component-creation" title="Permanent link">¶</a></h3> <p>Let's create a new React component, very similar to the default <code>FileUploaderToolbar</code>, changing the UI component that will render. In the same file <code>mapping.js</code>, add the following code above the <code>const overriddenComponents</code>:</p> <div class="highlight"><pre><span></span><code><span class="w"> </span><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="w"> </span><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Checkbox</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="w"> </span><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">useFormikContext</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">"formik"</span><span class="p">;</span> <span class="w"> </span><span class="k">import</span><span class="w"> </span><span class="nx">PropTypes</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"prop-types"</span><span class="p">;</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">MetadataToggle</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">props</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">filesEnabled</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">props</span><span class="p">;</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">setFieldValue</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useFormikContext</span><span class="p">();</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">handleOnChangeMetadataOnly</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">setFieldValue</span><span class="p">(</span><span class="s2">"files.enabled"</span><span class="p">,</span><span class="w"> </span><span class="o">!</span><span class="nx">filesEnabled</span><span class="p">);</span> <span class="w"> </span><span class="nx">setFieldValue</span><span class="p">(</span><span class="s2">"access.files"</span><span class="p">,</span><span class="w"> </span><span class="s2">"public"</span><span class="p">);</span> <span class="w"> </span><span class="p">};</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span> <span class="w"> </span><span class="o"><</span><span class="nx">Checkbox</span> <span class="w"> </span><span class="nx">toggle</span> <span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">"Metadata-only record"</span> <span class="w"> </span><span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">handleOnChangeMetadataOnly</span><span class="p">}</span> <span class="w"> </span><span class="o">/></span> <span class="w"> </span><span class="p">);</span> <span class="w"> </span><span class="p">};</span> <span class="w"> </span><span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="nx">MetadataToggle</span><span class="p">;</span> <span class="w"> </span><span class="nx">MetadataToggle</span><span class="p">.</span><span class="nx">propTypes</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">filesEnabled</span><span class="o">:</span><span class="w"> </span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">bool</span><span class="p">.</span><span class="nx">isRequired</span><span class="p">,</span> <span class="w"> </span><span class="p">};</span> </code></pre></div> <p>Now, change the map by adding your new component:</p> <div class="highlight"><pre><span></span><code><span class="p">...</span> <span class="k">export</span><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">overriddenComponents</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="s2">"ReactInvenioDeposit.FileUploaderToolbar.MetadataOnlyToggle.container"</span><span class="o">:</span><span class="w"> </span><span class="nx">MetadataToggle</span><span class="p">,</span> <span class="p">};</span> </code></pre></div> <p>Lastly, rebuild your assets and run the instance:</p> <div class="highlight"><pre><span></span><code>cd my-site invenio-cli assets build invenio-cli run </code></pre></div> <p>When navigating to the upload form, you should now see your new React component instead of the default:</p> <p><img alt=""Metadata-only record" toggle" src="../img/metadata_only_toggle.png" /></p> <h2 id="other-examples">Other examples<a class="headerlink" href="#other-examples" title="Permanent link">¶</a></h2> <p>Let's hide completely the '<code>Metadata-only record</code>'checkbox from the upload form.</p> <p>It is possible to remove a component using the overridable strategy. In the previous example, instead of declaring a target component <code>MetadataToggle</code> you can simply change the map to:</p> <div class="highlight"><pre><span></span><code><span class="k">export</span><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">overriddenComponents</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="s2">"ReactInvenioDeposit.FileUploaderToolbar.MetadataOnlyToggle.container"</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="kc">null</span><span class="p">,</span> <span class="p">};</span> </code></pre></div> <p>The expression <code>() => null</code> above is defining an "empty" component, thus removing it from the upload form.</p> <p>In order to see more examples in action, you can check the <a href="https://github.com/zenodo/zenodo-rdm">zenodo-rdm</a> repository!</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="../add_javascript/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Add JavaScript"> <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"> Add JavaScript </div> </div> </a> <a href="../search_terms_migration/" class="md-footer__link md-footer__link--next" aria-label="Next: Create search terms mappings"> <div class="md-footer__title"> <span class="md-footer__direction"> Next </span> <div class="md-ellipsis"> Create search terms mappings </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>