$w.Repeater

$w.Repeater

A repeating layout.

Repeaters provide a way for you to add repeating content to a page in your site. Repeaters consist of repeating items, each with the same layout but different data.

Repeated Item Template

A repeater has an item template that contains the elements and initial data that is used when new items are created. The template's initial state is the state of the first repeated item that appears in the Editor. Using code, you can set the properties of, get the properties of, or call functions on the elements of the item template by selecting the elements using the $w() function from the global scope.

Selector Scope

Selector functions are used to select specific page elements so you can work with them in code. Depending on which selector you use, you are able to select elements from the different scopes described below.

To determine which scope a given selector selects from, consider the context you received the selector from.

Selector from Page or Site Code

The $w() function that is available to your Page and Site code selects elements in the global scope.

For example, the selections below are global scope selections.

ICR3Lm9uUmVhZHkoIGZ1bmN0aW9uICgpIHsKICAgbGV0IGVsZW1lbnQgPSAkdygiI215RWxlbWVudCIpOwogICBsZXQgcmVwZWF0ZWRFbGVtZW50ID0gJHcoIiNteVJlcGVhdGVkRWxlbWVudCIpOwogfSApOw==
 $w.onReady( function () {
   let element = $w("#myElement");
   let repeatedElement = $w("#myRepeatedElement");
 } );

Selector from a Callback Parameter - Non-Repeating Element Event Handler

The selector function that is passed to the event handler of an element that is not inside a repeater selects elements in the global scope.

For example, the selector passed to the onClick event handler below is a global scope selector.

ICR3KCIjbXlFbGVtZW50Iikub25DbGljayggKGV2ZW50LCAkdykgPT4gewogICAvLyAuLi4KIH0gKTs=
 $w("#myElement").onClick( (event, $w) => {
   // ...
 } );

Selector from a Callback Parameter - Repeating Element Event Handler

The selector function that is passed to the event handler of an element that is inside a repeater selects elements in the repeated item scope.

For example, the selector passed to the onClick event handler below is a repeated item scope selector.

ICR3KCIjbXlSZXBlYXRlZEVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgIC8vIC4uLgogfSApOw==
 $w("#myRepeatedElement").onClick( (event, $w) => {
   // ...
 } );

Selector from a Callback Parameter - Repeater Functions

The selector function that is passed to an event handler of a repeater or a callback from one of a repeater's loop functions selects elements in the repeated item scope.

For example, the selector passed to the callback functions below are repeated item scope selectors.

ICR3KCIjbXlSZXBlYXRlciIpLm9uSXRlbVJlYWR5KCAoJHcsIGl0ZW1EYXRhLCBpbmRleCkgPT4gewogICAvLyAuLi4KIH0gKTsKCiAvLyBhbmQKCiAkdygiI215UmVwZWF0ZXIiKS5mb3JFYWNoSXRlbSggKCR3LCBpdGVtRGF0YSwgaW5kZXgpID0+IHsKICAgLy8gLi4uCiB9ICk7
 $w("#myRepeater").onItemReady( ($w, itemData, index) => {
   // ...
 } );

 // and

 $w("#myRepeater").forEachItem( ($w, itemData, index) => {
   // ...
 } );

Global Scope

A selector with global scope can be used to select any element that is not contained in a repeater. You can also use it to select an element that is contained in a repeater, but you need to understand what that selection means.

When you select an element contained in a repeater from the global scope and you get the value of one of the element's properties, you receive the value of that element's property from the repeater's item template.

For example, here templateText is the text value of the myRepeatedText element from the repeater's item template.

ICR3Lm9uUmVhZHkoIGZ1bmN0aW9uICgpIHsKICAgbGV0IHRlbXBsYXRlVGV4dCA9ICR3KCIjbXlSZXBlYXRlZFRleHQiKS50ZXh0OwogfSApOw==
 $w.onReady( function () {
   let templateText = $w("#myRepeatedText").text;
 } );

When you select an element contained in a repeater from the global scope and you set the value of one of the element's properties or call one of the element's functions, the value is set or the function is called on the repeater's item template and all repeated instances of that element.

For example, here the item template is changed so that "New Text" is the text value of the myRepeatedText element. Also, all existing repeated items have the text value of their myRepeatedText element set to "New Text".

ICR3Lm9uUmVhZHkoIGZ1bmN0aW9uICgpIHsKICAgJHcoIiNteVJlcGVhdGVkVGV4dCIpLnRleHQgPSAiTmV3IFRleHQiOwogfSApOw==
 $w.onReady( function () {
   $w("#myRepeatedText").text = "New Text";
 } );

And here the item template is changed so that the myRepeatedImage element is hidden. Also, all existing repeated items have their myRepeatedImage element hidden.

ICR3Lm9uUmVhZHkoIGZ1bmN0aW9uICgpIHsKICAgJHcoIiNteVJlcGVhdGVkSW1hZ2UiKS5oaWRlKCk7CiB9ICk7
 $w.onReady( function () {
   $w("#myRepeatedImage").hide();
 } );

Repeated Item Scope

A selector with repeated item scope selects the instance of a repeating element in the current repeating item and its descendants. You can also use it to select non-repeating elements from the global scope. You cannot change the item template using a selector with repeated item scope.

For example, here when the myRepeatedImage element is clicked, the text value of the myRepeatedText element from the repeated item where the image was clicked is changed to "Selected". All the other myRepeatedText elements in the other items of the repeater are not affected.

ICR3Lm9uUmVhZHkoIGZ1bmN0aW9uICgpIHsKICAgJHcoIiNteVJlcGVhdGVkSW1hZ2UiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgICAgJHcoIiNteVJlcGVhdGVkVGV4dCIpLnRleHQgPSAiU2VsZWN0ZWQiOwogICB9ICk7CiB9ICk7
 $w.onReady( function () {
   $w("#myRepeatedImage").onClick( (event, $w) => {
     $w("#myRepeatedText").text = "Selected";
   } );
 } );

You can restrict a selector with repeated item scope to only select elements from the current repeated items and their descendants, but not elements from the global scope by adding .scoped() to the selector so the function call looks like $w.scoped("#idToSelect").

Retrieve Repeater Item Data When Clicked

Each repeated item in a repeater has a Container element that holds all of its other repeated elements. To retrieve the data associated with a specific repeated item when it is clicked, create an onClick event handler for the item's Container. Depending on how you populated the repeater with data, you either user the connected dataset or the repeater's data array to retrieve the clicked item's data in the event handler.

For a repeater populated by connecting it to a dataset:

ICR3Lm9uUmVhZHkoIGZ1bmN0aW9uICgpIHsKICAgJHcoIiNyZXBlYXRlZENvbnRhaW5lciIpLm9uQ2xpY2soIChldmVudCwgJHcpID0+IHsKICAgICBsZXQgY2xpY2tlZEl0ZW1EYXRhID0gJHcoIiNteURhdGFzZXQiKS5nZXRDdXJyZW50SXRlbSgpOwogICB9ICk7CiB9ICk7
 $w.onReady( function () {
   $w("#repeatedContainer").onClick( (event, $w) => {
     let clickedItemData = $w("#myDataset").getCurrentItem();
   } );
 } );

For a repeater populated by setting its data property:

ICR3Lm9uUmVhZHkoIGZ1bmN0aW9uICgpIHsKICAgJHcoIiNyZXBlYXRlZENvbnRhaW5lciIpLm9uQ2xpY2soIChldmVudCwgJHcpID0+IHsKICAgICBjb25zdCBkYXRhID0gJHcoIiNteVJlcGVhdGVyIikuZGF0YTsKICAgICBsZXQgY2xpY2tlZEl0ZW1EYXRhID0gZGF0YS5maWx0ZXIoaXRlbSA9PiBpdGVtLl9pZCA9PT0gZXZlbnQuY29udGV4dC5pdGVtSWQpKTsKICAgfSApOwogfSApOw==
 $w.onReady( function () {
   $w("#repeatedContainer").onClick( (event, $w) => {
     const data = $w("#myRepeater").data;
     let clickedItemData = data.filter(item => item._id === event.context.itemId));
   } );
 } );

Mixes In

$w.Element, $w.HiddenCollapsedMixin

Contents

