Display the URL with proper formatting in the print function

I am trying to create a table with clickable URLs in a "Link" column, but the URLs are too long and I want to show a custom title instead.

So far, I have used the following code:

str = "Test Title";
link = str.link("https://my_long_url.com/v1.0/ui/index.html#/testkeywordreport?detailView=1&id=1234567")

Since I am working within an Apache Zeppelin paragraph, I need to display the content in a table format. I usually use the print method to add items to the table like this: 

print("%table Test Link)
print(link)

This currently results in a table that looks like this:

Test Link
---------
<a href="https://my_long_url.com/v1.0/ui/index.html#/testkeywordreport?detailView=1&id=1234567">Test Title</a>

However, what I want is for the hyperlink to display the test title instead of the URL:

Test Link
---------
Test Title

Is there a way to achieve this?

javascriptapache-zeppelin

Answer №1

To tackle this, I utilized the %html tag within Apache Zeppelin:

str = "Example Heading"
link = str.link("https://my_sample_url.com/v1.0/ui/index.html#/examplekeywordpage?detailView=1&id=1234567")
print("%table Example Link)
print("%html " + link)

Source: Apache Display System (Table)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtain the content enclosed within parentheses using JavaScript

const str = "(c) (d)"; I need to separate the given string into an array The result should be [0] => 'c' [1] => 'd' ...

javascriptjquerysplit

Extract information from a JSON string stored in a variable and transform it into objects within the $scope.variable

I currently have a string variable that contains JSON data displayed below. var jsonstring = [{"latitude":"51.5263","longitude":"-0.120285","altitude":"","device":"123","rating":"5","region":"Europe","customer":"","time":"1-2 Weeks","error":"Error 1","app ...

javascriptangularjsjson

Vanilla JavaScript - Conceal all remaining div elements

I have a situation where multiple divs are only visible after clicking a link. How can I ensure that when one div is clicked, all others are closed so that only the clicked one remains visible? Currently, I am using the following JavaScript: functio ...

javascripthtml

It appears that using JQuery's .when and .done functions may result in the code executing before the script has finished loading

Since updating the hard-coded <script> with JQuery promises, I have been encountering these errors frequently: https://i.stack.imgur.com/xkWAk.png The issue seems to be inconsistent in replicating. Sometimes, the error occurs while loading the page ...

javascriptjquerypromise

What sets apart the definition of isolated scope variables for an Angular directive when done within {} as opposed to in

When working with Angular directives, I am aware that I can assign an isolated scope by adding '=' or '@' or '&' in the {} to define variables. However, it seems like this is not required within the link function. For example: ...

javascriptangularjsangularjs-directiveangularjs-scope

Building custom directives on AngularJS pages without a specified ng-app module

On some of my basic pages, I don't need to specify a particular application module in the ng-app attribute. However, these pages do utilize some custom directives that I have created. To keep things organized, I have placed all of my directives withi ...

javascriptangularjsdependency-injectionangularjs-directive

Arrange the div and ensure that the external JavaScript file functions properly when the page loads

I am encountering an issue with my JavaScript and CSS code. It works perfectly fine within the fiddle environment but fails to function properly outside of it. Here is the link to the fiddle When I embed the code into an HTML document directly, it does n ...

javascripthtmlcss

Using dialogue boxes instead of alert and prompt functions in jQuery can enhance user interaction and

I need assistance with implementing a dialog feature in fullcalendar. Currently, I am only able to trigger an alert or prompt when clicking on an event. What is the appropriate JavaScript code to display a dialog? Here is my jQuery code: $(document).read ...

javascriptjqueryeventsdialogfullcalendar

Trying out the demonstration of the angular calendar in action

I am currently attempting to run the official example of the angular-calendar component found at http://angular-ui.github.io/ui-calendar/ Unfortunately, I am encountering an error that states: TypeError: undefined is not a function - it seems that the fun ...

javascriptangularjsfullcalendar

Pass the form data to a Bootstrap modal upon submission of the form

I'm attempting to retrieve form data and convert it to JSON to display in a modal dialog that opens on the Submit button click! This is my progress so far: HTML <form class="form-horizontal" id="configuration-form"> --irrelevant-- <button ...

javascriptjqueryhtmljsontwitter-bootstrap

What is the method to retrieve a checkbox value within a datatable when employing pagination?

I recently came across an issue with my datatable where I had implemented a checkbox in the first column of each row. However, when I attempted to check the checkbox using an AJAX call, it only worked for the first page and not for any subsequent pages. H ...

javascriptjqueryajaxcheckboxdatatable

When the phone locks, Socket.io experiences a disconnection

setInterval(function(){ socket.emit("stayalive", { "room": room }); }, 5000); I have developed a simple browser application with an interval function that is currently running on my phone. I am using Chrome on my Nexus 4 for debugging purposes. However, ...

javascriptandroidsocket.io

Establish a WebSocket connection via Meteor.js

How do we establish a Websockets connection in Meteor? Can we achieve this using the following code: ws = new WebSocket('ws://localhost/path'); ws.on('open', function() { ws.send('something'); }); ws.on('message&apo ...

javascriptnode.jsmeteorwebsocketnpm

Guide to attaching data to an AJAX request

I'm new to ajax and recently encountered an issue while working on a project where I needed to send a query from an HTML form. However, I've been unable to send any data for some reason. I tried sending FormData through the xmlhttprequest.send() ...

javascriptphphtmlajaxform-data

Using the Position Sticky feature in Next.js

As a newcomer to sticky elements, I decided to implement a sticky sidebar in my project. Unfortunately, after copying and pasting some code snippets related to sticky sidebars, it seems that the functionality is not working as expected. <Layout title= ...

javascriptcssnext.jssticky

Ways to activate an event with select2

Hey there! I have a unique setup on my selling item page with select tags. The first select tag is created using HTML, while the others are dynamically added using jQuery when the user clicks on an "Add More" button. <select id='code0' onclic ...

javascriptjqueryhtmljquery-select2-4

Transform an array of strings into a JSON object or array

Is there a way to transform a JavaScript string array into a JSON string? var arr = "{'id': '10', 'name': 'test1'},{'id': '11', 'name': 'test2'}"; This would allow for easy a ...

javascriptjson

Images that were just added to vite4 and vue3 are not appearing after the build on the production environment

I am facing issues displaying newly uploaded images in my Vue 3 project with Vite 4 on production after building. Despite trying various code snippets from the internet, I have not been successful so far. Specifically, I am attempting to display a user&apo ...

javascriptnode.jsfile-uploadvuejs3vite

Is it possible to target elements within a UMAP iframe using CSS?

I have integrated a uMap map into my website. Here is the code: <iframe id="umapiframe" class="iframe-umap" width="100%" height="300px" frameborder="0" allowfullscreen src="//umap.openstreetmap.fr/f ...

javascriptcssgoogle-mapsiframeselector

Re-sequence a contiguous array by mapping and filtering its elements

Within my React code, I have a list component that utilizes array.map to display a list of items. The list items have alternating backgrounds; every other item's background color is determined by whether the id field from the data structure is even o ...

javascriptreactjsmaterial-uiarray.prototype.map