Hi! It would be amazing if we could create partials / components that we can reuse with dynamic values, something like the props in ReactJs components.
Right now I’m redesigning a dashboard page, a lot of the design is repetitive, with dynamic valued partials I could create one component and reuse it everywhere with different values.
This would save a lot of time
This would ensure a uniform design across the app
When a UI design update is needed, this can be done in the component and it will apply everywhere saving hours
This goes very well with Wappler’s philosophy of saving time and make stuff easier
From this example I could make the header part a component (Total Sales, amount, the 2.6% badge, the view report etc) and reuse it in another card with different values.
There are many areas in a web app where the components should look exactly the same, using this will ensure that the UI looks uniform and professional. I see a lot of designs for example in Wappler demo’s where the UI doesn’t look 100% because it’s not easy to make all areas look the same, and UI design changes a lot.
(No expert) but I believe this should be easy to implement as the system with partials are already there, all that’s needed is dynamic input values and to able to use the values as bindings in the partials.
Hi! Yes so the library I shared above simplifies using the web components.
It works great with Wappler with data bindings etc. It was very easy to learn as well.
I can just easily bind with Wappler the “step” to a variable and all will work perfectly. Now I can use this component everywhere in my app and it will be consistent
This would be absolutely awesome.
Im very novice but i started to learn react and vue a while back, and i suppose im stuck in that thinking with wappler, but when ive tried to work with partials, i couldnt seem to get it to work in same way. Im guessing im thinking of partials in the wrong way
This would personally be a game changer for me. Or if its already possible, detailed tutorial for fully dynamic partials would be awesome.
Create a normal HTML page and insert a navigation bar
Cut the navigation bar from the page
Create a JavaScript file containing the following code. I have named this file navigation.js; but this can be anything to your liking, especially if you intend to add a number of custom elements.
Well actually The current App Connect components are already kind of custom elements and easy to create. We hope soon to publish a guide for this as we also open the app connect from end for extensibility.
Hi! Below a boilerplate on setting up a component with that library with comments on important lines
So obviously you should add the library cdn script, and then:
// change TagName below to any name you'd like to use as a html tag.
// With capitalized letters TagName becomes <tag-name></tag-name> for example
class TagName extends WebComponent {
static observedAttributes = ["title", "text"]; // These are example attributes, add as many as you need to bind data
static mode = "none";
get template() {
// Add any html below between the quotes, use the attribute name like this: {title} to bind the data
return `
<div>
<h1>{title}</h1>
<p>{text}<p>
</div>
`;
}
get stylesheet() {
// You can add css classes below if you want to be with the component
return `
`;
}
}
// Add the tag name below in the array to register the component.
// When you have more components you can list them separated with a comma
WebComponent.registerAll([
TagName
]);
The whole block is made with components, including the chart, as you can see adding the “calls” block was very simple and consistent after that
In the library’s documentation you can find info to do more stuff like:
Creating a base component, and then extending it with variations
Events like onMount, onUpdate to run code when that happens, you might need to look into those when using server connect dynamic data as usually the component loads before the server connect api loads
I probably forgot stuff but I’m sure when you start building you’ll understand it better
That library has a tutorial video here:
Take into account that you can kind of do that with App Connect as it already is semi-component based.
It is not as streamlined as CWCO as you need to use pure javascript to handle the html and it’s missing helpers and other goodies. But it’s enough if you want to keep it all under App Connect’s umbrella and avoid adding more KBs to the website.
Yeah was waiting a long time for a guide from the team on this as from what I remember George recommended to wait with experimenting with app connect extensions as things could change.
When it becomes official to make components within Wappler with the same functionalities, I will for sure redo them in Wappler
Also with web components / cwco you have lifecycle events like onMount, onUpdate etc, would the same things be possible right now? I needed to use them with my charts library for example as otherwise stuff were not working properly
