# How to bind custom fields and sync form data on admin badge page

**URL:** https://meta.discourse.org/t/how-to-bind-custom-fields-and-sync-form-data-on-admin-badge-page/365723
**Category:** Development
**Tags:** badges
**Created:** [May 12, 2025, 11:54am UTC](https://meta.discourse.org/t/how-to-bind-custom-fields-and-sync-form-data-on-admin-badge-page/365723 "2025-05-12T11:54:37Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![amt](https://avatars.discourse-cdn.com/v4/letter/a/a87d85/32.png) [@amt](https://meta.discourse.org/u/amt)
#### Post date: [May 12, 2025, 11:54am UTC](https://meta.discourse.org/t/how-to-bind-custom-fields-and-sync-form-data-on-admin-badge-page/365723/1 "2025-05-12T11:54:37Z")

</div>

I’m writing a plugin to extend badge functionality. When the “Save” button is pressed on the admin badges page, the custom fields are always default value.

Discourse PluginOutlet

```js
    <PluginOutlet
      @name="admin-above-badge-buttons"
      @outletArgs={{hash badge=this.buffered}}
    />

```

My code `assets\javascripts\discourse\initializers\badge-avatar-frame-setup.js` :

```js
import { withPluginApi } from "discourse/lib/plugin-api";
import { ajax } from "discourse/lib/ajax";

export default {
  name: "badge-avatar-frame-setup",
  initialize() {
    withPluginApi("0.8.31", (api) => {
      api.modifyClass("model:badge", {
        pluginId: "discourse-badge-avatar-frame",
        pluginProperties: ["avatar_frame_enabled"],

        save(data = {}) {
          this.pluginProperties.forEach((prop) => {
            if (this[prop] !== undefined) {
              data[prop] = this[prop];
            }
          });
          console.log("Saving badge with data:", data);
          console.log("Saving badge:", this);
          console.log("avatar_frame_enabled:", this.avatar_frame_enabled);
          console.log("data:", data);
          let url = "/admin/badges",
            type = "POST";

          if (this.id) {
            url += `/${this.id}`;
            type = "PUT";
          }

          return ajax(url, { type, data }).then((json) => {
            this.updateFromJson(json);
            return this;
          });
        },
      });
    });
  },
};

```

refer from:[Having a hard time overriding the save() function on the admin badge page](https://meta.discourse.org/t/having-a-hard-time-overriding-the-save-function-on-the-admin-badge-page/290831)

After I click the save button. can see it from console.  
![admin badge page after click the save button|690x464]

```js
data:{
    "allow_title": true,
    "multiple_grant": false,
    "listable": true,
    "auto_revoke": true,
    "enabled": true,
    "show_posts": false,
    "target_posts": false,
    "name": "新しいバッジ",
    "description": "",
    "long_description": "",
    "icon": "angle-left",
    "image_upload_id": null,
    "image_url": null,
    "query": null,
    "badge_grouping_id": 6,
    "trigger": 0,
    "badge_type_id": 1,
    "show_in_post_header": false,
    "avatar_frame_enabled": false // always default value
}

```

My code `assets\javascripts\discourse\connectors\admin-above-badge-buttons\badge-avatar-frame-settings.hbs` :

```js
{{#if this.siteSettings.avatar_frame_enabled}}
  <div class="badge-avatar-frame-settings">
    <h3>{{i18n "admin.badges.avatar_frame_settings"}}</h3>

    <div class="control-group">
      <label class="checkbox-label">
        <Input @type="checkbox" @checked={{this.avatar_frame_enabled}} />
        {{i18n "admin.badges.avatar_frame_enabled"}}
        +
        {{log @outletArgs.badge}}
        {{log @outletArgs}}
      </label>
    </div>
  </div>
{{/if}}

```

This is console output

 ![hbs file console output](https://global.discourse-cdn.com/meta/original/4X/6/7/5/6757db9c46c530c62d3dfb087a33a45c2f1c0667.png)

My code `db\migrate\20250509000000_add_avatar_fields_to_badges.rb` :

```js
class AddAvatarFieldsToBadges < ActiveRecord::Migration[6.1]
    def change
      add_column :badges, :avatar_frame_enabled, :boolean, default: false, null: false
    end
end

```

Is it normal for ’@outletArgs.badge‘ to get an undefined value? 😰 What am I doing wrong?  
How can I bind custom fields and sync form data on admin badge page?

---

<div class="post-metadata">

### Author: ![piffy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/piffy/32/254198_2.png) [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [May 15, 2025, 12:52am UTC](https://meta.discourse.org/t/how-to-bind-custom-fields-and-sync-form-data-on-admin-badge-page/365723/4 "2025-05-15T00:52:42Z")

</div>

I don’t currently have the time to dig into this issue or remember how I did it, but this repo should have an implementation of extending the badge saving functionality

[https://github.com/ScottMastro/discourse-badge-progress](https://github.com/ScottMastro/discourse-badge-progress)