Customizing Integrated Portal /apis page

[sivaramappali]

Hi,

Greetings!

Can someone help sharing your experience on customizing the /apis page, or if you ended up creating a similar new page and got a control over it?

I am trying to see if /apis page can be customized with any css to render the default API tiles/mat-cards as a list , with each item allowing to expand to show the API Product description.

Tried something like this in the Theme Editor Advanced but not able to succeed!

#apis.main-div {
  display: list-item;
  margin-left: 1.3em;
  list-style-type: circle;   
}

-----------------


#apis.mat-card{
  display: list-item;
}

Thanks,

SivaRam

[sivaramappali]

Hi there,

Circling back to see if I can get some answers to my query.

As we know /apis page is not available for us to edit the HTML code, I am wondering if anyone has customized this page with CSS. I hate to create a new page that mimics the /apis page as it complicates the way out of the box portal is available for us. So, i am looking for ways to customize this /apis page, for example, to render the API Products as list instead of boxes.

Any tips please?

Thank you.

[Marsh]

I'm interested in understanding what features you need that the existing page doesn't provide. For example, why is it that you prefer list instead of cards? Is your API program more internally focused or more externally focused (external tends to have fewer APIs and more marketing involvement, for example). Can you help me understand what you want but don't have today?

[sivaramappali]

Hi @marshg Thank you for responding!

As of now, though our plan is to have it for internal and business teams usability, it may expand to external later. We definitely want to customize the default look and feel (styling) for various reasons.

I was able to change the background color and update image for the overall page, but not able to get a handle of the product cards.

Our API Products list is growing so it helps to see

1. API Products a list than cards

2. And with a drop down/expand arrow to see description, formatted as a two column(title and description) 1 row, and with a font style.

At least this much of decent customization is what we are looking for to start with.

And yes, we definitely like the Search capability on the page.

Also, if I may ask you one more question, can we automate the addition of API Products to the portal, which I believe will need us create a new page with JS to do all this right? Reason for this question is as the same, as the API Products grow it will be good to have them automatically added to the (internal)portal.

[Marsh]

If I understand, your point is that a list is better suited to a larger catalog, because it is more information dense. Correct? Note that we do not have plans for a list view at the moment, but it is a story I'm interested in understanding.

How important, really, is the background image on that page? I would think that anything that increased visual complexity on this page would be held back. Am I missing something?

I'm not clear on your question about automating publishing of API products. The concept is that publishing to an audience is a very intentional act. I would recommend trying to use JavaScript to manipulate a page at all--that's meant for things like integrating with web metrics or adding a 3rd party chat tool, etc.

[sivaramappali]

Let me acknowledge to your points

1. Yes list is better suited to a larger catalog. If not list, something else but for sure not those big tiles or cards.. Can we change to something else than cards?

2. I am not worried about the background image that was just a trial and error although I am able to achieve that and , but all I mentioned is how I managed to get hold of #apis page and did that. And now what we need to change is the cards of API Products to apply some styling. (same as #1)

3. At the time of publishing the Integrated Portal or even after that we are able to manually select the APIs to publish. I want to know instead of manually adding the APIs can I have the published portal pull that information automatically. As we plan to build separate portals for internal and external, we don't mind not being intentional to the internal portal.

[Marsh]

1. No, only cards are available today. It you had a list view, would you use it on both the internal and external portal, or just the internal one?
2. I would like to see how the background image improves the overall experience. Would you be able to share a screenshot? My assumption is that such a customization isn't usually worth the effort, but I'd like to adjust myself if that's not true!
3. Ah, so the idea here is that any API product you might create in the API product builder would always appear in the internal portal? The challenge would be how you then associated the spec with the product. The simple case would be when a product maps to one proxy that has a spec association--is that what you're describing? Because that may not always be the case, this is not a story we have prioritized.

[sivaramappali]

1. If it is only cards view, we may have to go away from using the out of the box Integrated Portal as we are not comfortable with that view. Now we have to think building a new page that displays Product information in the way we want. But that complicates the whole thing, how do we pull the API products information, etc?

2. We dont need a background image, so we are not doing it.

3. Assuming that we have a 1-1 association with Product-API-Spec, can't we automate this?