Ways to render customfield on customer-portal

JSM Development JSM Data Center
1

I created a custom field, extending GenericTextCFType, and I used Velocity templates to change it’s behavior on the view and edit screens.
So far it works, but when I add this field to a Request-type (JSM), to show it in the customer portal, it is only rendered as plain text field (single line). The Velocity template seems not to apply here.

Does anyone know, on how to render a field on the customer portal?

Any help is appreciated, many thanks in advance.

I created the field based on this tutorial:
https://developer.atlassian.com/server/jira/platform/creating-a-custom-field-type/

I checked this documentation, if I can add a resource of type velocity for the portal, analogue to the normal edit and view screens, but it didn’t help me.
https://developer.atlassian.com/server/jira/platform/custom-field/

This is my module declaration in the plugin xml file:

<customfield-type name="Product-Count-Field" i18n-name-key="product-count.name" key="product-count"
                  class="com.toolbox.customfields.ProductCount">
    <description key="product-count.description">The Product Count Customfield</description>
    <resource name="view" type="velocity" location="/templates/product-count-customfield/view.vm"/>
    <resource name="edit" type="velocity" location="/templates/product-count-customfield/edit.vm"/>
</customfield-type>

This is a simplified example of velocity code it tested:

#if ($value)
Custom test text and field-value: $value
#end
2 Likes
2

Have you found a way to get it working?
I’d like to do the same but didn’t find a solution.

3

Not really. But I found a workaround.
Which I could not really elaborate though, because the project was stopped.
Here is what I have got:
You can create a Javascript file and define a web-resource in your atlassian-plugin.xml file. With the “context” tags you can define that the Javascript will run only in the portal.


  <web-resource name="XYZ global JS" key="xyzGlobalJs">
    <resource name="global-frontend-resource.js" type="download" location="/js/global-frontend-resource.js"/>
    <context>servicedesk.portal</context>
    <context>servicedesk.general</context>
    <context>customerportal</context>
  </web-resource>

With Javascript you can find and update the field. I can’t find the code right now, but I remember you have to use Promises to cope with timing issues. Something like:
document.getElementById(id).then((element) => {
// Modify the style attribute
element.style.backgroundColor = “lightblue”;
element.style.color = “white”
element.style.fontSize = “20px”
})
.catch((error) => {
console.error(error.message);
});

1 Like
4

This is also how I do it. AFAIK this is the “most simple” way to do it (though its not very simple).