Replacing & Adding Components

The Members Portal is built using individual ReactJS and NexJS components connected to MobX data stores that retrieve data from the Nexudus API and feed that data to the components.

You can replace any component included in one or more pages of the Members Portal to change their behavior and layout. You can also create new components.

Replacing and adding components can help you achieve customization such as:

• Replacing the header section of every page with your own.

• Replacing the way member profiles are displayed on the site or what specific data is shared.

• Adding custom components to any page.

Replacing Components

Replacing an existing component is a two-step process. You first need to find your component's attribute name and then create a custom component with the same name to change the original component's layout and behavior.

1. Finding Your Component's Attribute Name

Each component has a unique HTML attribute named data-component-name. You need this data-component-name to replace existing components with your own.

You can easily find a component's data-component-name using your browser's DOM inspection option. Simply right click on the page to see and highlight the relevant component's name.

For example, you want to edit the header component highlighted below. The header's data-component-name is MainHeader.

Once you have identified your component's data-component-name, copy it and move to the next step - creating your own version of that component.

2. Creating Your Own Version of the Component

Now that you have your component's data-component-name, you can create our own version of the component from the Web templates editor on the Admin Panel

1. Log in to dashboard.nexudus.com if you aren't already.

2. Click Settings > Web template editor. 

3. Select the relevant Members Portal Version.

4. Click on the Pages & components folder.

5. Click Add file.

6. Add your data-component-name followed by .jsx.

7. Press Enter.

Your new component's file should pop up within a few seconds. You can now edit the component's code as needed to complete your customization.

Creating New Components

You can also create a new custom component and load them in any existing page of your Members Portal. Components use JavaScript and ReactJS.

As an example, we will create a new component to display the first page of the member's directory on the home page.

1. Log in to dashboard.nexudus.com if you aren't already.

2. Click Settings > Web template editor. 

3. Select the relevant Members Portal Version.

4. Click on the Pages & components folder.

5. Click Add file.

We will call this new component HomeMembersList.jsx.

6. Press Enter.

Use the code snippet below to have the CommunityStore load the member's directory and 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;

We want to add this new component to the home page of the Members Portal, which means we need to replace the standard home page component with a new one that includes the original code alongside our new component.

To do this, we first need to obtain the data-component-name of the home page component. You can easily find any component's attribute by inspecting a page that includes the component.

In this case, the component's data-component-name is HomeDashboard.

Create a new custom component file named HomeDasboard.jsx via Settings > Web template editor > Pages & components.

Nexudus automatically opens 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'}/>

The final code for the HomeDashboard.jsx file should look 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'}/>
</div>
</div>            
{/*  END DASHBOARD BODY */}</div>);
})))
);

LoadableComponent is a ReactJS functional component. Keep this in mind when passing additional props to. Specially, if these props are functions/callbacks, the component will end up reloading permanently. To avoid this, use "useCallback" or _.memoize from loadash to momize the function.

Component Path

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'

You can use a relative URL if you are importing a custom component.

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

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.

Component Path Errors

The most common error you can get while working on custom pages is a component error. Simply put, some components use relative paths instead of absolute paths.

Relative paths such as './' or '../' don't work on overridden components, as our templates can't read those dynamically. The solution to this issue is to look for relative paths in the component of your custom page and switch them to the relevant absolute paths as shown below.