Hi friends!
I currently have a standard textbox (not in a repeater) in a lightbox that’s connected to a Dataset, and I want to force it to appear Uppercase.
Can anyone help?
Thanks!!
Example…
let str = "Hello World!";
str.toUpperCase() // Returns "HELLO WORLD!"
Thank you for always being so responsive!
And if it’s connected to a cell in a collection?
So, currently I have a team collection that’s connected to a quasi “dynamic lightbox” — where, essentially, inside of the lightbox, it displays the content related to a name that’s selected in a repeater. And inside of that lightbox, I won’t the job title of the person (which is one of those cells in the collection) to be all-Uppercase.
Anyway you can help with that context?
You did all your setup by connections chosen within the properties-panel?
What you can do is to place shown code inside your lightbox, where you generate your output.
Take a look into the VELO-API-DOCS, where you will find examples, for how to use lightbox.
I did! I’m quite versed in using a lightbox, sweets.
You didn’t answer my question though. How do I connect that code to my database, so it changes for each entry displayed?
@yisrael-wix Maybe you can help?
I currently have a page that’s set up as a repeater, wherein the photo, name (which is a button), and the role (which is a textbox) are connected to a quasi-“dynamic lightbox” using the following codes:
ON THE PAGE
$w.onReady(() => {
$w("#Cast").onReady(() => {
$w("#CastRepeater").onItemReady(($item, itemData, index) => {
$item('#PerformerHeadshot').onClick(() => {
let item = $item('#Cast').getCurrentItem();
wixWindow.openLightbox('Performer Lightbox', item)
});
$item('#PerformerName').onClick(() => {
let item = $item('#Cast').getCurrentItem();
wixWindow.openLightbox('Performer Lightbox', item)
});
$item('#PerformerRole').onClick(() => {
let item = $item('#Cast').getCurrentItem();
wixWindow.openLightbox('Performer Lightbox', item)
});
});
});
});
and
IN THE LIGHTBOX
import { lightbox } from 'wix-window';
import wixData from 'wix-data';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
$w.onReady(() => {
let theItem = lightbox.getContext(); //this is the item you took from page
let postID = theItem._id; // this is the field key for the item ID in the database collection
$w("#PerformerDataset").setFilter(wixData.filter()
.eq("_id", postID) //we are now filtering to display only the item that matches this ID
)
.then(() => {
console.log("Dataset is now filtered");
})
.catch((err) => {
console.log(err);
});
});
That lightbox has fields (photo, text box for name, text box for role, text box for bio, and a table for the social links) that are connected to a dataset inside of the lightbox.
And I want to force the text box with the role (that’s inside of this quasi-“dynamic lightbox” to display as Uppercase).
Can you provide me any code for the lightbox that might help that text display as Uppercase, no matter which option in the repeater on the page is chosen — that won’t interfere with the code that’s already in the lightbox?
Thanks a million, in advance!!
Warmly,
Miss Hazel
This will do it. Add it to your Lightbox code after the “lightbox.getContext” line. Just change the text box ID to match yours, and change “fieldKey” to your database column field key.
$w("#yourTextBox").text = theItem.fieldKey.toUpperCase();
Hi, @lmeyer thank you so much for your response!! It’s not interfering (phew), but it’s not working also. Am I perhaps doing something wrong?
@misshazeljade Hmm strange, this code works well for me… Are you testing in Preview or on the published site?
@lmeyer On the published site: https://www.regularsmusical.com/cast-creative
@misshazeljade Ah now I see the problem. You should disconnect the text box from the dataset, because now we are filling it via the code.
@lmeyer MY HERO!
@lmeyer Now, I have one unrelated question. Is there anyway that I can change the line spacing of the #PersonnelBio text field in that lightbox that’s connected to the collection as a rich text field?
You have tons of $w.onReady() functions in your page and lightbox code files!! There should be only one function of this per page.
Also, you’re using the dataset to populate the repeater, AND, you’re populating it with wix-data as well! You should only use one method.
Another mistake is, you have multiple onItemReady( ) event handlers for the same repeater where you only need one, declaring an event handler resets/erases the previous one.
So, to fix all these issues.
-
Gather all your code inside one $w.onReady() function.
-
Only populate with one method, either wix-data or the dataset.
-
Only declare one onItemReady per repeater, and before the dataset is ready or the items are passed to the data property of the repeater.
Hope this helps~!
Ahmad
@misshazeljade Below are some resources that should help. Option 1 is to do it through the content manager using paragraph styles, the other is via code. Good luck!
Option 1: https://support.wix.com/en/article/formatting-rich-text-elements-in-the-dashboards-data-manager
https://support.wix.com/en/article/request-customizing-line-spacing-on-rich-text-fields
@lmeyer Thank you!! Could you help me code this code to work inside the lightbox we’ve been working with, without interfering with it?
$w.onReady(function(){
$w('#dynamicDataset').onReady(()=>{
var myRichText =
$w("#text33").html.replace(/<p>/g,'<p style=\'line-height:1.7em\'>');
$w("#text33").html = myRichText;
})
});
@misshazeljade You’ll want to add this code below the line we added earlier. Be sure to update “fieldKey” with the rich text field key in your database.
You’ll also have to disconnect this text box from the database as you did for the other one.
You can change “2.0em” to another decimal number to add more or less line space.
$w("#text33").html = theItem.fieldKey.replace(">", ` style="line-height:2.0em">`);
@misshazeljade for other questions that are unrelated to this one, please open up a new thread for each one.
@lmeyer YOU ARE LITERALLY MY HERO! Thank you so much, sweets!!