What field types are supported by the 'password door' popup dialog

Developers
1

The popup dialog support that is used by the password door feature looks very useful, which is great. I was just wondering what different field types are supported. I was aware of:

  • header
  • paragraph
  • text
  • password

Are there any others supported? Like checkbox and list selection? I assume not, but just thought I would ask.

Thanks

2

Hi there!

So sorry for the delay in responding! There are indeed other things that are supported! Here they are:

  • header
  • paragraph
  • text
  • password
  • radio
  • number
  • email
  • checkbox

I have admittedly not tested the other input components, but they should automatically style themselves and place them in the order you structured the form in. You can also make certain fields visible only to owners, editors and moderators in a space. This is a client side protection only. Your server side code must also check whether someone has that role (see spaceSetsSpaceMembers). Front-end only security is like a screen door on a submarine.

If it looks wonky, post back here and we’ll take a look at it :slight_smile:

Here’s the default properties.entries value for a freshly placed Password Door. Basically what’s happening is when you interact with it, it’s sending playerInteracts through the gameserver, and then if any fields were filled out when you hit submit, it sends those too. You can change the order, style and content in whatever way is visually appealing - the only things you currently cannot change is that edit and submit button.

entries: [
        {
          type: "header",
          value: "This area is password protected",
          key: "mainHeader",
        },
        {
          type: "paragraph",
          value: "Welcome! This is a private area. Please enter the password below.",
          key: "mainParagraph",
        },
        {
          type: "password",
          value: "Enter password",
          key: "submitPassword",
        },
        {
          type: "header",
          value: "Admin Settings",
          key: "adminSettingsHeader",
          requiredLevel: "moderator",
        },
        {
          type: "paragraph",
          value:
            "Only space moderators can see this menu. You can set the password and greeting text here. Be sure to double check the formatting looks alright!",
          key: "adminSettingsParagraph",
          requiredLevel: "moderator",
        },
        {
          type: "text",
          value: "Update header...",
          key: "adminSettingsSetHeader",
          requiredLevel: "moderator",
        },
        {
          type: "text",
          value: "Update paragraph...",
          key: "adminSettingsSetParagraph",
          requiredLevel: "moderator",
        },
        {
          type: "text",
          value: "Update password...",
          key: "adminSettingsSetPassword",
          requiredLevel: "moderator",
        },
      ],

Hope this helps!

3

Super helpful!!! I thought only text are allowed. We can make more fun items now~~

@opalrose where is the spaceSetsSpaceMembers api? Don’t know how to use it.

4

@opalrose thanks a ton for laying that out for us. Are there plans to possibly allow for additional buttons, images, or other embedded features? I could see a lot of different use cases for video especially.

5

Thanks @opalrose for the response, even if it was a bit slow :slightly_smiling_face:

That’s useful stuff.

6

@jcyh Sorry, I’m rereading this as I go back through my notifications and I didn’t see your message:

Here’s an example of how to use spaceSetsSpaceMembers to parse out who is at least a moderator in a space:

  const modOrGreaterUids: string[] = [];
  game.subscribeToEvent("spaceSetsSpaceMembers", ({ spaceSetsSpaceMembers }) => {
    for (const [uid, member] of Object.entries(spaceSetsSpaceMembers.members)) {
      for (const [roleName, roleValue] of Object.entries(member.roles)) {
        if (
          roleName === "DEFAULT_MOD" ||
          (roleName === "OWNER" && roleValue && !modOrGreaterUids.includes(uid))
        ) {
          console.log("Found mod ", uid);
          modOrGreaterUids.push(uid);
        }
      }
    }
  });
1 Like
7

@opalrose Wanted to reply here to keep it mostly contained as this deals with Type 7s. The radio buttons do not work as expected, at least as far as I have gone with them. I’ve tried to base most of my experimentation on the jQuery formBuilder model, using most of their syntax as a baseline.

  • There doesn’t seem to be a way to generate a radio group, so each radio button is effectively a checkbox.
  • The ‘value’ field only ever passes into the ‘placeholder’ prop, meaning there is no way to inline label the radio buttons.
  • Normally, you could force a radio group by naming all the components the same name, but name does not actually seem to pass into the modal.
  • There does not seem to be a way to pass style options. This may be intentional.

Hopefully I am just overlooking something obvious, but figured I’d ask all the same.

Thanks!

1 Like
8

@opalrose Love this thread and looking forward to getting more field types added to the modal! I was wondering if dropdowns and HTML could be added on the roadmap as well. Also any additional code examples are always helpful! :smiley: Thanks!

1 Like
9

Hi there,

any tipps on how to create radio buttons and checkboxes?

 {
                    "type": "radio",
                    "key": "button",
                    "value": "Test"
                }

Doesnt appear.

Thanks :slight_smile:

10

I have the same issue :frowning:
How is the structure for a checkbox / radio button

11

Found the solution structure:

            {
                "type": "checkbox",
                "key": "checkboxKey",
                "options": [
                  {
                    "label": "checkbox label 1",
                    "key": "checkboxLabel1"
                  },
                  {
                    "label": "checkbox label 2",
                    "key": "checkboxLabel2"
                  }
                ]
              },
              {
                "type": "radio",
                "key": "radioKey",
                "options": [
                  {
                    "label": "radio label 1",
                    "key": "radioLabel1"
                  },
                  {
                    "label": "radio label 2",
                    "key": "radioLabel2"
                  }
                ]
              }
1 Like