DanielStage at sirajahmed358@gmail.com
DanielStage at davisdeangelo76@icloud.com
DanielStage at choypogi@icloud.com
Friend at
DanielStage at phumlamtebele58@gmail.com
Dynamic List Examples
Attributes of a record
sirajahmed358@gmail.comdavisdeangelo76@icloud.comchoypogi@icloud.comphumlamtebele58@gmail.comjimenezbelinda64@hnail.commafelopezadierna@gmail.com1982dlpb@gmail.comfenira@web.debundy033@gmail.com
[Block//State]

This  html...

<button class="button">Tag 1 šŸŒˆ</button>
<button class="button">Tag 2 ā˜€ļø</button>
<button class="button">Tag 3 šŸš€</button>

would become..
<DynamicList source=ā€œBlock//Attributesā€ sortorder=ā€œAscendingā€ numRecords="3">
<button class="button">[Attribute Rich Text]</button>
</DynamicList>

Related Pages Sidebar Nav
This is link 1

This is link 2

This is link 3

This is link 4

This  html...

<a class="label" href="http://www.google.com">This is link 1</a><p>
<a class="label" href="http://www.google.com">This is link 2</a><p>
<a class="label" href="http://www.google.com">This is link 3</a><p>
<a class="label" href="http://www.google.com">This is link 4</a>

would become..
<DynamicList source=ā€œPage//Related Pagesā€>
<a class="label" href="[URL]">[Page Name]</a><p>
</DynamicList>

Gallery

You can create this using Dynamic List tags by changing this in the js on this page....

const images = ['pic1.jpg', `pic2.jpg`, `pic3.jpg`, `pic4.jpg`, `pic5.jpg`];

to something like this... 

const images = [<DynamicList source=ā€œImagesā€ sortBy="Date Added" sortOrder=ā€œDescendingā€ numRecords="5">'[Image ##link]',
</DynamicList>
];

Slideshow
Caption Text
Caption Two
Caption Three

For the slideshow, this HTML...

<div class="mySlides fade">
    <img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <img src="https://sourcesinc.ca/wp-content/uploads/2021/08/trees.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <img src="https://www.sciencenewsforstudents.org/wp-content/uploads/2020/04/1030_LL_trees-1028x579.png" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

Will become...


<DynamicList source=ā€œPage//Imagesā€ sortorder=ā€œAscendingā€ numRecords="5">
 <div class="mySlides fade">
    <img src="[Image ##link}" style="width:100%">
    <div class="text">[Caption]</div>
  </div>
</DynamicList>

Sidebar items grid
This is an interesting one.

This HTML....
<ul class="listing">
  <li>
    <div class="body">
      <h2>Item One</h2>
      <p>The content of this listing item goes here.</p>
    </div>
    <div class="cta">
      <a href="">Call to action!</a>
    </div>
  </li>
  <li>
    <div class="body">
    <h2>Item Two</h2>
      <p>The content of this listing item goes here.</p>
    </div>
    <div class="cta">
      <a href="">Call to action!</a>
    </div>
  </li>
  <li class="wide">
Becomes...
<ul class="listing">
  <DynamicLIst source="[Page//Subitems] numRecords="5"><li>
    <div class="body">
      <h2>[Item Name]</h2>
      <p>[Item Content]</p>
    </div>
    <div class="cta">
      <a href="">[Item CTA]</a>
    </div>
  </li>
</DynamicList>
,,/ul>

  • Item One

    The content of this listing item goes here.

    Call to action!

  • Item Two

    The content of this listing item goes here.

    Call to action!

  • Item Three

    The content of this listing item goes here.

    This one has more text than the other items.

    Quite a lot more

    Perhaps we could do something different with it?

    Call to action!

  • Item Four

    The content of this listing item goes here.

    Call to action!

  • Item Five

    The content of this listing item goes here.

    Call to action!

Resources

Here are some important additional resources.

Downloads

Here's something you can download.

Pricing

It's expensive, but you're worth it.

Dynamic tabbed content
More complex! This takes 3 dynamic lists, and uses the startOn parameter.

Here we have tabbed content, which will have HTML that looks like this now... 
<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'Resources')" id="defaultOpen">Resources</button>
  <button class="tablinks" onclick="openTab(event, 'Downloads')">Downloads</button>
  <button class="tablinks" onclick="openTab(event, 'Pricing')">Pricing</button>
</div>

<div id="Resources" class="tabcontent">
  <h3>Resources</h3>
  <p>Here are some important additional resources.</p>
</div>

<div id="Downloads" class="tabcontent">
  <h3>Downloads</h3>
  <p>Here's something you can download.</p>
</div>
This will become....

<div class="tab">

/*First dynamic list for just 1 items, which is the one open by default on page load */
  <DynamicList source="Tabbed Content" numRecords="1" sortBy="Date Added" sortOrder="Ascending">
<button class="tablinks" onclick="openTab(event, '[Tab Name]')" id="defaultOpen">[Tab Name]</button>
</DynamicList>

/*The rest of the tabs, starting on 2... */

  <DynamicList source="Tabbed Content" sortBy="Date Added" sortOrder="Ascending" startOn="2">
<button class="tablinks" onclick="openTab(event, '[Tab Name]')" >[Tab Name]</button>
</DynamicList>

/*Now the rest of the HTML for each tab */

<DynamicList source="Tabbed Content" sortBy="Date Added" sortOrder="Ascending" startOn="2">
<div id="[Tab Name]" class="tabcontent">
  <h3>[Tab Name]</h3>
  <p>[Tab Content]</p>
</div>
</DynamicList>

[bot_catcher]