Dropzone Control from a Dropdown

Elements Custom Components
1

I’m trying to control whether a dropzone is shown or not, based on a dropdown selection value:

@if(mydropdownlist == "a")
  @dropzone("child1")
@endif

I’m not even sure if a dropdown control exists yet, but it definitely will be needed for other things besides this example.

This use-case is selecting child templates to use - similar to right-clicking on the plus button in the edit window in Stacks. Not sure if you are going to provide the same control in the edit window for selection or have people use a dropdown control?

2

Hey @Bill,

Yes, we have a dropdown menu… it was missing from the docs, the page is here now. Anything you see used in our Components is available as we use the same API :smiling_face:

Here’s an example of a dropdown menu (or Select as we call it) to pick your favorite fruit…

{
          "title": "Fuit",
          "property": "fruitydropdown",
          "select": {
            "default": "apple",
            "items": [
              {
                "value": "apple",
                "title": "Green Apple"
              },
              {
                "value": "orange",
                "title": "Orange"
              },
              {
                "value": "lemon",
                "title": "Yellow Lemon"
              },
              {
                "value": "pear",
                "title": "Pear"
              }
            ]
          }
        },

@tpbradley is making a few changes to how the If statement works, he’ll follow up shortly with how to do things — Hang in there!

P.S. I’m wondering what you’re cooking up and if it’s worth a quick video chat with us so we can help answer any questions you might have. Let me know if you’re interested and we could set something up one afternoon this week.

1 Like
3

@dan Yes, I sent you an email re: questions - hopefully you got it.

Thanks,

Bill
Stack-Its

4

Got it, will drop you a reply tomorrow (Tuesday) :+1:

5

Hey @Bill,

I’ve put together a project with a custom element showing how to use switch and select controls to conditionally show content in the HTML.

The main take away is that business logic like string comparisons should be performed in the hooks file, then within the template you perform simple bool checks. This helps to keep templates simple and focused on HTML rather than containing complex conditional logic.

For example, say you have this select control in the properties config

{
    "title": "Select",
    "property": "select",
    "responsive" : false,
    "select": {
        "default": "apple",
        "items": [{
            "value": "apple",
            "title": "Apple"
        }, {
            "value": "pear",
            "title": "Pear"
        }]
    }
}

Your hooks file could check some string values and set a couple of flags accordingly

const transformHook = (rw) => {

    // Extract the select property
    const { select } = rw.props;

    // Perform string comparisons and provide the template with simple bool values
    rw.setProps({
        showApple : select == "apple",
        showPear : select == "pear"
    });
}

exports.transformHook = transformHook;

Then, within the template you just need a few simple if statements

@if(showApple)
    🍎
@elseif(showPear)
    🍐
@endif

Hope this helps

2 Likes
6

Ok Tom, thanks for the example. I’m still trying to dig through all the example stuff in there, but there’s two things that are really bugging me:

  • You said in the component that ‘non-responsive switch controls can be used in ‘if’ statements’. I believe what you are really saying is it expects booleans to work properly w/ screensizes. If that’s the case, could you please consider changing responsive to true for any switches using screensize prefixes. This would make a lot more sense to us developers, as that would be what we normally will be doing. If need a string for some odd reason then set responsive to false.

  • You have been setting const like this:
    ‘const { select } = rw.props;’ - This is really an unintuitive way to write this. If I was going for a control value named ‘select’ , this is much easier to understand: ‘const select = rw.props.select;’
    NOTE: when using the old way, when paired w/ gallery or anything that will contain huge json arrays & looping through stuff, my computer w/ 40GB of RAMM was nearly brought to it’s knees (when using my way, it barely even blinked when updating)

Thanks, Bill

7

We spoke at great length internally about this. It’s was a tricky call but while developing the built in components, we found that out of 130 ish switches, only 10 were non-responsive.

I realise that when other developers build components they may need the majority of switch to be non-responsive, but as Elements is primarily a front end Tailwind builder it made sense to be responsive first.

This is modern JS syntax and can really help to tidy up code, consider the following.

const select = rw.props.select;
const switch = rw.props.switch;
const button = rw.props.button;
const text = rw.props.text;

// Becomes
const {select, switch, button, text} = rw.props;

You can read more about it here JavaScript Destructuring

I’d love to get a copy of the project file and run some tests, would you be able to send it to support@realmacsoftware.com

Cheers

8

@tpbradley Hi Tom,

Ok, I incorporated the select-to-if statement method ok.

I tried again to get gallery & console.logs logs to bog things down, but doesn’t seem to be choking, maybe you tweaked something in the last beta.

I still like dot notation & code clarity is key when I look at something 6 months later - otherwise there’s hell to pay to figure out what is going on.

I still am having problems with @ text not injecting back into the same place & mutating multiple sets of new p tags, default/previously set @ text in other if statements aren’t showing in the edit window based on what is chosen in a select (text is there but just white text at the moment;) and I need something similar to an @ text but for html/markup but without the wrapping p tag. I don’t know if that makes sense or should we take a look at this stuff privately?

Thanks, Bill

9

That would be great, have just dropped you an email…