Blueprint Developer Manual / 6.3.2 Displaying Custom Information in Studio

Blueprint Developer Manual / Version 2210

6.3.2 Displaying Custom Information in Studio

You can show additional information inside the moderation tab and user management window of CoreMedia Studio by extending the Studio web application (server side) and modifying the ElasticSocialStudioPlugin.ts (client side).

Server Side: REST JsonCustomizer

Provide a JsonCustomizer to the Studio web application that adds the additional information to the data that is transferred from the REST backend to the Studio app for users:

@Named
public class MyCommunityUserJsonCustomizer implements JsonCustomizer<CommunityUser> {
  public void customize(CommunityUser communityUser, Map<String, Object> serializedObject) {
    serializedObject.put("additional", communityUser.getProperty("information", String.class));
  }
}

or for comments:

@Named
public class MyCommentJsonCustomizer implements JsonCustomizer<Comment> {
  public void customize(Comment comment, Map<String, Object> serializedObject) {
    serializedObject.put("additional", comment.getProperty("information", String.class));
  }
}

Client Side (1): Display Custom Properties

Three extension points are provided for displaying custom properties for comments or users.

Extend the CommentExtensionTabPanel to add components for comments that are displayed above the approve and reject buttons inside the moderation/archive tab (use activeContributionAdministration in the expression for the ElasticPluginLabel in order to reference the active contribution administration, depending on whether the moderation or the archive tab is active):

<editor:rules>
    ...
    <elastic:CommentExtensionTabPanel>
      <elastic:plugins>
        <ui:AddItemsPlugin>
          <ui:items>
          <Panel ui="{PanelSkin.COLLAPSIBLE_200}"
                 title="additionalInformation">
            <items>
              <es:ElasticPluginLabel fieldLabel="additional"
expression="activeContributionAdministration.displayed.additional"/>
            </items>
          </Panel>
        </ui:items>
      </ui:AddItemsPlugin>
    </elastic:plugins>
  </elastic:CommentExtensionTabPanel>
  ...
</editor:rules>

Extend the UserProfileExtensionTabPanel to add components for user profiles that are displayed above the approve and reject buttons inside the moderation tab:

<editor:rules>
    ...
    <elastic:UserProfileExtensionTabPanel>
      <elastic:plugins>
        <ui:AddItemsPlugin>
          <ui:items>
            <Panel ui="{PanelSkin.COLLAPSIBLE_200}"
                   title="additionalInformation">
              <items>
                <es:ElasticPluginLabel fieldLabel="additional"
expression="activeContributionAdministration.displayed.additional"/>
              </items>
            </Panel>
          </ui:items>
        </ui:AddItemsPlugin>
      </elastic:plugins>
    </elastic:UserProfileExtensionTabPanel>
    ...
  </editor:rules>

Extend the CustomUserInformationContainer to add components that are displayed below the user meta information panel inside the user management view:

<editor:rules>
    ...
    <elastic:CustomUserInformationContainer>
      <elastic:plugins>
        <ui:AddItemsPlugin>
          <ui:items>
            <Container>
              <items>
                <es:ElasticPluginLabel fieldLabel="additional"
expression="userAdministration.edited.additional"/>
              </items>
            </Container>
          </ui:items>
        </ui:AddItemsPlugin>
      </elastic:plugins>
    </elastic:CustomUserInformationContainer>
    ...
  </editor:rules>

Client Side (2): Edit Custom Properties

For all three extensions points described above it is also possible to not just display but to edit/moderate custom properties. Instead of ElasticPluginLabel just use ElasticPluginPropertyField. This provides a text field for editing the property. Number or Boolean fields are not provided but can be constructed analogously. When you construct your own property field it is important to register the corresponding property as being moderated. This can either be done directly by your property field (c.f. ElasticPluginPropertyFieldBase) or you use the RegisterModeratedPropertiesPlugin for this purpose.

Search Results

Table Of Contents

Filter