collapsed Indicates if the element is collapsed or expanded.
data Sets or gets the repeater data.
global Indicates if an element appears on all pages or only on the current page.
hidden Indicates if the element is visible or hidden.
id Gets the elements's ID.
isVisible Indicates if the element is actually visible.
parent Gets the element's parent element.
rendered Indicates if an element is currently displayed.
type Gets the element's type.
collapse( ) Collapses the element and sets its collapsed property to true.
expand( ) Expands the element and sets its collapsed property to false.
forEachItem( ) Runs a function for each repeated item.
forItems( ) Runs a function for each repeated item with the given IDs.
hide( ) Hides the element and sets its hidden property to true, using an effect if specified.
onItemReady( ) Sets the function that runs when a new repeated item is created.
onItemRemoved( ) Sets the function that runs when a repeated item is removed.
onMouseIn( ) Adds an event handler that runs when the mouse pointer is moved onto the element.
onMouseOut( ) Adds an event handler that runs when the mouse pointer is moved off of the element.
onViewportEnter( ) Adds an event handler that runs when an element is displayed in the viewable part of the current window.
onViewportLeave( ) Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.
scrollTo( ) Scrolls the page to the element using an animation.
show( ) Shows the element and sets its hidden property to false, using an effect if specified.
collapsed

collapsed

Indicates if the element is collapsed or expanded.

Syntax

get collapsed(): boolean

Description

If collapsed is true, the element is not displayed on the page under any circumstances. A collapsed element, unlike a hidden element, does not take up any space on the page. When collapsed, elements positioned within 70 pixels below the collapsed element and each other move up to take the collapsed element's place where possible. The elements that move up maintain their positions relative to one another.

If collapsed is false, the element may be displayed on the page. Elements that moved up to take the collapsed element's place on the page are moved back down.

However, an expanded element (an element whose collapsed property is false) is still not displayed if:

Even if the element is not be displayed due to the conditions mentioned above, if its collapsed property is false, it's displayed when the conditions no longer apply.

To set the collapsed property on an element, use the element's collapse() and expand() functions.

If you select Collapsed on load in the element's Properties panel in the Editor, the collapsed property is set to true when the page loads.

Type

Boolean

Examples

Get an element's collapsed status

bGV0IGlzQ29sbGFwc2VkID0gJHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZWQ7IC8vIGZhbHNlCg==
let isCollapsed = $w("#myElement").collapsed; // false

Toggle an element's collapsed state

aWYoICR3KCIjbXlFbGVtZW50IikuY29sbGFwc2VkICkgewogICR3KCIjbXlFbGVtZW50IikuZXhwYW5kKCk7Cn0KZWxzZSB7CiAgJHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpOwp9Cg==
if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}

Default Value

false

Mixed In From

$w.HiddenCollapsedMixin

See Also

collapse( ), expand( ), hide( ), show( ), hidden

data

data

Sets or gets the repeater data.

Syntax

get data(): Object[]
set data(value: Object[]): void

Description

A repeater's data is stored as an array of objects. Each object in the array must contain a unique _id property which is used to match the object's data to the individual repeated items of the repeater as described below. The value of the _id property can only contain alphanumeric characters and hyphens (-). Other than _id, the objects in the repeater's data array can contain anything you want.

For example, a simple array of repeater data may look like this:

IFsKICAgewogICAgICJfaWQiOiAiMSIsCiAgICAgImZpcnN0TmFtZSI6ICJKb2huIiwKICAgICAibGFzdE5hbWUiOiAiRG9lIiwKICAgICAiaW1hZ2UiOiAiaHR0cDovL3NvbWVJbWFnZVVybC9qb2huLmpwZyIKICAgfSwKICAgewogICAgICJfaWQiOiAiMiIsCiAgICAgImZpcnN0TmFtZSI6ICJKYW5lIiwKICAgICAibGFzdE5hbWUiOiAiRG9lIiwKICAgICAiaW1hZ2UiOiAiaHR0cDovL3NvbWVJbWFnZVVybC9qYW5lLmpwZyIKICAgfQogXQ==
 [
   {
     "_id": "1",
     "firstName": "John",
     "lastName": "Doe",
     "image": "http://someImageUrl/john.jpg"
   },
   {
     "_id": "2",
     "firstName": "Jane",
     "lastName": "Doe",
     "image": "http://someImageUrl/jane.jpg"
   }
 ]

Repeater data is not automatically applied to the elements in the reapeated items. You choose how to use the repeater's data in the onItemReady(), onItemRemoved(), forItems(), and forEachItem() callback functions. Most often, you apply the data of a repeated item to the properties and functions of the repeated elements contained in that repeated item.

You cannot modify the data array in-place. To add, change, or remove objects from the repeater's data array:

  1. Store the value of the data property in a variable.
  2. Make changes to the objects of the shouldTriggerOnItemRemoved array.
  3. Reset the data property with the modified array.

When the repeater's data property is set:

  1. New repeated items are created for each object that has an _id value that is not already present in the current array of data objects. The elements in the new items are first populated with the data of the repeater's item template. Then the onItemReady() event handler is triggered for each of the new items. Usually, you overwrite some or all of the data populated from the item template in the onItemReady() event handler with the data for that specific item. When all of the onItemReady() event handlers have finished running, the new items are displayed.
  2. Repeated items are removed if their IDs are no longer in the array of data objects. The onItemRemoved() event handler is triggered for each of the removed items.
  3. Nothing occurs to repeated items whose IDs were already in the array of data objects, even if other data in the object has changed. To update repeated items with the new data, use the forEachItem() or forItems() functions.

Getting the data property returns the repeater's current data. If you have not yet explicitly set the repeater's data, getting the data property returns only the IDs of the current repeated items that were set in the Editor.

Type

Object[ ]

Examples

Get a repeater's data

bGV0IHJlcGVhdGVyRGF0YSA9ICR3KCIjbXlSZXBlYXRlciIpLmRhdGE7Cg==
let repeaterData = $w("#myRepeater").data;

Set a repeater's data

Y29uc3QgYmlrZURhdGEgPSBbCgl7CgkJIl9pZCI6ImJpa2UxIiwKCQkiaW1nIjoid2l4OmltYWdlOi8vdjEvNjg3NWMwODZlZjQ1M2Y1NzI3YzJiNTkzMmIzYjNiZTQucG5nL1JlZCBCaWtlLyNvcmlnaW5XaWR0aD01NTAmb3JpZ2luSGVpZ2h0PTMwMCIsCgkJImtpbmQiOiJSZWQgQmlrZSIKCX0sCgl7CgkJIl9pZCI6ImJpa2UyIiwKCQkiaW1nIjoid2l4OmltYWdlOi8vdjEvNzAzYjRhZjI0NTc4YWRhNmYxZTExNzI1YTQ2ODA5NmUucG5nL1NwZWVkIEJpa2UvI29yaWdpbldpZHRoPTU1MCZvcmlnaW5IZWlnaHQ9MzAwIiwKCQkia2luZCI6IkJsYWNrIEJpa2UiCgl9LAoJewoJCSJfaWQiOiJiaWtlMyIsCgkJImltZyI6IndpeDppbWFnZTovL3YxLzJiYjMyMTkxNTNjMzQ3ZGFmNDc1MDY3ZDc2M2JlNDBkLnBuZy9OZW9uIEJpa2UvI29yaWdpbldpZHRoPTU1MCZvcmlnaW5IZWlnaHQ9MzAwIiwKCQkia2luZCI6IkdyZWVuIEJpa2UiCgl9Cl07CgokdygiI215UmVwZWF0ZXIiKS5kYXRhID0gYmlrZURhdGE7Cg==
const bikeData = [
	{
		"_id":"bike1",
		"img":"wix:image://v1/6875c086ef453f5727c2b5932b3b3be4.png/Red Bike/#originWidth=550&originHeight=300",
		"kind":"Red Bike"
	},
	{
		"_id":"bike2",
		"img":"wix:image://v1/703b4af24578ada6f1e11725a468096e.png/Speed Bike/#originWidth=550&originHeight=300",
		"kind":"Black Bike"
	},
	{
		"_id":"bike3",
		"img":"wix:image://v1/2bb3219153c347daf475067d763be40d.png/Neon Bike/#originWidth=550&originHeight=300",
		"kind":"Green Bike"
	}
];

$w("#myRepeater").data = bikeData;

Set a repeater's data from a database query

aW1wb3J0IHdpeERhdGEgZnJvbSAnd2l4LWRhdGEnOwoKJHcub25SZWFkeShmdW5jdGlvbiAoKSB7CiAgJHcoIiNteVJlcGVhdGVyIikub25JdGVtUmVhZHkoICgkdywgaXRlbURhdGEsIGluZGV4KSA9PiB7CiAgICAkdygiI2Jvb2tUaXRsZSIpLnRleHQgPSBpdGVtRGF0YS50aXRsZTsKICAgICR3KCIjYm9va1N1YnRpdGxlIikudGV4dCA9IGl0ZW1EYXRhLnN1YnRpdGxlOwogICAgJHcoIiNib29rQ292ZXIiKS5zcmMgPSBpdGVtRGF0YS5waWM7CiAgfSApOwoKICB3aXhEYXRhLnF1ZXJ5KCJCb29rcyIpCiAgICAuZmluZCgpCiAgICAudGhlbiggKHJlc3VsdHMpID0+IHsKICAgICAgJHcoIiNteVJlcGVhdGVyIikuZGF0YSA9IHJlc3VsdHMuaXRlbXM7CiAgICB9ICk7Cn0gKTsK
import wixData from 'wix-data';

