Change text/HTML dynamically

Code Library
1

Dynamically change the text in your app

To programmatically change the text in your app you first need to identify the text component you wish to change. You can do this in the Developer Options by locating the HTML of the text component you wish to change and adding an ID. The HTML of the text component starts and ends with <fl-text> . In the example below we’ve added the id="my-text-component" to a Fliplet text component.

Showing or hiding a component based on a button click

HTML


<fl-text id="my-text-component" cid="2732611">...</fl-text>

Then in the JavaScript tab we can run the following code to change the HTML. We wrap the text we want to use in <p> tags so that it inherits the normal text styles. But you could use <h1> , <h2> , or <h3> for the different heading types.

JavaScript


// Using a paragraph
$('#my-text-component').html('Hello world!');

// Or using a heading 1 style
$('#my-text-component').html('Hello world!');

// Or using a heading 2 style
$('#my-text-component').html('Hello world!');

This same method also lets you change the HTML entirely. It doesn’t have to be just text.

If you wanted to link the text to data stored in a data source, use this article to understand how to connect and retrieve data from a datasource.