search

phartenfeller / hartenfeller.dev

My blog and portfolio.
https://hartenfeller.dev
MIT License
0 stars 0 forks source link

Comments: Introduction to Template Components in Oracle APEX 23.1 #88

Open phartenfeller opened 1 year ago

phartenfeller commented 1 year ago

Blogpost: https://hartenfeller.dev/blog/oracle-apex-template-components-introduction

Comments on this issue are displayed on the blogpost.

LouisMoreaux commented 1 year ago

Thank you for this excellent blog post Philipp!

MaikMichel commented 1 year ago

That sounds really cool, thank you Philipp! One Question: Do you keep the tailwind css file or did you translate the classes to related vital.css selectors?

phartenfeller commented 1 year ago

@MaikMichel thanks for the feedback! I copied the whole generated CSS statements from the Tailwind Playground and uploaded a styles.css in the Plug-In. I did not keep the file but I guess it makes sense as you can quickly generate a permalink from the tool.

I never used vital.css, so I don't know about the translation stuff.

In a better maintained Plug-In, I would also leverage the APEX CSS-Variables. Makes the stuff look more APEX native and with the text-color, background variables it automatically looks great in any theme style.

ribeiropvb commented 1 year ago

Hi Philipp, thank you for the great post!

Is possible to use the Template Components to render a single region that have multiple entries to generate it? For exemple, a timeline is a single body, but it have multiple entries (one for each event) to form the body.

phartenfeller commented 1 year ago

Thanks for the feedback @ribeiropvb !

Is possible to use the Template Components to render a single region that have multiple entries to generate it? For exemple, a timeline is a single body, but it have multiple entries (one for each event) to form the body.

Good question! I tested around a little bit. I solved this with Web Components. Basically, the region is an instance of that component and all the data is passed as child HTML data elements (like <data time="2023-06-14" name="xyz"></data>). The component loops over all the data elements and creates an array from it. Then it renders the real DOM structure from it.

The whole HTML structure the Template Component renders would something like this:

<my-cust-web-component arg1="xyz">
  <data time="2023-06-14" name="xyz"></data>
  <data time="2023-06-13" name="abc"></data>
  ...
</my-cust-web-component>

Here is a video where I explain and show my test in detail: https://youtu.be/Fv1uXDif-cE

lidagholizadeh commented 11 months ago

Thanks philipp, It was amazing