Replacing or adding components

You can customise your Nexudus portal in more detail by accessing the code used in the different pages. There are three ways you can do this.

Use this method if you want to create your own version of specific components in one or more pages. For example:

  • Replace the header section of every page with your own.
  • Replace the way member profiles are displayed on the site or what specific data is shared.
  • Add additional components to any page.
You will need a good understanding of JavaScript, ReactJS, HTML and CSS to use this method.  

Understanding component names

The Nexudus portal is built based on individual components (built using ReactJS and NextJS) connected to data stores (based on MobX), which help retrieve data from the Nexudus API and feed that data into those components.

Each component has a unique name which is displayed as an HTML attribute named data-component-name. You can use your browser's DOM inspection option to highlight and see the component names.

For example, the <header> HTML component is highlighted below. The data-component-name HTML attribute assigned to it is "Header".

mceclip0.png

Search for the component unique name

 

Replacing a component

Once you have identified a component by its name, you can create your own version of that component. This will enable you to change its layout and behaviour.

To replace a component, follow the next steps:

    1. Identify the component name wrapping the section you plan to replace.
    2. Create a new custom page file from Settings > Website > Templates > Custom Pages. The name of the page must be exactly as the name of the component, adding ".jsx" to the end. In our example above (Header), the name of the new custom page should be Header.jsx.

      You don't need to provide a Title for the file but you should make sure the page is marked as Active and Private.

      mceclip1.png
                                                                                     Add new template file
    3. Save the new custom page. At this point, Nexudus will create a new file in your Custom Pages list and provide the code for the component. At this point, your portal will be unchanged but it will be using your custom page as the component you have selected.

      mceclip2.png 

           4. Make the required changes to the component.

 

Creating a new component

You can also create a new component and load those in any existing page. Components are written in JavaScript and ReactJS.

As an example, we will create a new component to show the first page of the member's directory on the home page. To do this, follow these steps:

  1. Create a new custom page file from Settings > Website > Templates > Custom Pages. We will call this new component "HomeMembersList.jsx".

    We will use the code below which brings the CommunityStore to load the member's directory and also use the existing MembersList component to render a list of members.

    
    import React, { Component } from 'react';
    import { inject, observer } from 'mobx-react';
    import { withTranslation } from 'react-i18next';
    import { MembersList } from 'ui/_pages/directory/MembersList';
    import { withRouter } from 'next/router';
    
    @withRouter
    @withTranslation()
    @inject('appStore', 'communityStore')
    @observer
    class CustomPage extends Component {
        
            componentDidMount() {
                const { t, appStore, router, communityStore } = this.props;
                communityStore.loadMembersDirectory({ ...router.query })
                .catch((err) => null);
            }
            render() {
                return (
                    <div className="box-shaded dashboard-box dashboard-box--same-height">
                        <div className="dashboard-box__inner">
                            <div className="dashboard-box__head">
                                <h3 className="dashboard-box__head__title">Some of our members</h3>
                            </div>
                            <div className="dashboard-box__body">
                                <MembersList />
                            </div>
                        </div>
                    </div>
                );
            }
    }
    
    export default CustomPage;
    

     

  2. We want to add this new component to the home page of our portal, which means we need to replace the standard home page component with a new one which will include the original code plus our new component. 
  3. To do this, we first need to obtain the component name for the home page. You can do this by looking at the data-component-name HTML attributes on the home page. In this case, the component name is HomeDashboard.

    mceclip3.png

  4. Create a new custom page file from Settings > Website > Templates > Custom Pages with the component name we located and ending in ".jsx", in this case "HomeDasboard.jsx". Open this new file.
  5. Nexudus automatically brings the default code for that component, to which we will add some code to bring in the new custom component we created.

    To import custom components, we need to use the LoadableComponent and pass the URL of the custom component as the URL property.

    
    <LoadableComponent url={'/en/page/homememberslist?raw=true'}/>
        
  6. The final code for the HomeDashboard.jsx file looks like this
    
    import React from 'react';
    import Link from 'next/link';
    import { routes } from 'env/routes';
    import { useTranslation } from 'react-i18next';
    import { withRouter } from 'next/router';
    import { inject, observer } from 'mobx-react';
    import withCustomComponent from 'ui/components/withCustomComponent';
    import BookingsWidget from 'ui/_pages/home/components/BookingsWidget/BookingsWidget';
    import InvoicesWidget from 'ui/_pages/home/components/InvoicesWidget';
    import EventsWidget from 'ui/_pages/home/components/EventsWidget/EventsWidget';
    import VisitorsWidget from 'ui/_pages/home/components/VisitorsWidget';
    import BenefitsWidget from 'ui/_pages/home/components/BenefitsWidget/BenefitsWidget';
    import { HomePageDashboardHeader } from 'ui/_pages/home/components/DashboardHeader';
    import LoadableComponent from 'env/LoadableComponent/LoadableComponent'
    export const HomeDashboard = withCustomComponent('HomeDashboard')(
      inject('appStore')(
        withRouter(
          observer(({ componentName, appStore }) => {
            const { t } = useTranslation();
            const { configuration } = appStore;
            return (
              <div data-component-name={componentName}>
                <HomePageDashboardHeader />
                {/*  DASHBOARD BODY */}
                <div className="dashboard-body">
                  <div className="container">
                    <div className="row dashboard-row">
                      <div className="col-md-6">{<BookingsWidget />}</div>
                      {configuration['Members.ViewInvoices'] && (
                        <div className="col-md-6">{<InvoicesWidget />}</div>
                      )}
                      {configuration['PublicWebSite.Events'] && (
                        <div className="col-md-6">{<EventsWidget />}</div>
                      )}
                      <div className="col-md-6">{<VisitorsWidget />}</div>
                      <div className="col-md-6">{<BenefitsWidget />}</div>
                    </div>
                    <LoadableComponent url={'/en/page/homememberslist?raw=true'}/>
                  </div>
                </div>
                {/*  END DASHBOARD BODY */}
              </div>
            );
          })
        )
      )
    );
    
        

 

Component Paths

All components paths when importing existing components should be relative to the root of the project. 

....
import withCustomComponent from 'ui/components/withCustomComponent';
import BookingsWidget from 'ui/_pages/home/components/BookingsWidget/BookingsWidget';
import InvoicesWidget from 'ui/_pages/home/components/InvoicesWidget';
import EventsWidget from 'ui/_pages/home/components/EventsWidget/EventsWidget';
import VisitorsWidget from 'ui/_pages/home/components/VisitorsWidget';
import BenefitsWidget from 'ui/_pages/home/components/BenefitsWidget/BenefitsWidget';
import { HomePageDashboardHeader } from 'ui/_pages/home/components/DashboardHeader';
import LoadableComponent from 'env/LoadableComponent/LoadableComponent'
....


If you are importing a custom component, you can use a relative URL

<LoadableComponent url={'/en/page/homememberslist?raw=true'}/>

 

Debugging Custom Components

If your custom components fail to load, they will output debug errors to the browser console so this would be the first place to look at for any information that can help you debug the issue.

mceclip0.png

Was this article helpful?
2 out of 3 found this helpful
Have more questions? Submit a request

Comments

Please sign in to leave a comment.