Dynamically create element if collection field isn't empty

Ask the community
, ,
1

I s there a way to create elements (like buttons) with code ?

I try to dynamically create download buttons for documents stored on wix and in my CMS collection in different fields. I work with dynamic pages and each line (element) correspond to a published page. In those pages, I would like to automatically create a download button for each of multiples documents, which are stored as fields (columns) in the CMS collection. The purpose is to not have to pre-create those buttons and the hide those for wich the field is empty, but actually create them only if the field isn’t empty. (the issue with the first option is that I have a large number of document fields and only a few of them are actually containing a document, so when I hide the buttons corresponding to empty fields, it produce a very high empty space.

I tried with code like :

import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady(() => {
    $w("#columnStrip5").collapse(); // Cacher le conteneur au début

    // Liste des champs du CMS à considérer
    const fieldsToCheck = [
        "planRdc",
        "edl23PlanRdc",
        // Ajoutez ici d'autres champs que vous souhaitez vérifier
    ];

    // Obtenir la partie de l'URL après le dernier slash
    const currentUrl = wixLocation.url; // Obtenir l'URL actuelle avec wixLocation
    const parts = currentUrl.split('/'); // Diviser l'URL en parties par le slash
    const identifier = parts[parts.length - 1]; // Prendre la dernière partie
    console.log(identifier);

    // Vérifiez si l'identifiant est défini et est une chaîne de caractères
    if (identifier && typeof identifier === 'string') {
        console.log('Identifier ok');
        // Continuer avec l'identifiant
    } else {
        // Gérez le cas où l'identifiant n'est pas défini ou n'est pas une chaîne de caractères
        console.error("Identifier invalide");
        return; // Arrêtez l'exécution du code
    }

    $w("#TeamDataset1").onReady(() => {
        // Recherchez l'élément dans la collection "Fichessites" par le champ "id"
        wixData.query("Fichessites")
            .eq("id", identifier)
            .find()
            .then(results => {
                console.log(results.items);
                if (results.items.length > 0) {
                    const currentItem = results.items[0]; // Prenez le premier élément
                    $w("#columnStrip5").expand(); // Afficher le conteneur si des données CMS sont disponibles

                    fieldsToCheck.forEach(fieldName => {
                        const fieldValue = currentItem[fieldName];
                        if (fieldValue) {
                            // Utilisez un élément HTML brut pour ajouter au conteneur
                            $w("#columnStrip5").html += `<div id="dynamicButton_${fieldName}" style="width: 150px; height: 50px; top: 0px; left: 0px;">${fieldName}</div>`;
                        }
                    });
                }
            })
            .catch(error => {
                console.error(error);
            });
    });
});

in wich columnStrip5 is the element in which I would like to create the buttons, planRdc and edl23PlanRdc are two documents fields which I know they contain a document (but like I said I have like 30 of it to check).
It did not work.

Can anyone help me ?

2

Your code looks quite complex whereas this is pretty much what you want from your description I think:

Obviously change the elements involved as you need them but this principle should work for your needs!

Just remember Show/Hide = the space on your page will be the same regardless, either content or empty space, the button is still there but hidden.
Collapse/Expand = the space taken by the element will disappear when collapsed and this is what you are using in your current code, so it should work as long as you’ve set the space of the site where the buttons are (section, container, repeaters etc) to be “auto” or a “max/min” (so they’ll adjust with the collapse/expand) and that depends on your page design. Otherwise you’ve told that space to be “x height” regardless of the content inside it. You can also set your element to be collapsed in the editor as mentioned in the linked answer rather than coding it to be collapsed.

Hopefully that’ll get you on your way to a nice solution! :slight_smile:

3

Thanks for your answer.
Actually, I don’t want to use hide or collapse on an pre-existing element (which I was until now, but as I said it produce an emty space on the page, I didn’t find any height option in the editor to be set to auto or min/max or fit-content …). I try to build the elements (buttons) from scratch if the fields are not empty …

4

The empty space will be concerning the container/section you are using not anything to do with the button coding.

size
size1284Ă—462 17.9 KB

If you coded or set your button to not show on your live page this example container would still show empty space because it’s minimum height is 280px.

If it was set to auto it would collapse entirely. When the button is expanded and visible on the live page the container would wrap around the button like so.

auto
auto1570Ă—498 51.5 KB

If your proposed method worked rather than the one you are currently using it wouldn’t make a difference if the height of the container housing the button has a pre-set height, that seems to be your issue here not any of the coding or complex stuff, seemingly just a design issue.

5

I have never seen this option/property panel, where can I find it ?

6

It seems to be a Studio editor option, I have only access to the regular editor. Do you know if it is possible to edit the site with studio editor ?

7

I’m using Editor X in those examples but it’s there for Studio and old Wix too, might look slightly different depending on the platform. It’s the inspector panel on the right side of the page and you will need to click an element first to show it’s (Layout) sizing properties. I know Studio is set to some terrible new defaults for adjusting sizes of things so you have to click something else in that panel to revert it back to the way mine looks, I can’t remember off the top of my head what the settings are called on there, it’s really frustrating to have to do that for every new object on your whole site, lol… but if you are using the older editors it should look like mine anyway as soon as you create a container, button or whatever! :+1:

8

Ok, it seems so weird because I actually use the regular editor for this website and I never saw thoses options anywhere … And I need it so much !

9

Oh ok so editor X is another one ? Do I can edit my website with this one ?

1 Like
10

I haven’t used the classic editor in ages, I can’t see any equivalent options there either, lol… it really is fundamental stuff as you say, I’d switch over to either Editor X or Studio if I was you, I really forgot how limited the original editor was for that kind of thing!

You might have a bit of a learning curve getting used to the newer editors quirks but it’s totally worth it for actual control over your page design! Also Editor X and Studio are practically the same, just slightly different placement of things mostly so you can go for either and you’ll be futureproofed either way without as much hassle as the change from the original Wix Editor.

11

Yep and Wix Studio is brand new (so missing some features at the moment, but some things are improved from Editor X of course). You should be able to migrate your site to at least X… I haven’t kept up to date with what the deal is with Studio other than making fresh sites with it, but I’m sure there are articles here if you search for “migrate from Wix Editor” or something similar!

(Perhaps make a copy of your site if you do migrate just in case you don’t get on with it)

12

Apparently it isn’t possible to migrate. So unfortunatelly I will have to restart from scratch.