Employee Card in 2 minutes

Ever wondered how to create a card similar to
image

I have just finished a video where I created the card in about 2 minutes. Please have a look at

Even if you do not have use for the card, the video contains useful workflows that may be of use elsewhere in your project.

9 Likes

Thank you Ben! Your presentations are excellent.

1 Like

Hi @ben, another great video. Clean and well presented. Thanks.

Maybe not right for this series but any chance of simple drag and drop action/interface for the end user (not the creator of the page) so they can change the order of the Employee Cards and save the new order back to a database? Just a thought :slight_smile:

1 Like

Hi Neil, I’ll revamp the create gallery video series. There I can show the re-ordering of the images or cards. Thanks for the feedback.

1 Like

Ooohh that would be great! Just what I am looking for.

1 Like

Thanks Ben! It’s this kind of detailed micro level instruction that often gets missed and I have spent endless hours trying to figure out how to duplicate an effect! Keep them coming :grin:

1 Like

Great idea, look forward to it.

I meant to say, one thing I really liked about the posted video was the clear way in which you show how to add extra CSS and in particular the dynamic CSS like --light. I have not used that in Wappler myself but will definitely be having a play after seeing your video. Cheers :slight_smile:

2 Likes

Great job Ben. It is very very useful and well presented.

1 Like

Off topic, but here goes.

7 Likes

This is brilliant, @ben. Would be great if this could be built into Wappler in the future.

1 Like

LOVE that!!!

Excellent @ben thank you. I will study it a little later and then implement :smile:

A couple of questions…
Just curious, is there a simple way to save the new order as and when each card is dropped?
Could this work just as easily on DIVs, IMGs etc as well as cards?

  1. Instead of the submit button, you could submit the form on mouse-up.

  2. The class of drag-item can be placed on any element. Just make sure that the form input fields reside in the same element. As an example, I could have made the column as the drag-item in which case I would have to place the input fields outside of the card, but inside the column. As you cannot place the input fields inside of an image, this means that images need to be placed in a drag-item container.

2 Likes

As a heads-up, in the next major version of Bootstrap (v5+), you will nee to precede the variable with bs as in

--bs-light
1 Like

Great example @ben ! You might want to use https://sortablejs.github.io/Sortable/ for better results and it also doesn’t uses jQuery.

We are thinking of integrating something like this as App Connect Sortable component indeed. Just looking for the best possible integration.

8 Likes

Fingers crossed we are getting close to a built in Wappler Sortable component :+1:

1 Like