Embed Datapage in Angular Application

[Tr0Jan]

Hello, 

I am looking to build an Angular 8 application and call Caspio datapages from inside.

 

However, it does not seem to be working.

When I insert the embedded tag as <script type="text/javascript" src="https://c1acu417.caspio.com/dp/A57E7000f6812a2641704a929225/emb"></script>

 

Nothing shows up.

 

I have tested on static HTML page and it works fine.

 

Does anyone have any experience or ideas as how to achieve this in Angular?

 

Thanks,

[Hastur]

Hello @Tr0Jan

To embed Caspio DataPages you can use JavaScript, to create <script> element, define the "src" attribute and then append it to your page.
Here is the example:

const elem = document.createElement('script');
elem.type = 'text/javascript';
elem.src = 'https://deploy_URL/';
document.GET_NEEDED_ELEMENT.appendChild(elem);

 

[DefinitelyNot31337]

Hello @Tr0Jan,

 

I believe that Angular JS/2+ framework, similar to other popular JavaScript front-end frameworks/libraries (React, Vue),  do not allow execution of external scripts (as widgets) and I haven't been able to disable this 'feature'.

 

What I did to work this around was to deploy DataPages as iFrames. However, you would be needing JavaScript to resize and pass parameters onto your frames. In addition to this complexity, you wouldn't be able to utilize Caspio's AJAX functionality, and navigating your parent page requires JavaScript.

 

If I assume correctly, you wanted to use Angular to create an SPA (Single Page Application) or perhaps just utilize their templating engine.

 

If this is your goal, I would recommend moving on to a Back-End technology instead. I haven't tried using Node.JS + Express/Backbone yet, but I have had luck using Twig on Vanilla PHP. Laravel might work for you as well.

 

I hope my response helps.

 

Cheers!

-DN31337