HTML renderer (beta) released

Just pushed a new view component out – HTML renderer (beta). It works by transpiling HTML code into native components, so it can be used for views that require complex formatting beyond the Rich text component. Check it out in the Marketplace!

4 Likes

Sounds good, but I could not find it.

Yeah something strange going on – you can find it by pasting this token into the marketplace search field: NXjOxcubOCgDtAfWP_z4ng

1 Like

@Harri_Sarsa would this work for embedding a HTML element for a D3.js visualization? I’m new to appgyver so still getting the hang of it but have extensive background in other no-code tools so trying to understand the differences in available features – this one is critical for me potentially!

@Eric_Johnson check out the ** Google Charts example** sample page from Marketplace! The same logic applies to D3.js chart too (i.e. we write the render function and stringify it), @Akseli_Virtanen can provide a bit of info on how everything needs to be set up for D3.js instead of Google Chart.

@Jo_Li we had an issue with the marketplace discovery code, now the component can be found with text search too!

awesome thanks @Harri_Sarsa

1 Like

@Eric_Johnson

Hi!

As Harri mentioned you can get started by installing this example page from the marketplace:
Google Charts example / J0dVK-nLWYnNp-GyHg-CBw

I have a couple of pointers on how to get started:

First, check out the Google chart component properties. You will notice that it runs on a few variables: Chart function, Chart styles, Chart data and for D3.js we can also provide a HTML body.

Secondly take a peek at the page logic, which demonstrates how to set the values for Chart function and Chart data. You can insert any D3.js scripts inside “Generate Google Charts function string” flow function (D3/Google charts are already automatically available inside the component).

The only difference when drawing a D3.js chart is that you’ll also specify a HTML body for attaching the chart onto. All of these variables are just plain strings, but using the flow function to set the Chart function provides a lot of convenience.

Hope this helps!

1 Like

Hi there! I’m trying to test, but as soon as I add this component to a page I get this error. I have tested adding values to the height/width fields in the “Initial dimensions for images” object.

CONTEXT: Selector App, TIMESTAMP: 1591884483212, MESSAGE: Cannot read property ‘imagesInitialDimensions’ of undefined TypeError: Cannot read property ‘imagesInitialDimensions’ of undefined
at https://preview.appgyver.com/assets/bundle-1591021577717.js:207:94172
at Array.forEach ()
at https://preview.appgyver.com/assets/bundle-1591021577717.js:207:93868
at Object. (https://preview.appgyver.com/assets/bundle-1591021577717.js:207:95013)
at Object. (https://preview.appgyver.com/assets/bundle-1591021577717.js:207:95582)
at Array.reduce ()
at Obj

@Joe_Taylor

It looks like there is an issue still with the web preview and the HTML renderer -component (glad we put the ‘beta’ on there!). However it should work just fine via the AppGyver app.

Thanks for spotting this, we’ll fix it asap :slight_smile:

1 Like

This is awesome! I really appreciate the detailed overview!

Hi I get this error in the Appgyver app:

CONTEXT: t0/page.Page1/id-1592324033795-9 | Empty page, TIMESTAMP: 1592324169816, MESSAGE: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Zl@index.android.bundle:93:85823
d@index.android.bundle:93:36029
m@index.android.bundle:93:37308
ai@index.android.bundle:93:47643
Vl@index.android.bundle:93:81668
Ml@index.android.bundle:93:70036
Ul@index.android.bundle:93:67144
Ul@[native code]
Pl@index.android.bundle:93:65839
Pl@[native code]
index.android.bundle:93:25495
unstable_runWithPriority@index.android.bundle:173:3915
sn@index.android.bundle:93:25442
cn@index.android.bundle:93:25377
kl@index.android.bundle:93:64831
enqueueSetState@inde

Regards,
David -

Seems like some property is not set on the component and that crashes it – will need to ensure it sanitizes inputs to not crash. Could that be the case?

@David_Villafane Does this issue still persist for you?

Thanks @Akseli_Virtanen
How to specify the HTML body when drawing a d3 chart?
Is it possible to draw arcs instead of charts using d3?

How can I set the font size and color of content that is rendered inside HTML renderer component? My html is coming from an API.

Thanks

I worked out how to swap the red and blue line chart colours around, and you can basically change the line colour to any colour if you like.

Add this in the “const options = {” section:

colors: [‘red’, ‘blue’],

:slight_smile:

I’m assuming it can be done but are we able to set values to the charts?
I need charts in my app and have 0 experience on how all this works. I’m sure I can Learn to work with D3. Js, I seen lots of good info on this.
It would be nice to have a video of this from beginning to end with a couple of scenarios connecting them with flow functions and variables.

does this only support text and images or will it render iframes and videos?

Hmm to my knowledge it would render everything on the page, so if it isn’t working let me know.

definitely would not render a video element or an iframe for me. On the native apppreview, I can hear the video but it does not display. Only a blank screen. on web preview, nothing.