Link to record info in a smart view

This example shows you how to redirect to:
the detail view of a record
the detail view of the associated record
in a smart view.
Here a Book belongsTo an Author. We will see how to redirect to the book detail view and author detail view from a book gallery view.
Requirements
An admin backend running on forest-express-sequelize
How it works
Directory: /models
This directory contains the books.js and authors.js files where the models are defined. 
books.js
authors.js
/models/books.js
1
module.exports = (sequelize, DataTypes) => {
2
  const { Sequelize } = sequelize;
3
​
4
  const Books = sequelize.define('books', {
5
    attributes: {
6
      type: DataTypes.JSONB,
7
    },
8
  }, {
9
    tableName: 'books',
10
    timestamps: false,
11
    schema: process.env.DATABASE_SCHEMA,
12
  });
13
​
14
  Books.associate = (models) => {
15
    Books.belongsTo(models.authors, {
16
      foreignKey: {
17
        name: 'authorIdKey',
18
        field: 'authorId',
19
      },
20
      as: 'author',
21
    });
22
  };
23
​
24
  return Books;
25
};
Copied!
/models/authors.js
1
module.exports = (sequelize, DataTypes) => {
2
  const { Sequelize } = sequelize;
3
​
4
  const Authors = sequelize.define('authors', {
5
    name: {
6
      type: DataTypes.STRING,
7
    },
8
  }, {
9
    tableName: 'authors',
10
    timestamps: false,
11
    schema: process.env.DATABASE_SCHEMA,
12
  });
13
​
14
  return Authors;
15
};
Copied!
File: template.hbs
This file contains handlebars and HTML declaration.
1
template.hbs
2
​
3
<style>
4
  .l-gallery-view-container {
5
    flex-grow: 1;
6
    width: 100%;
7
    height: 100%;
8
    overflow: hidden;
9
    position: relative;
10
  }
11
​
12
  .c-gallery {
13
    padding: 15px;
14
    overflow-y: auto;
15
    width: 100%;
16
    position: absolute;
17
    left: 0;
18
    top: 0;
19
    bottom: 40px;
20
    display: flex;
21
    flex-direction: row;
22
    flex-wrap: wrap;
23
  }
24
​
25
  .c-gallery__image {
26
    height: 197px;
27
    width: 138px;
28
    margin: 10px;
29
    border: 1px solid var(--color-beta-on-surface_border);
30
    border-radius: 2px;
31
    transition: all .3s ease-out;
32
  }
33
​
34
  .c-gallery__image:hover {
35
    transform: scale(1.05);
36
  }
37
​
38
  .l-gallery-book-container {
39
    position: relative;
40
  }
41
​
42
  .c-gallery__author {
43
    position: absolute;
44
    left: 0;
45
    right: 0;
46
    bottom: 8px;
47
    padding: 2px 4px;
48
    border-radius: 2px;
49
    background-color: var(--color-beta-surface);
50
    text-align: center;
51
    align-items: center;
52
  }
53
</style>
54
​
55
<div class="l-gallery-view-container">
56
  <section class="c-gallery">
57
    {{#each @records as |record|}}
58
      <div class="l-gallery-book-container">
59
        <!-- redirect to book detail view -->
60
        <LinkTo
61
          @route="rendering.data.collection.list.viewEdit.details"
62
          @models={{array @collection.id record.id}}
63
          class="c-gallery__image-container"
64
        >
65
          <img class="c-gallery__image" src={{record.forest-attributes.picture}}>
66
        </LinkTo>
67
        
68
        <!-- redirect to author detail view -->
69
        <BetaLinkTo
70
          @type="primary"
71
          @size="normal"
72
          @underline={{false}}
73
          @text={{record.forest-author.forest-name}}
74
          @routeName="rendering.data.collection.list.viewEdit.details"
75
          @routeParameters={{array this.authorCollectionId record.forest-author.id}}
76
          @class="c-gallery__author"
77
        />
78
      </div>
79
    {{/each}}
80
  </section>
81
  
82
  <Table::TableFooter
83
    @collection={{@collection}}
84
    @viewList={{@viewList}}
85
    @records={{@records}}
86
    @currentPage={{@currentPage}}
87
    @numberOfPages={{@numberOfPages}}
88
    @recordsCount={{@recordsCount}}
89
    @isLoading={{@isLoading}}
90
    @fetchRecords={{@fetchRecords}}
91
  />
92
</div>
Copied!
File: javascript.js
This file handle all events or actions
1
component.js
2
​
3
import Component from '@ember/component';
4
import { computed } from '@ember/object';
5
import SmartViewMixin from 'client/mixins/smart-view-mixin';
6
​
7
export default Component.extend(SmartViewMixin, {
8
  tagName: '',
9
​
10
  authorCollectionId: computed(function () {
11
    return this.getCollectionId('authors');
12
  }),
13
});
Copied!

How to's - Previous

Re-use a smart field logic

Next - How to's

Display data in html format

Last modified 1yr ago

Copy link

Contents