# Is it possible to import files for Smart Views?

**URL:** <https://community.forestadmin.com/t/is-it-possible-to-import-files-for-smart-views/4274>\
**Category:** Help me!\
**Tags:** howtos\
**Created:** [February 28, 2022, 8:48pm UTC](https://community.forestadmin.com/t/is-it-possible-to-import-files-for-smart-views/4274 "2022-02-28T20:48:13Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![David\_Panzarella](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/david_panzarella/32/2007_2.png) [@David\_Panzarella](https://community.forestadmin.com/u/David_Panzarella)\
**Post date:** [February 28, 2022, 8:48pm UTC](https://community.forestadmin.com/t/is-it-possible-to-import-files-for-smart-views/4274/1 "2022-02-28T20:48:13Z")

</div>

Wondering if it’s possible to include any files when working with Smart Views. I have several Smart Views with duplicate code that I’d love to be able to reduce and instead pull in a util file for these cases. Is it possible?

---

<div class="post-metadata">

**Author:** ![anon62739609](https://avatars.discourse-cdn.com/v4/letter/a/c2a13f/32.png) [@anon62739609](https://community.forestadmin.com/u/anon62739609)\
**Post date:** [March 1, 2022, 9:06am UTC](https://community.forestadmin.com/t/is-it-possible-to-import-files-for-smart-views/4274/2 "2022-03-01T09:06:40Z")

</div>

Hi @David_Panzarella,

Well there is no documented way to do it, but if your files are on your side you could do something like that maybe:

```javascript
export default class MyComponent extends Component {
  @service lianaServerFetch;
  // This is a private service
  @service smartCodeRegister;

  async loadMyOwnComponents(componentName) {
    const response = await this.lianaServerFetch(`/components/${componentName}`);
    const componentData = await response.json();
    
    // Style, template and component must be STRING
    await this.smartCodeRegister.registerStyle(componentName, componentData.style);
    await this.smartCodeRegister.registerTemplate(componentName, componentData.template);
    await this.smartCodeRegister.registerComponent(componentName, componentData.component);
  }
}

```

---

<div class="post-metadata">

**Author:** ![David\_Panzarella](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/david_panzarella/32/2007_2.png) [@David\_Panzarella](https://community.forestadmin.com/u/David_Panzarella)\
**Post date:** [March 1, 2022, 3:44pm UTC](https://community.forestadmin.com/t/is-it-possible-to-import-files-for-smart-views/4274/3 "2022-03-01T15:44:51Z")

</div>

Thanks, @anon62739609! I had no idea this was an actual thing!

For clarity here, this looks like this replaces any number of files needed hard-coded into each view: I assume you can register any or all for style, template, and component? Furthermore, would this only inject whatever component into each or would it completely replace them?

Ex: in my case, if I just wanted to import a utility component using `this.smartCodeRegister.registerComponent(componentName, componentData.component);`, and then use its available methods further down in the component, would that be possible? Or is it more like a complete replacement of the overall component?

---

<div class="post-metadata">

**Author:** ![anon62739609](https://avatars.discourse-cdn.com/v4/letter/a/c2a13f/32.png) [@anon62739609](https://community.forestadmin.com/u/anon62739609)\
**Post date:** [March 1, 2022, 4:09pm UTC](https://community.forestadmin.com/t/is-it-possible-to-import-files-for-smart-views/4274/4 "2022-03-01T16:09:43Z")

</div>

Let me know if I get it right, you want an abstract class to be used in multiple place, am I right ?

---

<div class="post-metadata">

**Author:** ![David\_Panzarella](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/david_panzarella/32/2007_2.png) [@David\_Panzarella](https://community.forestadmin.com/u/David_Panzarella)\
**Post date:** [March 1, 2022, 6:11pm UTC](https://community.forestadmin.com/t/is-it-possible-to-import-files-for-smart-views/4274/5 "2022-03-01T18:11:17Z")

</div>

Not exactly. What I’d like is a utility component that pulls in different methods just like if I were to say import Moment and use its methods throughout my smart view component. What I’d like to do is use the same constants or other utility files that have helper methods and such, like I’m using in my forest and route files, in my smart views as well. This way I could pull in those same constants and methods into my smart views, thus reducing the amount of duplicated code.

On a different note, it’d be great to have a way for Forest to automatically check a folder path (just like it does now for routes, models, etc) for our smart views, but I’ve been told this isn’t an option just yet. I wish it were because trying to either code directly in the smart view editors or having to copy/paste from a local editor is tedious at best. Version control and backup of said code is an obvious factor as well. If you have better strategies around this I’d love to hear them.

Thanks again for the help!

---

<div class="post-metadata">

**Author:** ![anon62739609](https://avatars.discourse-cdn.com/v4/letter/a/c2a13f/32.png) [@anon62739609](https://community.forestadmin.com/u/anon62739609)\
**Post date:** [March 2, 2022, 9:02am UTC](https://community.forestadmin.com/t/is-it-possible-to-import-files-for-smart-views/4274/6 "2022-03-02T09:02:03Z")

</div>

So for loading external javascript file you can simply use the ``

```javascript
import { loadExternalStyle, loadExternalJavascript } from 'client/utils/smart-view-utils';

export default class MyComponent extends Component {
  constructor(...args) {
    super(...args);

    this.loadUtilities();
  }

  async loadUtilities() {
    await loadExternalJavascript('https://my-environment-name.fr/my/utility/file.js');
  }
}

```

With the first code I gave you I think you can find a way to make it work. You’ll have to do a little bit aof code but not that much I think.

```javascript
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class WrapComponent extends Component {
  @service lianaServerFetch;
  // This is a private service
  @service smartCodeRegister;

  @tracked componentName;

  constructor(...args) {
    super(...args);

    this.loadMyOwnComponents('NameOfYourComponent');
  }

  async loadMyOwnComponents(componentName) {
    const response = await this.lianaServerFetch(`/components/${componentName}`);
    const componentData = await response.json();
    
    // Style, template and component must be STRING
    await this.smartCodeRegister.registerStyle(componentName, componentData.style);
    await this.smartCodeRegister.registerTemplate(componentName, componentData.template);
    await this.smartCodeRegister.registerComponent(componentName, componentData.component);

    this.componentName = componentName;
  }
}

```

And in your hbs:

```handlebars
{{#if this.componentName}}
  {{#let (component this.componentName) as |MyComponent|}}
    <MyComponent
      @myArgument="something"
      @anotherArgument="Else"
      class="my-css-class"
    />
  {{/let}}
{{/if}}

```

May be this could work (Not tested)

---

<div class="post-metadata">

**Author:** ![David\_Panzarella](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/david_panzarella/32/2007_2.png) [@David\_Panzarella](https://community.forestadmin.com/u/David_Panzarella)\
**Post date:** [March 2, 2022, 2:56pm UTC](https://community.forestadmin.com/t/is-it-possible-to-import-files-for-smart-views/4274/7 "2022-03-02T14:56:13Z")

</div>

Thanks for the follow-up here.

I’m surprised Forest doesn’t have the means to check locally as it does when checking for routes, models, etc. For these files, we simply need to do something like `import { previewUserDataHook } from 'utils/beaconUtils';` into our `forest/someCollectionFile.js`, and then we can use those methods throughout. I’m equally surprised that Forest also doesn’t have a `views` folder to store smart views, and then assigned them as we do with the actions within collections now. Food for thought. 🙂

---

<div class="post-metadata">

**Author:** ![anon62739609](https://avatars.discourse-cdn.com/v4/letter/a/c2a13f/32.png) [@anon62739609](https://community.forestadmin.com/u/anon62739609)\
**Post date:** [March 2, 2022, 4:10pm UTC](https://community.forestadmin.com/t/is-it-possible-to-import-files-for-smart-views/4274/8 "2022-03-02T16:10:38Z")

</div>

We already did a POC for smart views stored on the agent side but it’s not yet part of the short roadmap 😉

---

<div class="post-metadata">

**Author:** ![David\_Panzarella](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/david_panzarella/32/2007_2.png) [@David\_Panzarella](https://community.forestadmin.com/u/David_Panzarella)\
**Post date:** [March 3, 2022, 3:43pm UTC](https://community.forestadmin.com/t/is-it-possible-to-import-files-for-smart-views/4274/9 "2022-03-03T15:43:41Z")

</div>

Let’s go!! 🙂 Excited to see it come to fruition… now we just need to get upgraded to the next release so we’re ready for it when it comes out! 😉

---

<div class="post-metadata">

**Author:** ![David\_Panzarella](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/david_panzarella/32/2007_2.png) [@David\_Panzarella](https://community.forestadmin.com/u/David_Panzarella)\
**Post date:** [March 8, 2022, 5:32am UTC](https://community.forestadmin.com/t/is-it-possible-to-import-files-for-smart-views/4274/10 "2022-03-08T05:32:43Z")

</div>

@anon62739609 On a similar note with this, I’m trying to add a call to `lianaServerFetch` to remove the need to pull in a Util method at all, and instead call a route that can handle doing all the work needed. It seems though that I can’t post to a route using `lianaServerFetch`. Can you confirm this?

In my case I’m trying to build out a URL per item in my smart view like so:

```javascript
// component.js - smartview
const response = await this.lianaServerFetch.post('forest/actions/generate-vip-link', { userStubId: suggestedTalentStub['forest-UserStub'].id });

// suggestedTalentStub routes 
router.post('/actions/generate-vip-link',
  async (req, res) => {
    const { userStubId } = req.body;
    const { email } = req.user;

    // do some stuff
    return link;

```

Any thoughts on how to pull this off?

---

<div class="post-metadata">

**Author:** ![David\_Panzarella](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/david_panzarella/32/2007_2.png) [@David\_Panzarella](https://community.forestadmin.com/u/David_Panzarella)\
**Post date:** [March 8, 2022, 4:09pm UTC](https://community.forestadmin.com/t/is-it-possible-to-import-files-for-smart-views/4274/11 "2022-03-08T16:09:40Z")

</div>

I was able to figure this one out:

```javascript
  // Fetch the data from the API
      const response = await this.lianaServerFetch.fetch('/forest/api/smart-charts/chart-1', {
       method: 'POST',
       body: JSON.stringify(args)
      });
      this.data = await response.json();

```