DSpace 7 Customization - Show only the hostname for a field containing URL?

[euler]

Dear Colleagues,

I displayed the value of a field containing a URL by editing [dspace-angular]/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html. However, some values of this field are very long, so I am hoping if there's a way just to show the hostname. In DSpace 6x, I managed to achieve this by using the XSLT function substring-before and substring-after. Please see the image below:

In DSpace 7x, this is the appearance:

I would like to display onlinelibrary.wiley.com instead of the whole URL.

I found this answer [1] in Stackoverflow but I don't know how to apply this in DSpace-Angular. I hope this is not overly complicated as I am still learning a bit about how to customize the front end of DSpace and the learning curve for me is steep.

[1] https://stackoverflow.com/a/54947757

Thanks in advance and best regards,

Euler

[euler]

Dear All,

I would like to follow up on this. Here's what I have tried so far based on what I searched online. So I created a helper function in the untyped-item.components.ts.At the top of the file I changed the import into "import { ChangeDetectionStrategy, Component, Input } from '@angular/core';"

Then I modified the export class into:

export class UntypedItemComponent extends BaseComponent {

  @Input() item: Item;

  parseUrl(url: string) {
    const getHostname = (url) => {
    return new URL(url).hostname;
    }
 }

And then in my untyped-item.components.html, I added this:

    <div class="item-page-field" style="margin-bottom: 15px;" *ngFor="let eURL of object.metadata['dc.relation.uri']|keyvalue">
      <div class="simple-view-element">
        <h2 class="simple-view-element-header" style="font-size: 1.25rem;">Associated URL</h2>
        <div class="simple-view-element-body">
          <a class="dont-break-out" href="{{eURL.value.value}}" target="_blank">parseUrl({{eURL.value.value}})</a>
        </div>
      </div>
    </div>

It compiled successfully but the resulting display looked like this, it just displayed the function name literally:

parseUrl(https://onlinelibrary.wiley.com/doi/epdf/10.1111/are.15556)

If I enclosed the function with {{}} e.g. {{parseUrl({{eURL.value.value}})}}, it failed to compile. This may be a newbie issue but I am struggling with how to call the function that I made to successfully parse the URL so that it will only give me the hostname. In the case on the URL example above, I just want to display the hostname (onlinelibrary.wiley.com), without the protocol, port number and any subpath. Screenshot from what I want to achieve was posted in my first post above.

Please let me know what I am missing and what to do, since this Angular/Typscript is very new to me.

I appreciate any help you can provide.

euler

[Michael Plate]

Hi euler,

if I remember correctly, it has to be

{{ parseUrl(eURL.value.value) }}

maybe ? I'm 2 month out of that and forgot all the details…


Michael


Am 24.01.24 um 13:53 schrieb euler:

[…]

[euler]

Hi Michael,

Thanks for your quick response. However, when I tried your suggestion, nothing was displayed. I'm not also sure if my helper function is correct.

[Michael Plate]

try setting / returning a fixed value…
also use console.log()

Am 24.01.24 um 15:40 schrieb euler:

[euler]

Thanks, Michael! Your suggestion to use {{ parseUrl(eURL.value.value) } is correct! It turns out that my helper function is to blame. I modified it to just use regex. Below is my function in case others might be interested to use it. The code I used is based on the second option of this answer from Stackoverflow: https://stackoverflow.com/a/54947757/1919069 since I had no luck using the first option.

  parseUrl(url: string) {
    const regex = url.match(/^https?\:\/\/([^\/?#]+)(?:[\/?#]|$)/i);
    return regex && regex[1];
    }

Thanks again and best regards!

euler