Override custom field

AI-generated summary

The discussion is about overriding a custom field in a Discourse forum. Dev_Work initially tried to check a field using {{#if f.field.name == complete }}, but it didn’t work due to logic calculation limitations in templates.

Merefield explained that this should be handled in JavaScript using a Computed Property. Dev_Work requested examples, and Merefield provided links to plugins with Computed Property examples.

Dev_Work figured out how to override the action in the controller but struggled to add a @discourseComputed decorator. Merefield suggested using a different import: import discourseComputed from "discourse-common/utils/decorators";. However, Dev_Work found success using @computed instead.

create-account.hbs

{{#if userFields}}

            <div class='user-fields'>

              {{#each userFields as |f|}}

                {{user-field field=f.field value=f.value}}

              {{/each}}

            </div>

          {{/if}}

js

var siteSettings = Discourse.SiteSettings;
    console.log(siteSettings.forum_name);

complete = $(".user-field-" + siteSettings.forum_name);

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/controllers/create-account.js.es6#L239-L245

How to check the field?

{{#if f.field.name == complete }}  {{! doesn't work }}
  OK
{{/if}}

set input for create-account.hbs

 var siteSettings = Discourse.SiteSettings;
          $('.control-label').each( function () {
  if($(this).text().trim() === siteSettings.forum_name) {
  const uuid ='lp'+(()=>([1e7]+-1e11).replace(/[018]/g,c=>(c^crypto.getRandomValues(new Uint8Array(1))[0]&15 >> c/4).toString(16)))();
var id = "user-" + $(this).parent().attr('id');
    var input = $('#' + id);
    input.val(uuid);
   // $(this).parent().hide()
  
    }
})

It looks like this

Rails.logger.warn(“#{params }”)
It looks like this

"user_fields"=><ActionController::Parameters {"1"=>"true", "2"=>""}

“2”=>“”
where is the second field ?

This doesn’t work because you can’t perform the actual logic calculation in a Template. This needs to be handled in the corresponding js by a Computed Property. Be sure to read the official Ember guides (making sure you select the same version that Discourse uses) and look at the code in one of the many popular Customization > Plugin on here to provide you with examples.

thanks for the answer, I’m interested in examples from plugins

Here’s an example of a Computed Property from a PR I recently submitted to Ebsy’s excellent National Flags plugin: discourse-nationalflags/assets/javascripts/discourse/components/user-nationalflags-preferences.js.es6 at master · Ebsy/discourse-nationalflags · GitHub

Here’s one (“showTimezones”) that is actually used to hide/show in a template: https://github.com/paviliondev/discourse-team-timezones/blob/master/assets/javascripts/discourse/components/team-display.js.es6

but you’ll find tonnes of great patterns in our plugins: Pavilion · GitHub

Hi, I figured out how to override the action in the controllers.

example

import CreateAccount from 'discourse/controllers/create-account';
export default {

    name: 'Create-Account-Popup',
    initialize: function () {
        CreateAccount.reopen({
            actions: {
                createAccount() {
// my code
                }
            }
        });
}

How to add your @discourseComputed ?

I do as in the example and does not work

export default {
    name: 'Create-Account-Popup',
    
    @discourseComputed()
    ldapForgotPassword() {
        console.log('forgot!!');
        return this.siteSettings.forum_login_popup_use_ldap;
    },

Happened through @computed

        PreferencesAccount.reopen({
            @computed
            ldapForgotPassword() {
                console.log('forgot!!');
                return this.siteSettings.forum_login_popup_use_ldap;
            },

You should use this to avoid a browser warning.

It’s just a different import:

import discourseComputed from "discourse-common/utils/decorators";