How to use window.open in an attribute?

I’m using Angular 8/Algolia 3.35.1.

I have a search attribute containing an <a href and would like to use window.open to show a page in a new browser tab when See the oracle page link is clicked. All works fine, meaning that if I leave out window.open in the attribute, the URL link does navigate to oracle.com. But, when I add the window.open, then no new tab is created, and the browser stays on the Search page, not going to oracle.com. In other words, window.open in the record attribute is not doing its job.

My goal here is to stay on the Search page, and open a new tab showing oracle.com.

Is this possible?

Thanks,
Bob

Record

{
  "feature": "Account",
  "operations": [
    "cancel"
  ],
  "descriptions": [
    "You can cancel your account on the Account page, under the <b>Change Account Type</b> option. Be sure to read the warnings when you Cancel Account."
  ],
  "webpages": [
    "<a href='#/account'>Go to my Account</a>"
  ],
  "documents": [
    "<a href='#/' onClick='window.open(`http://oracle.com`, `_blank`)'>See the Oracle page</a>",
    "<a href='#/learn'>Go to the Learn Page</a>"
  ],
  "objectID": "8828575000"
}

Hi @engineering, you can put the url in the attribute and then use the html and javascript code in your code using the url from the attribute as a variable in your code. However, if the url will be the same for every record, you may want to also keep the url in your code instead of your Algolia index.

Hi Cindy,

Yeah, putting it in HTML makes more sense. I’ve changed the record and added HTML as shown below. But I do not know how to access the url or anchortext from the hit. I couldn’t find an appropriate example, can you show me how this is done in HTML?

Thanks,
Bob

Index Record

{
  "feature": "Account",
  "operations": [
    "create"
  ],
  "webpages": [
    "<a href='#/account'>Go to my Account</a>",
    "<a href='#/learn'>Go to the Learn Page</a>"
  ],
  "descriptions": [
    "An account is created for you when you sign up."
  ],
  "urls": [
    "https://oracle.com"
  ],
  "anchortext": [
    "See the Oracle page"
  ]
}

component.html

<!--
<br>
<ais-highlight attribute="anchortext" [hit]="hit"></ais-highlight>
<br>
<ais-highlight attribute="urls" [hit]="hit"></ais-highlight>
-->
        <br>
        <a href="#/search" onClick="window.open('https://oracle.com')">See the Oracle page</a> <!--THIS WORKS-->
        <a href="#/search" onClick="window.open('{{hit.urls}}')">{{hit.anchortext}}</a> <!--I NEED THIS TO WORK-->

Hi @engineering,

In the hits component, you have access to each hit (that is the records you created which match the search query). As shown in our docs, you can then access the attributes from each hit.

Here is the specific doc for reference.

For you, the Angular template might look like:

                <a href="{{ hit.urls }}" target="_blank"
                  >{{ hit.anchortext }}</a
                >

Here is an example sandbox showing a simple example with just the one record, and how you would use the attribute values to create a link.

Hi Ajay,

That works fine. So simple. I was fixated on using window.open, forgetting the simplest solution.

Thanks,
Bob

1 Like