Advanced view of some UI controls

Wappler Extensions How To
,
#1

If I want to use a boolean just to show another control it will be added as parameter to the event method:

Wappler 17-03-2023 14.49.16 000324

{
 title: "Style options",
 type: "boolean",
 show: [
  "styleOptions"
 ] 
}

Will be added as an empty argument(2nd argument) to the method.

dmx-on:click="avatar1.download('john','','','svg','john')"

Maybe a new boolean option should be added so it’s not included as parameter.

Because adding a new argument to the function just to avoid the error doesn’t feel right.

download: function (seed, toAvoidError, styleOptions, fileFormat, filename)
#2

well on actions all parameters have fixed place and if specified are just placed.

What you can do is group parameters in single object parameter with optionsInObject, like this:

actionsScheme: [
    {
      addTitle: 'General Find Place',
      title : 'General Find Place',
      name : 'findPlaceFromQuery',
      icon : 'fa fa-lg fa-search',
      state : 'opened',
      help: 'General Find Place. The most generic and cheap query<br><span style="color: #d28445; padding-left: 90px; display: block; line-height: 1.6em;">Warning heavy pricing may apply.<br>See <a href="javascript:void(0)" style="color: indianred;" onclick="nw.Shell.openExternal(\'https://developers.google.com/maps/billing/gmp-billing#nearby-search\')"">Google Places Nearby Pricing</a></span>',
      properties : [
        {
          group: 'General Find Place Properties',
          optionsInObject: true,
          variables: [
            {
              name: 'query', optionName: 'query', title: 'Query', type: 'text',
              dataBindings: true, defaultValue: '',
              help: 'Enter the query for the place',
            },
            { name: 'bindBounds', optionName: 'bindBounds', title: 'Bind Bounds', type: 'boolean',
              defaultValue: false, help: 'Search inside current map boundaries only',
              show: [], hide: ['latitude', 'longitude', 'radius']
            },
            { name: 'latitude', optionName: 'latitude', title: 'Latitude', type: 'text',
              defaultValue: '', dataBindings: true
            },
            { name: 'longitude', optionName: 'longitude', title: 'Longitude', type: 'text',
              defaultValue: '', dataBindings: true
            },
            { name: 'radius', optionName: 'radius', title: 'Radius', type: 'text',
              defaultValue: 500, dataBindings: true, help: 'Search only within Radius in meters'
            },
          ]
        }
      ]
    },
#3

That is actually quite useful.

But it’s not what I meant.

My problem is that I am using a checkbox to show “advanced options” to the user. Normally users will no use them so I hide them by default. But maybe some will might find the need to fill those advanced options.

What I don’t want is to include the boolean value as an argument of the method because I am only using it as a way to hide/show another UI control.

Thus why I am proposing to be able to define an option(noParam: true)for a UI control just to trigger UI visibility of another control but not include its value as an argument in the method.

#4

well usually we don’t have options that aren’t included in the result, because their values also have to come from somewhere.

There is however an option called noDefaultSave: true that will turn off any option saving, but not sure if it will work for ordered parameters.

1 Like
#5

Unfortunately it doesn’t. I guess I can live without it.

For future re-factorings of the rule system (if it happens at some point) it might be interesting to separate data options from presentation options as right now they seem to be quite intertwined. I guess there is some DX debt there given that initially only you guys were creating rules so you could live with it.

#6

Well we do have some special options for toggling advanced view, like what we do with Bootstrap text options:

Normal view:
image

advanced on:
image

I can see if we can expose those as well.

But in my opinion, hiding things behind advanced options is a bit of bad UI, as users never know what the advanced options are and have to click them always so see what is there.

Another approach that already works is having the group collapsed, so you see the group title and what is it about, so that the user can just expand it to see the options inside:

properties : [
  {
    group: 'Which Records', 
    optionsInObject: true, collapsible: true, collapsed: true, groupId: 'datastoreFilters',
    variables: [
....
1 Like
#7

Not sure if this is working for actionsScheme. Unless I’m missing another option or I have something conflicting.

#8