How to set BS4 Card header, etc

1

For a Card defined in AppStudio as Card1, Card1 is the only control on a Form.

I setup an onclick event for Card1 as follows:

Card1.onclick=function(){
  Card1.headerValue = 'New Header';
  alert("New Header Set");
}

No errors, I get the alert, but the header value doesn’t change. Nor do any of the other text values. Labels, Textareas, etc work as expected. What am I missing?

2

Use this:

Card1_header.innerHTML = "Text"

BTW, if you enclose code in triple back ticks (```), it will be formatted as code in these messages.

3

Which controls would require this sort of handling for property setting. And how would you set textStyle, headerStyle, etc.?

4

And while were working on this, how do I set the image src property of the Card?

5

The Bootstrap controls are made up of regular HTML elements. If you right click on one in Chrome and select Inspect, you can see the HTML and CSS a control is built with.

Notice that I’m setting the .innerHTML property above? That means the string can be any valid HTML. You can include styling info directly in the string.

Alternatively, you can do this with a bit of help from a jQuery function:

$("#Card1_header).css("background", "yellow")

You’re probably close to figuring out your image question by now:

Card1_image.src = "BlackDino.jpg"
6

Oh, the inspect, that was the missing “link”. I see the ID of the image in the card was Card1_image and the src is the attribute name, so it becomes the property name of the image in the card, or Card1_image.src. (Guess I’m going to brush up on DOM some more.)

However, I also see something in the inspect that looks unusual.

<div id="Card1_text" class="card-text " style="" data-i18n="This is the text of the Card.">This is the text of the Card.</div>

the data-i18n attribute. Is this used to go back to the default value?

7

data-i18n is used for internationalization (i18n, get it?).
https://blog.appstudio.dev/2018/10/as7-making-your-app-work-in-different-languages-i18n/

8

Glad I asked - that is amazing. Will it translate multiword idioms?

So, if I was using i18n translation tables, I would also want to set the data-i18n attribute as well as the innerHTML?

9

You need to provide the translations in translation tables,

The i18n value defaults to the value of the text - no need to set it.