React smart view link

Help me!
1

Hello,

I’m currently creating a smart view using the react builder, I wasn’t able to find examples to create links to the details of each record, how do you deal with this ?

I would like to wrap each expertise box into its link, my current code:

return (
      <div className='expertise-container'>
        {  
          records && records.map((record, i) => 
            <div key={record['forest-id']} className='expertise-box'>
              <h2>Expertise: {record['forest-mentorExpertiseType']['forest-value']}</h2>
              <div className='expertise-box__title'>{record['forest-title']}</div>
              <hr/>
              <div className='expertise-box__desc'>{record['forest-description']}</div>
            </div>
          )
        }
      </div>
    );

Thank you!

2

I also used the code here to create pagination however it’s not working with the following code, it keeps giving me the same page:

    const goNext = () => {
      if (currentPage < numberOfPages) {
        return fetchRecords({ page: currentPage + 1 })
      }
    };
3

Hi @Simon_BRAMI1,

There is an example here (what you shared actually). Just click on the React tab.

For the next page try this instead:

    const goNext = () => {
      if (currentPage < numberOfPages) {
        return fetchRecords({ currentPage: currentPage + 1 })
      }
    };

I renamed page to currentPage. Let me know if it works. It should if I’m not mistaken. I will correct it in the doc if so :pray:

1 Like
4

It works thanks !

Do you have any idea if it is possible while using a smart view inside a summary related data to keep the breadcrumb hierarchy when clicking the anchor tag ? Currently as I’m using an href like the example:

<a href={`/${baseUrl.join('/')}/${collection.id}/index/record/${collection.id}/${record.id}/details`}
    className="c-gallery__image-container"
    key={record.id}>

It fully reloads the page to the detail of this collection and I’m losing the breadcrumb of the previous collection. It’s not a big deal but not very convenient for ops.

Let me know if you have a solution for this :pray:

Thank you

5

I just tested and discovered that you can yes.

import React from 'react';
import WithEmberSupport from 'ember-react-components';
import { inject as service } from '@ember/service';

@WithEmberSupport
export default class extends React.Component {
  @service router;

  render() {
    const {
      records,
      collection,
      numberOfPages,
      recordsCount,
      currentPage,
      searchValue,
      isLoading,
    } = this.props;

    const redirectToRecord = (record) => this.router.transitionTo('project.rendering.data.collection.view-edit.details', collection.id, record.id);
    return (
      <div className='expertise-container'>
        {  
          records && records.map((record, i) => 
            <div key={record['forest-id']} className='expertise-box' onClick={() => redirectToRecord(record)}>
              <h2>Expertise: {record['forest-mentorExpertiseType']['forest-value']}</h2>
              <div className='expertise-box__title'>{record['forest-title']}</div>
              <hr/>
              <div className='expertise-box__desc'>{record['forest-description']}</div>
            </div>
          )
        }
      </div>
    );
  }
}