Presenting Multiple Data Fields in a single text field

Ask the community
,
1

Is it possible to display multiple data fields in a single text field?

I want to display multiple pieces of data in a single text field seperated by commas.

2

It can be done in code.

Given:

  • “Items” collections with fields named “title” and “name”,

  • a dataset with ID “dataset” connected to the collection,

  • an input with ID “input”.

Page code:

$w.onReady(() => {
  const dataset = $w("#dataset");
  dataset.onReady(() => {
    const { name, title } = dataset.getCurrentItem();
    $w("#input").value = `${name}, ${title}`;
  });
});

You can also listen to a change of the input, parse the value, and update your data via the dataset wix-dataset - Velo API Reference - Wix.com or via wixData https://www.wix.com/code/reference/wix-data.html.

3

Thanks!

Got it to work

4

You are welcome

5

Hi, this code worked great! But I have some cells in my collection that are empty, and those display ‘null’ in the input. Is it possible for the input to ignore empty cells? Or ignore cells marked ‘Undetermined’? Something to that effect?

6

Hi Adam,
Try this:

$w.onReady(() => { 
    const dataset = $w("#dataset");   
    dataset.onReady(() => { 
        let { name, title } = dataset.getCurrentItem();
        name = name === null ? '' : name;
        title = title === null ? '' : title;
        $w("#input").value = `${name}, ${title}`; 
        }); 
 });

Roi

7

How do I remove the “

” from the description? Does this code not work with rich text field?

When I preview the site, this is how its showen:

Bling Bling Bath Bomb is mixed and molded to enhance your bathing experience. Settle in for a luscious bath with colors and scents that will give your senses the care they need.

8

Could you share a link to your example? Or the code listing.

9

Hi I am having some troubles for this topic. The code here only displays one of the data, and the repeater all shows the same value. Could you please tell me how i could apply to the repeater webpage database?

10

Hi @hiroro2018jp ,

If your element is inside a repeater, you have to query the element in a callback passed to onItemReady using the first argument $item instead of $w (see Repeater - Velo API Reference - Wix.com):

$w.onReady(() => {
  const repeater = $w('#repeater1');
  repeater.onItemReady(($item, { title, name }) => {
    const text = $item('#text1');
    text.text = `${title} ${name}`;
  });
});
11

This works to combine for output to a page, correct? I am looking for similar but only want to combine the datafields into one field to use that new field for a search. So how do you code to combine the datafields into one for such?

12

@jeff-haskins could you give a concrete example of what you want to achieve?

13

@yevhen-pavliuk I have fields Title, City and Category. Want to combine into one field (for search aspect). Not for display, so actually want to fill the field with the data from the three fields.

14

@jeff-haskins how about combining queries https://www.wix.com/code/reference/wix-data.WixDataQuery.html#or?

import wixData from "wix-data";

$w.onReady(async () => {
  const searchTearm = "Title";
  const { items } = await wixData
    .query("Collection")
    .contains("title", searchTearm)
    .or(wixData.query("Collection").contains("city", searchTearm))
    .or(wixData.query("Collection").contains("category", searchTearm))
    .find();
  console.log(items);
});
15

@yevhen-pavliuk NO…want to combine fields.

16

@jeff-haskins I don’t follow. Query composition should help with search aspect.

Anyway, there’s a possibility to create a field combination with hooks https://www.wix.com/code/reference/wix-data.Hooks.html.

Given that you have a collection Collection with field keys title , city , and category . Create a new field combination . Then add beforeInsert and beforeUpdate hooks. It’s gonna create data.js file in Backend section. Implement the hooks so that whenever a new item is inserted or an existing item is updated, the combination field gets assigned a combination of values from other fields:

export function Collection_beforeInsert(item) {
  return updateCombination(item);
}

export function Collection_beforeUpdate(item) {
  return updateCombination(item);
}

function updateCombination(item) {
  const { title, city, category } = item;
  return Object.assign({}, item, {
    combination: `${title} ${city} ${category}`
  });
}

Note, that when you insert a new row or update an existing one in the collection, you won’t see the updated value of the combination field right away. But it’s there in the database. If you reopen the collection, you’ll see that it’s in fact updated. It’s probably a bug and I believe it’s gonna be fixed soon.

I hope this helps.

17

@yevhen-pavliuk Thanks, this appears to be what I was looking for.

18

hi,
will this work when trying to use my Testamonial dataset?
im trying to get a 2 text boxes “First Name” & “Review”, to show the 10 different reviews on a cycle on my home page.
Thanks
SJ Scents

19

@yevhen-pavliuk This code is working fine. I would like to know. How can I submit a fetched data to submit in another dataset. Like, I fetched or displayed data from dataset A and wanna submit that data to dataset B. Is it possible to use same Input field for displaying data from dataset A and when I press SUBMIT it saves data to another dataset like in B. Plz help.