Adalo Javascript Component

Thanks Steven. I’ll let you know if it works. :slight_smile:

This seems awesome! Would I be able to use this to embed a single tweet?
Something like this?

<blockquote class="twitter-tweet" data-dnt="true" data-theme="dark"><p lang="en" dir="ltr">Jalen Hurts threw a strike for six 🔥<br><br>(via <a href="https://twitter.com/NFL?ref_src=twsrc%5Etfw">@NFL</a>) <a href="https://t.co/cRs5iMujrd">pic.twitter.com/cRs5iMujrd</a></p>&mdash; SportsCenter (@SportsCenter) <a href="https://twitter.com/SportsCenter/status/1473486042141532169?ref_src=twsrc%5Etfw">December 22, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>```
1 Like

You should be able to. Just make sure to remove the 3 quotation marks at the end.

image

Looking at it, it would be difficult but doable. There is a much better solution for what you are looking to do that would make this easy. I might be able to release it tomorrow. I was going to release it today but I got the Jam audio working without it so I didn’t bother. Turns out there are many use cases for it like deep linking and others…

Here is what it will look like when released (using your code you sent)

3 Likes

SHEESH!!! I’ve been dying to get something like this! You’re a champion!

1 Like

This should do the trick, I am sure there are improvements we can make, but at least for now you should be able to advance on your project.

5 Likes

I’m blown away.
Honest question here, how can I help you for doing this? This single implementation has been a headache for us since March and you knocked it out overnight.
Is there a way I can donate to you? DM me.

2 Likes

We do it 4LOM (for love of makers), I come from an Irish Catholic sports family, giving and sports is in the blood.

If you really want, there is a pink patreon button on the marketplace (https://adalo.pragmaflowservers.com/) feel free to donate anything. It is a monthly subscription but you can cancel anytime. The money from patreon is a morale boost for us, not keeping the lights on so anything is good.

4 Likes

Hey, could you possibly develop a component that converts text and images into a PDF without having to use external automatisms?

Will definitely go through Patreon!

I noticed on your Vimeo example and in our test flight that the final tweet renders at only half the screen size. I tried using custom code in the html, but no luck. Works great in web app on mobile, just not native. Probably something to do with the container itself?

Side note - if you’re an Irish fan, Ian Book was thrown into the thick of it on Monday night! He struggled but man he has passion. I think he’ll be on rosters for a long time.

example of issue -

Sorry, should have explained that a little more. This is due to pixel density and scaling, blah blah blah. To fix this add <meta name='viewport' content='initial-scale=1.0'/> before your block quote

<meta name='viewport' content='initial-scale=1.0'/><blockquote class="twitter-tweet" data-dnt="true" data-theme="dark"><p lang="en" dir="ltr">Jalen Hurts threw a strike for six 🔥<br><br>(via <a href="https://twitter.com/NFL?ref_src=twsrc%5Etfw">@NFL</a>) <a href="https://t.co/cRs5iMujrd">pic.twitter.com/cRs5iMujrd</a></p>&mdash; SportsCenter (@SportsCenter) <a href="https://twitter.com/SportsCenter/status/1473486042141532169?ref_src=twsrc%5Etfw">December 22, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

This will fix the scaling issue on your phone.

As for Ian Book, my kids smashed my TV a couple weeks ago and I just got around to buying a new one yesterday so I missed a lot of games. I will need to look up the highlights. My favorite hockey player to watch right now is Brendan Gallagher, not because he is skillful and talented, but because he has passion and heart. Fearless going to the net. I love watching athletes with that level of pure love for the game.

1 Like

That is very vague. I suppose the unhelpful answer is Yes, but…

Do you want to convert a page to PDF? in that case, in the video I show how to make a print button, you can print to pdf. Do you want to generate an invoice with a specific look and populate based on fields. This is possible to do but it is a lot of work getting the text in the right position on the page so using a service that lets you drag and drop is probably a better solution.

All that to say, here is a proof of concept using the 2 components in this thread.

3 Likes

Thank you, i will test it. I will Convert a Page to a pdf

Actually, my idea was to fill an Office Document with Magic Text in certain places. So the document is ready before, but the document is filled with data from the database and created directly. Likewise one should be able to store this actually directly.

After watching the video, I have the following question: if I prepare a document the size of a paper using HTML and fill certain gaps with Magic Text only, will I end up with the document I need? This is possible or?

You will want to use the Better WebView component for this, not the Javascript component. As a developer with 20 years experience, I can only suggest how I would solve this problem, but I am unsure of your skillset so I do not know if this is over your head.

I am a huge fan of https://www.pagedjs.org/, I think what they do is excellent and I use this for all the manuals and documentation we write. It allows us to create a very web friendly version of text, but make it very nice for printing and converting to PDFs.

So, I would design my printable/PDFable forms using pagedjs and use the Better WebView to render the form and convert it to PDF, but this is done using HTML, JavaScript, and CSS which might be complex to non-developers. This is why sites like DocSping.com exist.

2 Likes

Thank you for your detailed reply. I may not be the professional, however I know html and CSS very well. I guess then I have to use inline CSS or?

Otherwise, thanks again for your answers. This helps me a lot!!!

Hey @TKOTC !
Is it possible to add a Javascript snippet with it?
I would like to add a widget to my Adalo mobile app.

I tried to make hash (sha256) using this code:

const hmac = require('crypto-js/hmac-sha256');

const body = {
    order_id: '123',
    currency: 'uah',
    wallet_type: 'ecom',
    amount: 10,
    payway: 'card',
    // ...
};

const signature = hmac(JSON.stringify(body), 'secretKey')
  .toString();

Unfortunately simply nothing happens :frowning:

Is it possible to use cryptographic functions in this component? Thank you!

Hi! I need to run this script by button with deep-link which send variables to script url. I will be grateful for any ideas!

Link