$w.onReady(function () {
  $w("#myRepeater").onItemReady( ($w, itemData, index) => {
    $w("#bookTitle").text = itemData.title;
    $w("#bookSubtitle").text = itemData.subtitle;
    $w("#bookCover").src = itemData.pic;
  } );

  wixData.query("Books")
    .find()
    .then( (results) => {
      $w("#myRepeater").data = results.items;
    } );
} );

Modify a repeater's data

Ly8gZ2V0IGN1cnJlbnQgZGF0YSBhcnJheQpsZXQgZGF0YUFycmF5ID0gJHcoIiNteVJlcGVhdGVyIikuZGF0YTsKCi8vIGNoYW5nZSBzb21ldGhpbmcgaW4gdGhlIGRhdGEgYXJyYXkKZGF0YUFycmF5WzBdLnNvbWVmaWVsZCA9ICJOZXcgdmFsdWUiOwoKLy8gcmVzZXQgcmVwZWF0ZXIgZGF0YQokdygiI215UmVwZWF0ZXIiKS5kYXRhID0gZGF0YUFycmF5Owo=
// get current data array
let dataArray = $w("#myRepeater").data;

// change something in the data array
dataArray[0].somefield = "New value";

// reset repeater data
$w("#myRepeater").data = dataArray;

Set a repeater's data

This example defines an event handler to handle the creation of new items and sets a repeater's data.

Ly8gc3RhdGljIHJlcGVhdGVyIGRhdGEKY29uc3QgYmlrZURhdGEgPSBbCiAgewogICAgIl9pZCI6ImJpa2UxIiwKICAgICJpbWciOiJ3aXg6aW1hZ2U6Ly92MS82ODc1YzA4NmVmNDUzZjU3MjdjMmI1OTMyYjNiM2JlNC5wbmcvUmVkIEJpa2UvI29yaWdpbldpZHRoPTU1MCZvcmlnaW5IZWlnaHQ9MzAwIiwKICAgICJkZXNjcmlwdGlvbiI6IlJlZCBCaWtlIgogIH0sCiAgewogICAgIl9pZCI6ImJpa2UyIiwKICAgICJpbWciOiJ3aXg6aW1hZ2U6Ly92MS83MDNiNGFmMjQ1NzhhZGE2ZjFlMTE3MjVhNDY4MDk2ZS5wbmcvU3BlZWQgQmlrZS8jb3JpZ2luV2lkdGg9NTUwJm9yaWdpbkhlaWdodD0zMDAiLAogICAgImRlc2NyaXB0aW9uIjoiQmxhY2sgQmlrZSIKICB9LAogIHsKICAgICJfaWQiOiJiaWtlMyIsCiAgICAiaW1nIjoid2l4OmltYWdlOi8vdjEvMmJiMzIxOTE1M2MzNDdkYWY0NzUwNjdkNzYzYmU0MGQucG5nL05lb24gQmlrZS8jb3JpZ2luV2lkdGg9NTUwJm9yaWdpbkhlaWdodD0zMDAiLAogICAgImRlc2NyaXB0aW9uIjoiR3JlZW4gQmlrZSIKICB9Cl07Cgokdy5vblJlYWR5KGZ1bmN0aW9uICgpIHsKICAvLyBoYW5kbGUgY3JlYXRpb24gb2YgbmV3IHJlcGVhdGVkIGl0ZW1zCiAgJHcoIiNteVJlcGVhdGVyIikub25JdGVtUmVhZHkoICgkdywgaXRlbURhdGEsIGluZGV4KSA9PiB7CiAgICAkdygiI2ltYWdlMSIpLnNyYyA9IGl0ZW1EYXRhLmltZzsKICAgICR3KCIjdGV4dDEiKS50ZXh0ID0gaXRlbURhdGEuZGVzY3JpcHRpb247CgogICAgJHcoIiNpbWFnZTEiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgICAgICR3KCIjdGV4dDEiKS50ZXh0ID0gIlNlbGVjdGVkIjsKICAgIH0gKTsKICB9ICk7CgogIC8vIHNldCB0aGUgcmVwZWF0ZXIgZGF0YSwgdHJpZ2dlcmluZyB0aGUgY3JlYXRpb24gb2YgbmV3IGl0ZW1zCiAgJHcoIiNteVJlcGVhdGVyIikuZGF0YSA9IGJpa2VEYXRhOwp9ICk7Cg==
// static repeater data
const bikeData = [
  {
    "_id":"bike1",
    "img":"wix:image://v1/6875c086ef453f5727c2b5932b3b3be4.png/Red Bike/#originWidth=550&originHeight=300",
    "description":"Red Bike"
  },
  {
    "_id":"bike2",
    "img":"wix:image://v1/703b4af24578ada6f1e11725a468096e.png/Speed Bike/#originWidth=550&originHeight=300",
    "description":"Black Bike"
  },
  {
    "_id":"bike3",
    "img":"wix:image://v1/2bb3219153c347daf475067d763be40d.png/Neon Bike/#originWidth=550&originHeight=300",
    "description":"Green Bike"
  }
];

$w.onReady(function () {
  // handle creation of new repeated items
  $w("#myRepeater").onItemReady( ($w, itemData, index) => {
    $w("#image1").src = itemData.img;
    $w("#text1").text = itemData.description;

    $w("#image1").onClick( (event, $w) => {
      $w("#text1").text = "Selected";
    } );
  } );

  // set the repeater data, triggering the creation of new items
  $w("#myRepeater").data = bikeData;
} );

Set a repeater's data and add new data on a button click

This example defines an event handler to handle the creation of new items and sets a repeater's data. It also adds an event handler to an "addButton" that is not part of the repeater. Clicking the button resets the repeater's data, adding another item.

Ly8gc3RhdGljIHJlcGVhdGVyIGRhdGEgcGFydCAxCmNvbnN0IGJpa2VEYXRhMSA9IFsKICB7CiAgICAiX2lkIjoiYmlrZTEiLAogICAgImltZyI6IndpeDppbWFnZTovL3YxLzY4NzVjMDg2ZWY0NTNmNTcyN2MyYjU5MzJiM2IzYmU0LnBuZy9SZWQgQmlrZS8jb3JpZ2luV2lkdGg9NTUwJm9yaWdpbkhlaWdodD0zMDAiLAogICAgImRlc2NyaXB0aW9uIjoiUmVkIEJpa2UiCiAgfSwKICB7CiAgICAiX2lkIjoiYmlrZTIiLAogICAgImltZyI6IndpeDppbWFnZTovL3YxLzcwM2I0YWYyNDU3OGFkYTZmMWUxMTcyNWE0NjgwOTZlLnBuZy9TcGVlZCBCaWtlLyNvcmlnaW5XaWR0aD01NTAmb3JpZ2luSGVpZ2h0PTMwMCIsCiAgICAiZGVzY3JpcHRpb24iOiJCbGFjayBCaWtlIgogIH0KXTsKCi8vIHN0YXRpYyByZXBlYXRlciBkYXRhIHBhcnQgMgpjb25zdCBiaWtlRGF0YTIgPSBbCiAgewogICAgIl9pZCI6ImJpa2UzIiwKICAgICJpbWciOiJ3aXg6aW1hZ2U6Ly92MS8yYmIzMjE5MTUzYzM0N2RhZjQ3NTA2N2Q3NjNiZTQwZC5wbmcvTmVvbiBCaWtlLyNvcmlnaW5XaWR0aD01NTAmb3JpZ2luSGVpZ2h0PTMwMCIsCiAgICAiZGVzY3JpcHRpb24iOiJHcmVlbiBCaWtlIgogIH0KXTsKCiR3Lm9uUmVhZHkoZnVuY3Rpb24gKCkgewogIC8vIGhhbmRsZSBjcmVhdGlvbiBvZiBuZXcgcmVwZWF0ZWQgaXRlbXMKICAkdygiI215UmVwZWF0ZXIiKS5vbkl0ZW1SZWFkeSggKCR3LCBpdGVtRGF0YSwgaW5kZXgpID0+IHsKICAgICR3KCIjaW1hZ2UxIikuc3JjID0gaXRlbURhdGEuaW1nOwogICAgJHcoIiN0ZXh0MSIpLnRleHQgPSBpdGVtRGF0YS5kZXNjcmlwdGlvbjsKCiAgICAkdygiI2ltYWdlMSIpLm9uQ2xpY2soIChldmVudCwgJHcpID0+IHsKICAgICAgJHcoIiN0ZXh0MSIpLnRleHQgPSAiU2VsZWN0ZWQiOwogICAgfSApOwogIH0gKTsKCiAgLy8gc2V0IHRoZSByZXBlYXRlciBkYXRhIHRvIGJlIHRoZSBmaXJzdCBwYXJ0IG9mIHRoZSBzdGF0aWMgZGF0YSwKICAvLyB0cmlnZ2VyaW5nIHRoZSBjcmVhdGlvbiBvZiBuZXcgaXRlbXMKICAkdygiI215UmVwZWF0ZXIiKS5kYXRhID0gYmlrZURhdGExOwoKICAvLyBhZGQgYSBoYW5kbGVyIGZvciB0aGUgImFkZCIgYnV0dG9uIHRoYXQgcmVzZXRzIHRoZSByZXBlYXRlciBkYXRhCiAgLy8gdG8gYmUgYm90aCBwYXJ0cyBvZiB0aGUgc3RhdGljIGRhdGEsIHRyaWdnZXJpbmcgdGhlIGNyZWF0aW9uIG9mCiAgLy8gYSBuZXcgaXRlbQogICR3KCIjYWRkQnV0dG9uIikub25DbGljayggKCkgPT4gewogICAgbGV0IHRlbXBEYXRhID0gJHcoIiNteVJlcGVhdGVyIikuZGF0YTsKICAgICR3KCIjbXlSZXBlYXRlciIpLmRhdGEgPSB0ZW1wRGF0YS5jb25jYXQoYmlrZURhdGEyKTsKICB9ICk7Cn0gKTsK
// static repeater data part 1
const bikeData1 = [
  {
    "_id":"bike1",
    "img":"wix:image://v1/6875c086ef453f5727c2b5932b3b3be4.png/Red Bike/#originWidth=550&originHeight=300",
    "description":"Red Bike"
  },
  {
    "_id":"bike2",
    "img":"wix:image://v1/703b4af24578ada6f1e11725a468096e.png/Speed Bike/#originWidth=550&originHeight=300",
    "description":"Black Bike"
  }
];

// static repeater data part 2
const bikeData2 = [
  {
    "_id":"bike3",
    "img":"wix:image://v1/2bb3219153c347daf475067d763be40d.png/Neon Bike/#originWidth=550&originHeight=300",
    "description":"Green Bike"
  }
];

$w.onReady(function () {
  // handle creation of new repeated items
  $w("#myRepeater").onItemReady( ($w, itemData, index) => {
    $w("#image1").src = itemData.img;
    $w("#text1").text = itemData.description;

    $w("#image1").onClick( (event, $w) => {
      $w("#text1").text = "Selected";
    } );
  } );

  // set the repeater data to be the first part of the static data,
  // triggering the creation of new items
  $w("#myRepeater").data = bikeData1;

  // add a handler for the "add" button that resets the repeater data
  // to be both parts of the static data, triggering the creation of
  // a new item
  $w("#addButton").onClick( () => {
    let tempData = $w("#myRepeater").data;
    $w("#myRepeater").data = tempData.concat(bikeData2);
  } );
} );

Set the a repeater's data and remove some data on a button click

This example defines event handlers to handle the creation of new items and the removal of existing items. Then it sets a repeater's data. Lastly, it adds an event handler to a "removeButton" that is not part of the repeater. Clicking the button resets the repeater's data, removing one of the items.

Ly8gc3RhdGljIHJlcGVhdGVyIGRhdGEKY29uc3QgYmlrZURhdGEgPSBbCiAgewogICAgIl9pZCI6ImJpa2UxIiwKICAgICJpbWciOiJ3aXg6aW1hZ2U6Ly92MS82ODc1YzA4NmVmNDUzZjU3MjdjMmI1OTMyYjNiM2JlNC5wbmcvUmVkIEJpa2UvI29yaWdpbldpZHRoPTU1MCZvcmlnaW5IZWlnaHQ9MzAwIiwKICAgICJkZXNjcmlwdGlvbiI6IlJlZCBCaWtlIgogIH0sCiAgewogICAgIl9pZCI6ImJpa2UyIiwKICAgICJpbWciOiJ3aXg6aW1hZ2U6Ly92MS83MDNiNGFmMjQ1NzhhZGE2ZjFlMTE3MjVhNDY4MDk2ZS5wbmcvU3BlZWQgQmlrZS8jb3JpZ2luV2lkdGg9NTUwJm9yaWdpbkhlaWdodD0zMDAiLAogICAgImRlc2NyaXB0aW9uIjoiQmxhY2sgQmlrZSIKICB9LAogIHsKICAgICJfaWQiOiJiaWtlMyIsCiAgICAiaW1nIjoid2l4OmltYWdlOi8vdjEvMmJiMzIxOTE1M2MzNDdkYWY0NzUwNjdkNzYzYmU0MGQucG5nL05lb24gQmlrZS8jb3JpZ2luV2lkdGg9NTUwJm9yaWdpbkhlaWdodD0zMDAiLAogICAgImRlc2NyaXB0aW9uIjoiR3JlZW4gQmlrZSIKICB9Cl07Cgokdy5vblJlYWR5KGZ1bmN0aW9uICgpIHsKICAvLyBoYW5kbGUgY3JlYXRpb24gb2YgbmV3IHJlcGVhdGVkIGl0ZW1zCiAgJHcoIiNteVJlcGVhdGVyIikub25JdGVtUmVhZHkoICgkdywgaXRlbURhdGEsIGluZGV4KSA9PiB7CiAgICAkdygiI2ltYWdlMSIpLnNyYyA9IGl0ZW1EYXRhLmltZzsKICAgICR3KCIjdGV4dDEiKS50ZXh0ID0gaXRlbURhdGEuZGVzY3JpcHRpb247CgogICAgJHcoIiNpbWFnZTEiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgICAgICR3KCIjdGV4dDEiKS50ZXh0ID0gIlNlbGVjdGVkIjsKICAgIH0gKTsKICB9ICk7CgogIC8vIGhhbmRsZSByZW1vdmFsIG9mIG5ldyByZXBlYXRlZCBpdGVtcwogICR3KCIjbXlSZXBlYXRlciIpLm9uSXRlbVJlbW92ZWQoIChpdGVtRGF0YSkgPT4gewogICAgY29uc29sZS5sb2coYFJlbW92ZWQ6ICR7SlNPTi5zdHJpbmdpZnkoaXRlbURhdGEpfWApOwogIH0gKTsKCiAgLy8gc2V0IHRoZSByZXBlYXRlciBkYXRhIHRvIGJlIHRoZSBmaXJzdCBwYXJ0IG9mIHRoZSBzdGF0aWMgZGF0YSwKICAvLyB0cmlnZ2VyaW5nIHRoZSBjcmVhdGlvbiBvZiBuZXcgaXRlbXMKICAkdygiI215UmVwZWF0ZXIiKS5kYXRhID0gYmlrZURhdGE7CgogIC8vIGFkZCBhIGhhbmRsZXIgZm9yIHRoZSAicmVtb3ZlIiBidXR0b24gdGhhdCByZXNldHMgdGhlIHJlcGVhdGVyIGRhdGEKICAvLyB3aXRoIHRoZSBtaWRkbGUgb2JqZWN0IHJlbW92ZWQsIHRyaWdnZXJpbmcgdGhlIHJlbW92YWwgb2YgdGhlIG1pZGRsZQogIC8vIHJlcGVhdGVkIGl0ZW0KICAkdygiI3JlbW92ZUJ1dHRvbiIpLm9uQ2xpY2soICgpID0+IHsKICAgIGxldCB0ZW1wRGF0YSA9ICR3KCIjbXlSZXBlYXRlciIpLmRhdGE7CiAgICB0ZW1wRGF0YS5zcGxpY2UoMSwxKTsKICAgICR3KCIjbXlSZXBlYXRlciIpLmRhdGEgPSB0ZW1wRGF0YTsKICB9ICk7Cn0gKTsK
// static repeater data
const bikeData = [
  {
    "_id":"bike1",
    "img":"wix:image://v1/6875c086ef453f5727c2b5932b3b3be4.png/Red Bike/#originWidth=550&originHeight=300",
    "description":"Red Bike"
  },
  {
    "_id":"bike2",
    "img":"wix:image://v1/703b4af24578ada6f1e11725a468096e.png/Speed Bike/#originWidth=550&originHeight=300",
    "description":"Black Bike"
  },
  {
    "_id":"bike3",
    "img":"wix:image://v1/2bb3219153c347daf475067d763be40d.png/Neon Bike/#originWidth=550&originHeight=300",
    "description":"Green Bike"
  }
];

$w.onReady(function () {
  // handle creation of new repeated items
  $w("#myRepeater").onItemReady( ($w, itemData, index) => {
    $w("#image1").src = itemData.img;
    $w("#text1").text = itemData.description;

    $w("#image1").onClick( (event, $w) => {
      $w("#text1").text = "Selected";
    } );
  } );

  // handle removal of new repeated items
  $w("#myRepeater").onItemRemoved( (itemData) => {
    console.log(`Removed: ${JSON.stringify(itemData)}`);
  } );

  // set the repeater data to be the first part of the static data,
  // triggering the creation of new items
  $w("#myRepeater").data = bikeData;

  // add a handler for the "remove" button that resets the repeater data
  // with the middle object removed, triggering the removal of the middle
  // repeated item
  $w("#removeButton").onClick( () => {
    let tempData = $w("#myRepeater").data;
    tempData.splice(1,1);
    $w("#myRepeater").data = tempData;
  } );
} );
global

global

Indicates if an element appears on all pages or only on the current page.

Syntax

get global(): boolean

Description

If global is true, the element appears on all pages.

If global is false, the element only appears on the current page.

Type

Boolean

Examples

Get whether an element is displayed on all pages

bGV0IGlzR2xvYmFsID0gJHcoIiNteUVsZW1lbnQiKS5nbG9iYWw7IC8vIGZhbHNlCg==
let isGlobal = $w("#myElement").global; // false

Default Value

false

Mixed In From

$w.Element

hidden

hidden

Indicates if the element is visible or hidden.

Syntax

get hidden(): boolean

Description

If hidden is true, the element is not displayed on the page under any circumstances. A hidden element, unlike a collapsed element, continues to take up the same space on the page as it did when it was visible.

If hidden is false, the element may be displayed on the page.

However, an element whose hidden property is false is still not displayed if:

Even if the element is not displayed due to the conditions mentioned above, if its hidden property is set to false, it's displayed when the conditions no longer apply.

To determine if the element is actually visible, use the isVisible property.

To set the hidden property on an element, use the element's hide() or show() functions.

If you select Hidden on load in the element's Properties panel in the Editor, the hidden property is set to true when the page loads.

Type

Boolean

Examples

Get an element's hidden status

bGV0IGlzSGlkZGVuID0gJHcoIiNteUVsZW1lbnQiKS5oaWRkZW47ICAvLyBmYWxzZQo=
let isHidden = $w("#myElement").hidden;  // false

Toggle an element's hidden state

aWYoICR3KCIjbXlFbGVtZW50IikuaGlkZGVuICkgewogICR3KCIjbXlFbGVtZW50Iikuc2hvdygpOwp9CmVsc2UgewogICR3KCIjbXlFbGVtZW50IikuaGlkZSgpOwp9Cg==
if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

Default Value

false

Mixed In From

$w.HiddenCollapsedMixin

See Also

hide( ), show( ), collapse( ), expand( ), collapsed, rendered

id

id

Gets the elements's ID.

Syntax

get id(): string

Description

The ID is the element's unique identifier. It is used when selecting elements using the $w() function.

An element's id is set in the Editor using the Properties panel.

Type

String

Examples

Get the ID

bGV0IG15SWQgPSAkdygiI215RWxlbWVudCIpLmlkOyAvLyAibXlFbGVtZW50Igo=
let myId = $w("#myElement").id; // "myElement"

Mixed In From

$w.Element

isVisible

isVisible

Indicates if the element is actually visible.

Syntax

get isVisible(): boolean

Description

If isVisible is true, the element is displayed on the page.

If isVisible is false, the element is not displayed on the page.

The value of the isVisible property is calculated based on the hidden, collapsed, and rendered properties of the element and all of its ancestors. It is true only if the conditions exist in the element's property values and the property values of its ancestors such that the element is actually displayed on the page.

Type

Boolean

Examples

Get whether an element is visible

bGV0IGlzVmlzaWJsZSA9ICR3KCIjbXlFbGVtZW50IikuaXNWaXNpYmxlOyAgLy8gdHJ1ZQo=
let isVisible = $w("#myElement").isVisible;  // true

Default Value

true

Mixed In From

$w.HiddenCollapsedMixin

See Also

hidden, collapsed, rendered

parent

parent

Gets the element's parent element.

Syntax

get parent(): Node

Description

Some elements can contain other elements. This occurs when you drag an element onto a container element. The container is the parent of all the elements it contains.

Page, Header, and Footer are top-level elements and have no parent.

Type

Node

Examples

Get the parent element and the parent's ID

bGV0IHBhcmVudEVsZW1lbnQgPSAkdygiI215RWxlbWVudCIpLnBhcmVudDsKCmxldCBwYXJlbnRJZCA9IHBhcmVudEVsZW1lbnQuaWQ7IC8vICJwYWdlMSIK
let parentElement = $w("#myElement").parent;

let parentId = parentElement.id; // "page1"

Default Value

null

Mixed In From

$w.Element

See Also

children

rendered

rendered

Indicates if an element is currently displayed.

Syntax

get rendered(): boolean

Description

If rendered is true, the element is in the current DOM structure and can be used.

If rendered is false the element is not in the current DOM structure.

Some reasons the element might not be in the DOM inclue:

  • It is in a slide which is not currently showing.
  • It is in a mode which is not currently active. For example, it is in the hover mode of a hover box.

Type

Boolean

Default Value

false

Mixed In From

$w.Element

See Also

collapsed, hidden, isVisible

type

type

Gets the element's type.

Syntax

get type(): string

Type

String

Examples

Get the element's type

bGV0IG15VHlwZSA9ICR3KCIjbXlFbGVtZW50IikudHlwZTsgLy8gIiR3LlR5cGUiCg==
let myType = $w("#myElement").type; // "$w.Type"

Mixed In From

$w.Element

collapse( )

collapse( )

Collapses the element and sets its collapsed property to true.

function collapse(): Promise<void>

Description

The collapse() function returns a Promise that is resolved when the element's collapsed property has been set to true.

To learn about the behavior of a collapsed element, see the collapsed property.

You can also collapse an element when the page loads by using the Properties panel in the Editor.

Return Value

Returns a Promise

On fulfillment void When the element's collapsed property has been set to true.

Examples

Collapse an element

JHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpOwo=
$w("#myElement").collapse();

Collapse an element and log a message when done

JHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpCiAgLnRoZW4oICgpID0+IHsKICAgIGNvbnNvbGUubG9nKCJEb25lIHdpdGggY29sbGFwc2UiKTsKICB9ICk7Cg==
$w("#myElement").collapse()
  .then( () => {
    console.log("Done with collapse");
  } );

Toggle an element's collapsed state

aWYoICR3KCIjbXlFbGVtZW50IikuY29sbGFwc2VkICkgewogICR3KCIjbXlFbGVtZW50IikuZXhwYW5kKCk7Cn0KZWxzZSB7CiAgJHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpOwp9Cg==
if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}

Mixed In From

$w.HiddenCollapsedMixin

See Also

expand( ), collapsed, hide( )

expand( )

expand( )

Expands the element and sets its collapsed property to false.

function expand(): Promise<void>

Description

The expand() function returns a Promise that is resolved when the element's collapsed property has been set to false.

To learn about the behavior of an expanded element, see the collapsed property.

Return Value

Returns a Promise

On fulfillment void When the element's collapsed property has been set to false.

Examples

Expand an element

JHcoIiNteUVsZW1lbnQiKS5leHBhbmQoKTsK
$w("#myElement").expand();

Expand an element and log a message when done

JHcoIiNteUVsZW1lbnQiKS5leHBhbmQoKQogIC50aGVuKCAoKSA9PiB7CiAgICBjb25zb2xlLmxvZygiRG9uZSB3aXRoIGV4cGFuZCIpOwogIH0gKTsK
$w("#myElement").expand()
  .then( () => {
    console.log("Done with expand");
  } );

Toggle an element's collapsed state

aWYoICR3KCIjbXlFbGVtZW50IikuY29sbGFwc2VkICkgewogICR3KCIjbXlFbGVtZW50IikuZXhwYW5kKCk7Cn0KZWxzZSB7CiAgJHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpOwp9Cg==
if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}

Mixed In From

$w.HiddenCollapsedMixin

See Also

expand( ), collapsed, show( )

forEachItem( )

forEachItem( )

Runs a function for each repeated item.

function forEachItem(callback: ForItemCallback): void
callback ForItemCallback($w: Function, itemData: Object, index: Number): void

Description

Use the forEachItem() function to run a function on all of a repeater's repeated items. You can use the callback function to update or pull information from all of the repeater's repeated items.

When you set a repeater's data property with data that changes items with existing IDs, those changes are not automatically reflected in the elements contained in the repeater. That is because you are responsible for applying a repeater's data to its repeated items.

To apply the data to items with new IDs, you can use the onItemReady() event handler.

To update items with existing IDs, you can use the forEachItem() or forItems() functions.

Usually, when updating repeated items you:

  • Apply the repeated item's itemData to the elements contained in each of the repeater's repeated items.
  • Add event handlers to the elements contained in each of the repeater's repeated items.

Parameters

callback function($w, itemData, index) The name of the function or the function expression to run for each repeated item.
$w $w A selector function with repeated item scope.
itemData Object The object from the repeater's data array that corresponds to the current repeated item.
index Number The index of the itemData object in the data array.

Examples

Loop through all of a repeater's repeated items

JHcoIiNteVJlcGVhdGVyIikuZm9yRWFjaEl0ZW0oICgkdywgaXRlbURhdGEsIGluZGV4KSA9PiB7CiAgbGV0IHJlcGVhdGVkRWxlbWVudCA9ICR3KCIjcmVwZWF0ZWRFbGVtZW50Iik7CiAgbGV0IG5vblJlcGVhdGVkRWxlbWVudCA9ICR3KCIjbm9uUmVwZWF0ZWRFbGVtZW50Iik7CiAgbGV0IGl0ZW1EYXRhVmFsdWUgPSBpdGVtRGF0YS5zb21lUHJvcGVydHk7CiAgbGV0IGlzRXZlbkl0ZW0gPSBpbmRleCAlIDIgPT0gMDsKfSApOwo=
$w("#myRepeater").forEachItem( ($w, itemData, index) => {
  let repeatedElement = $w("#repeatedElement");
  let nonRepeatedElement = $w("#nonRepeatedElement");
  let itemDataValue = itemData.someProperty;
  let isEvenItem = index % 2 == 0;
} );

Update data in all of a repeater's repeated items

JHcoIiNteVJlcGVhdGVyIikuZm9yRWFjaEl0ZW0oICgkdywgaXRlbURhdGEsIGluZGV4KSA9PiB7CiAgJHcoIiNyZXBlYXRlZEltYWdlIikuc3JjID0gaXRlbURhdGEuaW1nOwogICR3KCIjcmVwZWF0ZWRUZXh0IikudGV4dCA9IGl0ZW1EYXRhLmRlc2NyaXB0aW9uOwp9ICk7Cg==
$w("#myRepeater").forEachItem( ($w, itemData, index) => {
  $w("#repeatedImage").src = itemData.img;
  $w("#repeatedText").text = itemData.description;
} );

Update data in all of a repeater's repeated items

This example uses a forEachItem() to override some of the data populated into a repeater that is connected to a dataset. Here we want a text element to contain text that changes based on the value of a certain boolean field. When a page loads, the dataset loads after the repeater. So we wait for the dataset's onReady() to call a forEachItem() that sets the desired values.

JHcub25SZWFkeShmdW5jdGlvbiAoKSB7CiAgICAkdygiI215RGF0YXNldCIpLm9uUmVhZHkoICgpID0+IHsKICAgICAgJHcoIiNteVJlcGVhdGVyIikuZm9yRWFjaEl0ZW0oICgkdywgaXRlbURhdGEsIGluZGV4KSA9PiB7CiAgICAgICAgICBpZihpdGVtRGF0YS5ib29sRmllbGQpewogICAgICAgICAgICAgICR3KCJteVRleHQiKS50ZXh0ID0gIlllcyBNYSdhbSEiOwogICAgICAgICAgfQogICAgICAgICAgZWxzZSB7CiAgICAgICAgICAgICAgJHcoIiNteVRleHQiKS50ZXh0ID0gIk5vIHdheSBKb3NlISI7CiAgICAgICAgICB9CiAgICAgIH0gKTsKICB9ICk7Cn0gKTsK
$w.onReady(function () {
    $w("#myDataset").onReady( () => {
      $w("#myRepeater").forEachItem( ($w, itemData, index) => {
          if(itemData.boolField){
              $w("myText").text = "Yes Ma'am!";
          }
          else {
              $w("#myText").text = "No way Jose!";
          }
      } );
  } );
} );
forItems( )

forItems( )

Runs a function for each repeated item with the given IDs.

function forItems(itemIds: String[], callback: ForItemCallback): void
callback ForItemCallback(selector: Function, itemData: Object, index: Number): void

Description

Use the forItems() function to run a function on a specified list of repeated items. You can use the callback function to update or pull information from the specified repeated items.

When you set a repeater's data property with data that changes items with existing IDs, those changes are not automatically reflected in the elements contained in the repeater. That is because you are responsible for applying a repeater's data to its repeated items.

To apply the data to items with new IDs, you can use the onItemReady() event handler.

To update items with existing IDs, you can use the forEachItem() or forItems() functions.

Usually, when updating repeated items you:

  • Apply the repeated item's itemData to the elements contained in each of the repeater's repeated items.
  • Add event handlers to the elements contained in each of the repeater's repeated items.

Parameters

itemIds String[ ] The IDs of the items on which to run the callback function.
callback function($w, itemData, index) The name of the function or the function expression to run for each repeated item.
$w $w A selector function with repeated item scope.
itemData Object The object from the repeater's data array that corresponds to the current repeated item.
index Number The index of the itemData object in the data array.

Examples

Loop through some of a repeater's repeated items

JHcoIiNteVJlcGVhdGVyIikuZm9ySXRlbXMoIFsiaXRlbTEiLCAiaXRlbTQiXSwgKCR3LCBpdGVtRGF0YSwgaW5kZXgpID0+IHsKICBsZXQgcmVwZWF0ZWRFbGVtZW50ID0gJHcoIiNyZXBlYXRlZEVsZW1lbnQiKTsKICBsZXQgbm9uUmVwZWF0ZWRFbGVtZW50ID0gJHcoIiNub25SZXBlYXRlZEVsZW1lbnQiKTsKICBsZXQgaXRlbURhdGFWYWx1ZSA9IGl0ZW1EYXRhLnNvbWVQcm9wZXJ0eTsKICBsZXQgaXNFdmVuSXRlbSA9IGluZGV4ICUgMiA9PSAwOwp9ICkgOwo=
$w("#myRepeater").forItems( ["item1", "item4"], ($w, itemData, index) => {
  let repeatedElement = $w("#repeatedElement");
  let nonRepeatedElement = $w("#nonRepeatedElement");
  let itemDataValue = itemData.someProperty;
  let isEvenItem = index % 2 == 0;
} ) ;

Update data in some of a repeater's repeated items

JHcoIiNteVJlcGVhdGVyIikuZm9ySXRlbXMoIFsiaXRlbTEiLCAiaXRlbTQiXSwgKCR3LCBpdGVtRGF0YSwgaW5kZXgpID0+IHsKICAkdygiI3JlcGVhdGVkSW1hZ2UiKS5zcmMgPSBpdGVtRGF0YS5pbWc7CiAgJHcoIiNyZXBlYXRlZFRleHQiKS50ZXh0ID0gaXRlbURhdGEuZGVzY3JpcHRpb247Cn0gKTsK
$w("#myRepeater").forItems( ["item1", "item4"], ($w, itemData, index) => {
  $w("#repeatedImage").src = itemData.img;
  $w("#repeatedText").text = itemData.description;
} );
hide( )

hide( )

Hides the element and sets its hidden property to true, using an effect if specified.

function hide([effectName: Effect], [effectOptions: EffectOptions]): Promise<void>
type Effect = "arc" | "bounce" | "fade" | "flip"
| "float" | "fly" | "fold" | "glide" | "puff"
| "roll" | "slide" | "spin" | "turn" | "zoom"
type EffectOptions = ArcEffectOptions | BounceEffectOptions
| FadeEffectOptions | FlipEffectOptions | FloatEffectOptions
| FlyEffectOptions | FoldEffectOptions | GlideEffectOptions
| PuffEffectOptions | RollEffectOptions | SlideEffectOptions
| SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions

Description

The hide() function hides the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to true.

To learn about the behavior of a hidden element, see the hidden property.

You can optionally apply an effect when hiding the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

You can also hide an element when the page loads by using the Properties panel in the Editor.

Parameters

effectName (optional) String The name of the effect to play when hiding the item.
effectOptions (optional) ArcEffectOptions |
BounceEffectOptions |
FadeEffectOptions |
FlipEffectOptions |
FloatEffectOptions |
FlyEffectOptions |
FoldEffectOptions |
GlideEffectOptions |
PuffEffectOptions |
RollEffectOptions |
SlideEffectOptions |
SpinEffectOptions |
TurnEffectOptions |
ZoomEffectOptions
The effect's options.

