(Retired) Use an ID in a custom user field to link to a user's external profile

[techAPJ (Arpit Jalan)]

Let’s say you want to add a link of User’s main profile page on Discourse user profile page and user card, clicking on that link will take user to main (external) website.

The link of main website user profile page will be like:

http://myawesomewebsite.com/user/USER_PROFILE_ID

Let’s get started!

Create a custom user field

Let’s create a user field with name User Profile.

Make sure “Show on public profile?” option is enabled.

The above field will store external user profile IDs.

Add custom CSS

Paste this CSS code in Admin > Customize > CSS/HTML > CSS section:

.public-user-field.user-profile {
  display: none;
}

#user-card .metadata h3 {
  float: left;
}

h3.user-card-public-field {
 clear: both;   
}

Feel free to further customize above CSS as per your requirement.

If your field name is different than User Profile make sure you replace .public-user-field.user-profile with the dasherized version of your field name.

Add custom JS

Paste this JS code in Admin > Customize > CSS/HTML > </head> section:

<script type="text/discourse-plugin" version="0.8.7">
    const Site = require("discourse/models/site");

    api.registerConnectorClass('user-profile-primary', 'external-site-link', {
      setupComponent(args, component) {
        component.set('externalSiteLink', args.model.get('externalSiteLink'));
      }
    });

    api.registerConnectorClass('user-card-metadata', 'external-site-link', {
      setupComponent(args, component) {
        component.set('externalSiteLink', args.user.get('externalSiteLink'));
      }
    });

    api.modifyClass('model:user', {
      externalSiteLink: function() {
          const siteUserFields = Site.currentProp('user_fields');
          if (!Ember.isEmpty(siteUserFields)) {
            const externalUserIdField = siteUserFields.filterBy('name', 'User Profile')[0]
            if (!externalUserIdField) {
              return null;
            }
            const userFieldId = externalUserIdField.get('id');
            const userFields = this.get('user_fields');
            if (userFields && userFields[userFieldId]) {
              const url = "http://myawesomewebsite.com/user/" + userFields[userFieldId];
              const link = "<a href='"+url+"' target='_blank'>"+url+"</a>";
              return Ember.Object.create({ link, name: externalUserIdField.get('name') });
            } else {
              return null;
            }
          }
      }.property('user_fields.@each.value')
    });
</script>

<script type='text/x-handlebars' data-template-name='/connectors/user-profile-primary/external-site-link'>
  {{#if externalSiteLink}}
    <div class="public-user-fields">
      <div class="public-user-field">
        <span class="user-field-name">{{externalSiteLink.name}}</span>:
        <span class="user-field-value">{{{externalSiteLink.link}}}</span>
      </div>
    </div>
  {{/if}}
</script>

<script type='text/x-handlebars' data-template-name='/connectors/user-card-metadata/external-site-link'>
  {{#if externalSiteLink}}
    <h3 class="user-card-public-field">
      <span class="user-field-name">{{externalSiteLink.name}}</span>:
      <span class="user-field-value">{{{externalSiteLink.link}}}</span>
    </h3>
  {{/if}}
</script>

Update:

const url = "http://myawesomewebsite.com/user/" + userFields[userFieldId];

with your website user profile link.

If your field name is different than User Profile make sure you update:

const externalUserIdField = siteUserFields.filterBy('name', 'User Profile')[0]

with your field name.

Voilà

That’s it, you will now see User Profile link on user profile page:

and user card: