Smart Views, Smart actions, EmberJS send record data to smart action

Help me!
1

Hello,

I have a two questions concerning smart views (using EmberJS) :

  • Is it possible to send the product data ( {{ product.name }}, {{ product.price }} … ) in a route using a smart action ? Because i need to send the selected product to my API and i need this data.

  • I have a {{ product.price }} and i’ve been trying to divide that number doing {{ product.price / 100 }} but it does not work, is it possible to divide or sum variables in smart views?

Here is how my smartView works:

<div class="l-gallery-view-container">
  <section class="c-gallery">
    {{#each @records as |record|}}
    <div class="main-content">
      {{#each-in record.forest-products as |key product|}}
      <div class="row">
        <LinkTo
          class="c-gallery__image-container"
        > 
          <img class="c-gallery__image" src="tshirt.png">
        </LinkTo>
        <div class="select-row"><b>Numéro du produit :</b> {{ product.id }}</div>
      <div class="select-row"><b>Nom du produit :</b> {{ product.name }}</div>
      <div class="select-row"><b>Prix : </b>{{ product.price }} €</div>
        <Button::BetaButton
          @type="primary"
          @text="Ajouter cet article"
          @action={{fn this.triggerSmartAction @collection 'Ajouter cet article' record}}
        />
      </div>
      {{/each-in}}
      </div>
    {{/each}}
  </section>
  
  <Table::TableFooter
    @collection={{@collection}}
    @viewList={{@viewList}}
    @records={{@records}}
    @currentPage={{@currentPage}}
    @numberOfPages={{@numberOfPages}}
    @recordsCount={{@recordsCount}}
    @isLoading={{@isLoading}}
    @fetchRecords={{@fetchRecords}}
  />
</div>


import Component from '@glimmer/component';
import { action } from '@ember/object';
import { triggerSmartAction, deleteRecords, getCollectionId, loadExternalStyle, loadExternalJavascript } from 'client/utils/smart-view-utils';

export default class extends Component {
  @action
  triggerSmartAction(...args) {
    return triggerSmartAction(this, ...args);
  }

  @action
  deleteRecords(...args) {
    return deleteRecords(this, ...args);
  }
}

the record.forest-products in the each-in are provided by an API and displayed in a model table columns as an object :

collection('orderProduct', {
    actions: [{
        name: 'Ajouter un article',
        type: 'single',
        endpoint: '/forest/orderProduct/:recordId/addArticle',
    }],
    fields: [{
        field: 'products',
        type: 'Object',
        get: (orders) => {
            return models['service'].findOne({
                where: {id: orders.serviceId}
            }).then((service) => {
                return axios.get(myURL, {
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + process.env.SECRET
                    },
                }).then(products => {
                    return products.data.products
                }).catch(err => {
                    console.log(err)
                });
            })
        },
    }],
    segments: [],
});

Is there a way to get the data ? Or a way to make an external call inside a smart view with specific data ?

Thanks

2

Hello @Benjamin,

For your second question we are using ember-math-helpers, so you can simply do

{{div product.price 100}}

for the first one I’ll need more investigation

4

Thanks! As for the ember-math, do i have to add an import or anything in my component ?
It tried using it as below:

<div class="select-row"><b>Prix : </b> {{div product.price 100}} </div>

but i get an error in my console :

Error: Compile Error: Unexpected Helper div @ 0..0
5

Hello, have you been able to investigate ?

6

Sorry @Benjamin for the long time to reply I’ve been busy.

So for the {{div}} my bad it’s not included :sweat:. I tried too include them back, I’ll let you know once it gets to production.

For passing parameters to your smart action, it’s on our roadmap. We will let you know once we will have a way to do it

7

Alright, understood. Please let me know once it is released, i’m going to need it.

Thanks!

8

The {{div }} should be now availablke after a refresh :wink:

1 Like
9

That part is working now thanks ! I only need a way to pass parameters now ^^

10

Hello again, sorry to bother you but could I have a quick estimation on how much time it might take to implement the feature (send params to smart action). Just so I can reorganise the rest of my project.

Thanks

11

Hi @Benjamin we can’t provide you with an ETA at the moment. It’s not part of our short-term roadmap. I’ll keep you posted once we have good news!

12

Hello @Benjamin

We added a possibility to pass the values from the SmartView in the SmartAction. :tada:

Please take into account that the signature of triggerSmartAction is as follows

function triggerSmartAction(
  context, collection, actionName, records, callback = () => {}, values = null,
)

So in order to correctly pass the values, you would need to pass null value for the callback as the 5th argument of the function.

Let me know if you need any help.

1 Like