Return Value

Returns a Promise

On fulfillment void When the effect is complete and the element's hidden property has been set to true.

Examples

Hide an element with no effect

JHcoIiNteUVsZW1lbnQiKS5oaWRlKCk7Cg==
$w("#myElement").hide();

Hide an element with the "fade" effect

JHcoIiNteUVsZW1lbnQiKS5oaWRlKCJmYWRlIik7Cg==
$w("#myElement").hide("fade");

Hide an element with an effect and log message when the effect is done

bGV0IGZhZGVPcHRpb25zID0gewogICJkdXJhdGlvbiI6ICAgMjAwMCwKICAiZGVsYXkiOiAgICAgIDEwMDAKfTsKCiR3KCIjbXlFbGVtZW50IikuaGlkZSgiZmFkZSIsIGZhZGVPcHRpb25zKTsK
let fadeOptions = {
  "duration":   2000,
  "delay":      1000
};

$w("#myElement").hide("fade", fadeOptions);

Hide an element with an effect and log message when the effect is done

JHcoIiNteUVsZW1lbnQiKS5oaWRlKCJmYWRlIikKICAudGhlbiggKCApID0+IHsKICAgIGNvbnNvbGUubG9nKCJEb25lIHdpdGggZmFkZSIpOwp9ICk7Cg==
$w("#myElement").hide("fade")
  .then( ( ) => {
    console.log("Done with fade");
} );

Toggle an element's hidden state

aWYoICR3KCIjbXlFbGVtZW50IikuaGlkZGVuICkgewogICR3KCIjbXlFbGVtZW50Iikuc2hvdygpOwp9CmVsc2UgewogICR3KCIjbXlFbGVtZW50IikuaGlkZSgpOwp9Cg==
if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

Mixed In From

$w.HiddenCollapsedMixin

See Also

show( ), hidden, collapse( )

onItemReady( )

onItemReady( )

Sets the function that runs when a new repeated item is created.

function onItemReady(handler: ItemReadyEventHandler): Repeater
callback ItemReadyEventHandler($w: Function, itemData: Object, index: Number): void

Description

Use the onItemReady() function for code you want to run before new repeated items are rendered.

The callback is triggered when you add new items by setting the data property. It is not triggered for existing items that are updated when you set the data property. To run code after updating existing items, use the forEachItem or forItems functions.

Usually, you use onItemReady() to:

  • Apply the repeated item's itemData to the properties and functions of the repeated elements contained in the repeated item being created.
  • Add event handlers to the repeated elements contained in the repeated item being created.

Parameters

handler function($w, itemData, index) The name of the function or the function expression to run when the item is ready.
$w $w A selector function with repeated item scope.
itemData Object The object from the repeater's data array that corresponds to the repeated item being created.
index Number The index of the itemData object in the data array.

Return Value

Repeater The element on which the event is now registered.

Examples

Set up new repeated items

JHcoIiNteVJlcGVhdGVyIikub25JdGVtUmVhZHkoICgkdywgaXRlbURhdGEsIGluZGV4KSA9PiB7CiAgbGV0IHJlcGVhdGVkRWxlbWVudCA9ICR3KCIjcmVwZWF0ZWRFbGVtZW50Iik7CiAgbGV0IG5vblJlcGVhdGVkRWxlbWVudCA9ICR3KCIjbm9uUmVwZWF0ZWRFbGVtZW50Iik7CiAgbGV0IGl0ZW1EYXRhVmFsdWUgPSBpdGVtRGF0YS5zb21lUHJvcGVydHk7CiAgbGV0IGlzRXZlbkl0ZW0gPSBpbmRleCAlIDIgPT0gMDsKfSk7Cg==
$w("#myRepeater").onItemReady( ($w, itemData, index) => {
  let repeatedElement = $w("#repeatedElement");
  let nonRepeatedElement = $w("#nonRepeatedElement");
  let itemDataValue = itemData.someProperty;
  let isEvenItem = index % 2 == 0;
});

Set up new repeated items

This example creates an event handler that sets up new repeated items by setting the source of a repeated image element and the text value of a repeated text element to values from the repeated item's data.

It also sets an event handler that runs when the image in a repeated item is clicked. The event handler changes the value of a repeated text element to indicate whether the repeated item is "selected". It also changes the value of a non-repeated text element which serves as a counter for how many repeated items are "selected".

JHcoIiNteVJlcGVhdGVyIikub25JdGVtUmVhZHkoICgkdywgaXRlbURhdGEsIGluZGV4KSA9PiB7CiAgY29uc3QgcmVwZWF0ZWRUZXh0ID0gJHcoIiNyZXBlYXRlZFRleHQiKTsKICBjb25zdCByZXBlYXRlZEltYWdlID0gJHcoIiNyZXBlYXRlZEltYWdlIik7CiAgY29uc3QgbnVtU2VsZWN0ZWQgPSAkdygiI25vblJlcGVhdGVkVGV4dCIpOwoKICByZXBlYXRlZEltYWdlLnNyYyA9IGl0ZW1EYXRhLmltZzsKICByZXBlYXRlZFRleHQudGV4dCA9IGl0ZW1EYXRhLmRlc2NyaXB0aW9uOwoKICByZXBlYXRlZEltYWdlLm9uQ2xpY2soIChldmVudCwgJHcpID0+IHsKICAgIGlmKHJlcGVhdGVkVGV4dC50ZXh0ID09PSAiU2VsZWN0ZWQiKXsKICAgICAgcmVwZWF0ZWRUZXh0LnRleHQgPSBpdGVtRGF0YS5kZXNjcmlwdGlvbjsKICAgICAgbnVtU2VsZWN0ZWQudGV4dCA9IChOdW1iZXIobnVtU2VsZWN0ZWQudGV4dCkgLSAxKS50b1N0cmluZygpOwogICAgfQogICAgZWxzZSB7CiAgICAgIHJlcGVhdGVkVGV4dC50ZXh0ID0gIlNlbGVjdGVkIjsKICAgICAgbnVtU2VsZWN0ZWQudGV4dCA9IChOdW1iZXIobnVtU2VsZWN0ZWQudGV4dCkgKyAxKS50b1N0cmluZygpOwogICAgfQogIH0gKTsKfSApOwo=
$w("#myRepeater").onItemReady( ($w, itemData, index) => {
  const repeatedText = $w("#repeatedText");
  const repeatedImage = $w("#repeatedImage");
  const numSelected = $w("#nonRepeatedText");

  repeatedImage.src = itemData.img;
  repeatedText.text = itemData.description;

  repeatedImage.onClick( (event, $w) => {
    if(repeatedText.text === "Selected"){
      repeatedText.text = itemData.description;
      numSelected.text = (Number(numSelected.text) - 1).toString();
    }
    else {
      repeatedText.text = "Selected";
      numSelected.text = (Number(numSelected.text) + 1).toString();
    }
  } );
} );
onItemRemoved( )

onItemRemoved( )

Sets the function that runs when a repeated item is removed.

function onItemRemoved(handler: ItemRemovedEventHandler): Repeater
callback ItemRemovedEventHandler(itemData: Object): void

Description

Use the onItemRemoved() function for code you want to run when repeated items are removed. The callback is triggered when you remove items by setting the value of the data property to an array in which some of the existing item IDs are no longer present.

Parameters

handler function(itemData) The name of the function or the function expression to run when the item is removed.
itemData Object The object from the repeater's data array that corresponds to the repeated item being removed.

Return Value

Repeater The element on which the event is now registered.

Examples

Get data from items being removed

JHcoIiNteVJlcGVhdGVyIikub25JdGVtUmVtb3ZlZCggKGl0ZW1EYXRhKSA9PiB7CiAgbGV0IGl0ZW1EYXRhVmFsdWUgPSBpdGVtRGF0YS5zb21lUHJvcGVydHk7Cn0pOwo=
$w("#myRepeater").onItemRemoved( (itemData) => {
  let itemDataValue = itemData.someProperty;
});
onMouseIn( )

onMouseIn( )

Adds an event handler that runs when the mouse pointer is moved onto the element.

function onMouseIn(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: Function): void

Parameters

handler function(event, $w) The name of the function or the function expression to run when the mouse pointer is moved onto the element.
event MouseEvent The mouse event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element to which the event handler was added.

Examples

Get the mouse event info when the mouse enters an element

