Selector type populated via database field - or added to by the user dynamically

Feature

Selector type populated via database field - or added to by the user dynamically

Description

I’d like to prompt my users with a selector that contains values populated via an arbitrary database field, and from which they are able to select zero or more of those values.

If the particular value they are searching for is not found from that list, the user will have the option to add that particular value (and select it). This new value could then be added to the existing set of possible values (or at least, I would be able to add it myself manually at a later point).

Much like how the Tag or Category selector operates - the user can start typing and they will get a sub-selection of values returned, against which they’ll able to select the values they want. But, with the addition of user-supplied values too.

Use Case

I would like users to share the prior companies at which they have worked.

The feature would use a database field on the backend with, say, 1,000 of the most common companies my users might have worked at, populated by myself (maybe via a script, or directly pasted into the CWP admin page).

Example: existing company in database
User starts typing ‘A’, and the selector returns:
Adobe
Amazon
Apple
…the user selects ‘Apple’, and it now appears in a ‘badge’ at the top of the selector. The user can search and select more companies if they would like.

Example: company not in database
User types ‘Cisco’, but the selector does not return a result (because ‘Cisco’ is not currently in the database).
User is able to create ‘Cisco’, which they do, and now it appears in a ‘badge’ at the top of the selector. Additionally, ‘Cisco’ has been added to the selector source database field.

The UI for this selector would operate much like the “Optional Tags” field displayed when creating a new Topic in Discourse i.e. search for an existing tag, but create a new tag if need be.

Budget

500

2 Likes

Hey James, thanks for reaching out.

@fzngagan will be able to help you with this. I’ll leave you in his hands.

3 Likes

Hi James,
Just having a look. I’ll be back with a few questions so we can agree on the specifications.

2 Likes

Thanks! Please lmk if you need further context on use case, or idea input on UX - happy to provide both of course.

1 Like

Ok so you want the field to work exactly like the Optional Tags in the composer right?

Also sending a PM regarding further details.

As this data is associated with the user. It should be saved to the user fields. Just wondering where you want to display that data. On the wizard side of the things, it will be used with Update Profile action.

Hey @fzngagan - thanks for checking in; yes, I agree that it should be saved with the user fields - is it possible to use a Custom User Field based on Text type?

Perhaps multiple selections via this new CWP Selector type could be separated with commas when written to the Custom User field?

Based on the above use case, if a user selected “Amazon”, “Microsoft”, and, “Cisco” via the wizard, then the Update Profile Action would write “Amazon, Microsoft, Cisco” to the user’s Custom User field in their profile.

Technically, I guess the wizard Update Profile Action could write the resultant selection to any Text type User Profile field (and not necessarily a Custom User field) - but of course the CWP admin would need to ensure that they use this with care and only select a User Profile field that supports Text type (unless you’re able to only present suitable fields to them when customizing the wizard).

Hope that makes sense - please let me know if you need more details / examples.

Cheers, James

2 Likes

I’m assuming you simply need a comma separated list of values in any user field(custom or otherwise) and that’s it. From a product standpoint, I was wondering how you’ll use this feature as you haven’t requested to display this data anywhere?

For the specific use case of prior companies users have worked at - we would (1) display the (CSV) company list in the custom user field on both the user profile and popup card, and (2) build a custom profile search page that will allow users to find others who might have worked at Company A or Company B.

For (1), I’m assuming we’ll get that for free - i.e. Discourse will just display the values for this custom field.

For (2), the plan here would be to create this new site page and have a simple search mechanism index across user profile fields, including the custom entries that the CWP has written into the customer user profile field.

Definitely open to your thoughts / ideas on this approach of course!

1 Like

Yes, if you map to the correct field in the wizard custom fields. The user fields created by the dashboard have structure like user_field_x(off the top of my head) which you’re aware of I believe.

1 Like

Ack; so hopefully that answers your question @fzngagan on resultant captured data usage, but lmk if you need more context of course.

1 Like

Thats all for now. The work is already on. I was just trying to understand the scope.

Hi @james
Update:
I’ve come across an issue. Create: doesn’t show up on the wizard if the typed tag doesn’t already exist. Working on that now.

Thanks for the update. Please let me know if you’d like help - I’d be happy to spin up a new developer Discourse instance on a VPS and test what you have in progress.

1 Like

Ok I have it working. Just one point. We will need to discuss internally on whether this should be a part of actual plugin or a separate plugin. I think I can give it to you for testing tomorrow hopefully.

2 Likes

@james
I just pushed the code to item-chooser branch.
To test you need to do git clone -b item-chooser https://github.com/paviliondev/discourse-custom-wizard.git in you app.yml.

Instructions:

  1. Create a user field using /admin/customize/user_fields

  2. Now right click on the window and click inspect. Move to the network tab. Click on Back in the browser window and go to the User Fields menu again. You’ll see this.


    Note the id for your field.

  3. Now create a wizard and add the item chooser field. Important this here is, the label is used as the name of the item. So use a simple 1 word label for the field.

  4. In actions, select Update Profile. In advanced use the custom field and the field name as user_field_fieldid. The field id is to be taken from step 2.

How to put data

Open up your rails console and paste the following lines there.

PluginStore.set('wizard_item','companies', ["Apple", "Microsoft", "Google"])

Now when adding the field in the wizard, you’ll need to put the label as companies.

A bit complex setup. Let me know if you get stuck.

Currently, its not possible to add items on the fly. Let’s see if I can get it working in straightforward way.

1 Like

Awesome! Thanks so much @fzngagan - I’ll carve out some time later this evening to give it a go - looks promising :slight_smile:

1 Like

Hey @fzngagan - I think I’m very close to getting it working :wink:

Only issue is that the user-selected companies via the Wizard are not landing in the Custom User Field on the user profile.

I suspect it is because I’m not correctly referencing the Custom User Field in the Wizard configuration -or - there’s a step I’m missing to connect the wizard update mechanism to the Custom User Field.

Here are the steps I’ve taken -

[1] Added Custom User Field

[2] Fetched the New Custom User Field ID via Chrome Dev Console

INSPECT

:warning: The newly created Custom User Field ID value is 7

[3.1] Created a New Wizard - Settings

Note: restricted Permitted Group to a Group we set up for feature testing.

[3.2] Created a New Wizard - Steps

Not set any Advanced options.

[3.3] Created a New Wizard - Fields

Field Label is set to company, Type is set to Item Chooser.

[3.4] Created a New Wizard - Actions

Advanced Custom map created from company -> user_field_7.

:question: Do I have the User Field correctly formed? I’ve tried user_field_7, user_field7, and a couple of other random variants.

[4] Load list of Companies to the store

[1] pry(main)> PluginStore.get('wizard_item','company')
=> ["Apple", "Microsoft", "Google"]

:warning: Note I used company and not companies as per your instructions because my Label is company.

I also tried companies to be 100% sure - and it did not populate the selector in the wizard - as expected, so I’m assuming it should be company here for my setup.

[5] Test the new Wizard

The selector works and allows me to add companies.

SELECTOR

After hitting ‘Done’ the wizard submits, but I don’t see the field get updated on my profile.

PROFILE1

Happy to hop on a quick call if easier to debug together, so please let me know.

Thanks again for your efforts on this - really excited to get it up+running for our community!

Cheers, James

1 Like

This setting should look like this.