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

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

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

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

Hello, have you been able to investigate ?

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

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

Thanks!

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

1 Like

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

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

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!