JHcoIiNteUVsZW1lbnQiKS5vbk1vdXNlSW4oIChldmVudCwgJHcpID0+IHsKICBsZXQgY2xpZW50WCA9IGV2ZW50LmNsaWVudFg7ICAvLyAzNjIKICBsZXQgY2xpZW50WSA9IGV2ZW50LmNsaWVudFk7ICAvLyAyNDQKICBsZXQgb2Zmc2V0WCA9IGV2ZW50Lm9mZnNldFg7ICAvLyAxMAogIGxldCBvZmZzZXRZID0gZXZlbnQub2Zmc2V0WTsgIC8vIDEyCiAgbGV0IHBhZ2VYID0gZXZlbnQucGFnZVg7ICAgICAgLy8gMzYyCiAgbGV0IHBhZ2VZID0gZXZlbnQucGFnZVk7ICAgICAgLy8gMzc2CiAgbGV0IHNjcmVlblggPSBldmVudC5zY3JlZW5YOyAgLy8gMzg5NwogIGxldCBzY3JlZW5ZID0gZXZlbnQuc2NyZWVuWTsgIC8vIDM2Mgp9ICk7Cg==
$w("#myElement").onMouseIn( (event, $w) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

Mixed In From

$w.Element

onMouseOut( )

onMouseOut( )

Adds an event handler that runs when the mouse pointer is moved off of the element.

function onMouseOut(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: Function): void

Parameters

handler function(event, $w) The name of the function or the function expression to run when the mouse pointer is moved off of the element.
event MouseEvent The mouse event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element to which the event handler was added.

Examples

Get the mouse event info when the mouse exits an element

JHcoIiNteUVsZW1lbnQiKS5vbk1vdXNlT3V0KCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGNsaWVudFggPSBldmVudC5jbGllbnRYOyAgLy8gMzYyCiAgbGV0IGNsaWVudFkgPSBldmVudC5jbGllbnRZOyAgLy8gMjQ0CiAgbGV0IG9mZnNldFggPSBldmVudC5vZmZzZXRYOyAgLy8gMTAKICBsZXQgb2Zmc2V0WSA9IGV2ZW50Lm9mZnNldFk7ICAvLyAxMgogIGxldCBwYWdlWCA9IGV2ZW50LnBhZ2VYOyAgICAgIC8vIDM2MgogIGxldCBwYWdlWSA9IGV2ZW50LnBhZ2VZOyAgICAgIC8vIDM3NgogIGxldCBzY3JlZW5YID0gZXZlbnQuc2NyZWVuWDsgIC8vIDM4OTcKICBsZXQgc2NyZWVuWSA9IGV2ZW50LnNjcmVlblk7ICAvLyAzNjIKfSApOwo=
$w("#myElement").onMouseOut( (event, $w) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

Mixed In From

$w.Element

onViewportEnter( )

onViewportEnter( )

Adds an event handler that runs when an element is displayed in the viewable part of the current window.

function onViewportEnter(handler: EventHandler): Element
callback EventHandler(event: Event, $w: Function): void

Description

An element enters the viewport when the page is scrolled to show any part of the element. An element also enters the viewport if it was hidden or collapsed and is then shown or expanded in the viewable part of the current window.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element enters the viewport.
event Event The event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element on which the event is now registered.

Examples

Get the ID of the element that has entered the viewport

JHcoIiNteUVsZW1lbnQiKS5vblZpZXdwb3J0RW50ZXIoIChldmVudCwgJHcpID0+IHsKICBsZXQgdGFyZ2V0SWQgPSBldmVudC50YXJnZXQuaWQ7IC8vICJteUVsZW1lbnQiCn0pOwo=
$w("#myElement").onViewportEnter( (event, $w) => {
  let targetId = event.target.id; // "myElement"
});

Mixed In From

$w.Element

See Also

onViewportLeave( )

onViewportLeave( )

onViewportLeave( )

Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.

function onViewportLeave(handler: EventHandler): Element
callback EventHandler(event: Event, $w: Function): void

Description

An element leaves the viewport when the page is scrolled so that the elements is completely out of view. An element also leaves the viewport if it was shown or expanded and is then hidden or collapsed from the viewable part of the current window.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element leaves the viewport.
event Event The event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element on which the event is now registered.

Examples

Get the ID of the element that has entered the viewport

JHcoIiNteUVsZW1lbnQiKS5vblZpZXdwb3J0TGVhdmUoIChldmVudCwgJHcpID0+IHsKICBsZXQgdGFyZ2V0SWQgPSBldmVudC50YXJnZXQuaWQ7IC8vICJteUVsZW1lbnQiCn0pOwo=
$w("#myElement").onViewportLeave( (event, $w) => {
  let targetId = event.target.id; // "myElement"
});

Mixed In From

$w.Element

See Also

ViewportMixin-onViewportEnter( )

scrollTo( )

scrollTo( )

Scrolls the page to the element using an animation.

function scrollTo(): Promise<void>

Description

The scrollTo() function returns a Promise that is resolved when the animated scroll is complete and the element is now in view.

To scroll to a specific location on the page, see the wix-window scrollTo() function.

Calling the scrollTo() function on an element in a repeated item that is selected from the global scope causes an error.

Return Value

Returns a Promise

On fulfillment void When the scroll is complete.

Examples

Scroll the page to an element

JHcoIiNteUVsZW1lbnQiKS5zY3JvbGxUbygpOwo=
$w("#myElement").scrollTo();

Scroll the page to an element and log message when done

JHcoIiNteUVsZW1lbnQiKS5zY3JvbGxUbygpCiAgLnRoZW4oICggKSA9PiB7CiAgICBjb25zb2xlLmxvZygiRG9uZSB3aXRoIHNjcm9sbCIpOwp9ICk7Cg==
$w("#myElement").scrollTo()
  .then( ( ) => {
    console.log("Done with scroll");
} );

Mixed In From

$w.Element

show( )

show( )

Shows the element and sets its hidden property to false, using an effect if specified.

function show([effectName: Effect], [effectOptions: EffectOptions]): Promise<void>
type Effect = "arc" | "bounce" | "fade" | "flip"
| "float" | "fly" | "fold" | "glide" | "puff"
| "roll" | "slide" | "spin" | "turn" | "zoom"
type EffectOptions = ArcEffectOptions | BounceEffectOptions
| FadeEffectOptions | FlipEffectOptions | FloatEffectOptions
| FlyEffectOptions | FoldEffectOptions | GlideEffectOptions
| PuffEffectOptions | RollEffectOptions | SlideEffectOptions
| SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions

Description

The show() function shows the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to false.

You can optionally apply an effect when showing the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

Parameters

effectName (optional) String The name of the effect to play when showing the item.
effectOptions (optional) ArcEffectOptions |
BounceEffectOptions |
FadeEffectOptions |
FlipEffectOptions |
FloatEffectOptions |
FlyEffectOptions |
FoldEffectOptions |
GlideEffectOptions |
PuffEffectOptions |
RollEffectOptions |
SlideEffectOptions |
SpinEffectOptions |
TurnEffectOptions |
ZoomEffectOptions
The effect's options.

Return Value

Returns a Promise

On fulfillment void When the effect is complete and the element's hidden property has been set to false.

Examples

Show an element with no effect

JHcoIiNteUVsZW1lbnQiKS5zaG93KCk7Cg==
$w("#myElement").show();

Show an element with the "fade" effect

JHcoIiNteUVsZW1lbnQiKS5zaG93KCJmYWRlIik7Cg==
$w("#myElement").show("fade");

Show an element with the "fade" effect and custom options

bGV0IGZhZGVPcHRpb25zID0gewogICJkdXJhdGlvbiI6ICAgMjAwMCwKICAiZGVsYXkiOiAgICAgIDEwMDAKfTsKCiR3KCIjbXlFbGVtZW50Iikuc2hvdygiZmFkZSIsIGZhZGVPcHRpb25zKTsK
let fadeOptions = {
  "duration":   2000,
  "delay":      1000
};

$w("#myElement").show("fade", fadeOptions);

Show an element with an effect and log message when the effect is done

JHcoIiNteUVsZW1lbnQiKS5zaG93KCJmYWRlIikKICAudGhlbiggKCApID0+IHsKICAgIGNvbnNvbGUubG9nKCJEb25lIHdpdGggZmFkZSIpOwogIH0gKTsK
$w("#myElement").show("fade")
  .then( ( ) => {
    console.log("Done with fade");
  } );

Toggle an element's hidden state

aWYoICR3KCIjbXlFbGVtZW50IikuaGlkZGVuICkgewogICR3KCIjbXlFbGVtZW50Iikuc2hvdygpOwp9CmVsc2UgewogICR3KCIjbXlFbGVtZW50IikuaGlkZSgpOwp9Cg==
if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

Mixed In From

$w.HiddenCollapsedMixin

See Also

hide( ), hidden, expand( )