Access CMS Data from JavaScript

This is a demonstration of how to easily define and access data sources from your Collection List data.

Doing so makes it available to your JavaScript custom code, where you can do anything you like with it.

Watch the Tutorial Video
collaboration illustration
Modal
×

Webflow

Webflow is a web design and development platform that allows users to design, build, and launch responsive websites visually, without writing any code.
Button Text

‍

This is some text inside of a div block.
This is some text inside of a div block.
123 Example Street, London UK
Modal
×

Figma

Figma is a web-based user interface (UI) and user experience (UX) design tool that allows for collaborative design, prototyping, and feedback gathering.
Button Text

‍

This is some text inside of a div block.
This is some text inside of a div block.
123 Example Street, London UK

Our Properties

This demo uses SA5's Data & Data-Binding capabilities to convert the collection list to a data source, which we then calculate the SUM of.
‍
Our total portfolio value is -.
12792

Eveniet Consequatur Ex Hic

Corporis voluptas quo sapiente sapiente recusandae. Quaerat doloremque itaque. Natus tenetur totam deserunt sit sunt. Et qui labore vitae provident nihil. Et expedita illum sed asperiores et. Non ipsum ea qui aspernatur ullam
Listing Details
90066

Eligendi Et Rerum

Voluptatem vel sed ea nihil et deserunt placeat. Quod est delectus cumque sint ipsum. Voluptatem voluptate exercitationem odit. Illum et cumque odio sint corrupti nesciunt optio voluptatem amet. Temporibus non dolor unde repellat cumque est incidu
Listing Details
84585

Optio

Praesentium fugit pariatur quia in autem temporibus perspiciatis laboriosam enim. Voluptas vel non tempora. Praesentium eos doloremque natus vel accusamus rerum et quia. Aliquam enim fugit repudian
Listing Details
3210

Debitis Officiis Quia

Perferendis fugit eos vel laudantium. Tempora nostrum quis veniam tempore totam esse quos non dolores. A ab omnis nisi eveniet cupiditate quas omnis in. Nam aut voluptatem laudantium incidunt quod quasi commodi. Consectetur beatae nesciunt sit voluptas vel laudantium f
Listing Details
42595

Sapiente Qui

Nam non voluptatem aperiam velit magnam facere. Nam ipsam qui sit. Nulla facilis recusandae omnis ut dolorem debitis doloribus. Vel
Listing Details

Codepen Code

This is the custom code used to perform the calulations with the data.

See the Pen DEMO | SA5 Data by Michael Wells (@memetican) on CodePen.