Wappler Community as API

George · November 19, 2018, 12:22pm

While we are finalizing our previous WWC (Wappler Weekly Challenge) and @psweb is finalizing his great showcase as clear winner , we have another challenge for you

The Wappler Community itself can be used as a great API Data Source!
Just add .json to any link and you will get the JSON response back!

Make Best Wappler Docs UI

This is particularly useful when accessing the Wappler Docs category:

https://community.wappler.io/c/docs

You can get it as JSON:
https://community.wappler.io/c/docs.json

Also the search is fully available as API Service!

Just change the regular search from:

https://community.wappler.io/search?q=bootstrap%20%23docs

to

https://community.wappler.io/search.json?q=bootstrap%20%23docs

and you will get your results!

So who is up for the challenge and can make the Wappler Docs category most user friendly, searchable UI? @wappler_ambassadors

Let the challenge begin!

Deadline - November 27th!!

Hyperbytes · November 16, 2018, 10:17pm

GEORGE!!! How can you do this too me, Holiday in 4 days, deadlines before then and you set such an exciting and fabulous challenge.
Have you any idea how much it will hurt not to be able to do this one!!!

May have to submit an entry a week late anyway just because i want to do it
(wonders if wife will notice a laptop in suitcase )

George · November 16, 2018, 10:20pm

haha - sorry Brian - but it isn’t Christmas yet! So we have some time before our break

Well take the laptop indeed - Wappler on holiday = best mates

Hyperbytes · November 16, 2018, 10:24pm

Wappler on holiday = best mates = Divorce

Hyperbytes · November 16, 2018, 10:28pm

Got to love an API with a parameter called include_blurbs

drymetal · November 18, 2018, 10:29pm

When is deadline? This sounds fun.

George · November 19, 2018, 12:21pm

No problem - Deadline is 27 November - we couldn’t have @Hyperbytes’s holiday and marriage ruin

So go for it!

psweb · November 22, 2018, 10:21am

Trying to connect to the community.wappler.io API and I am getting the CORS Policy block?

Access to XMLHttpRequest at 'https://community.wappler.io/c/docs.json?' from origin 'https://www.learnwappler.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

EDIT: Forgot to mention I used no params to connect at all or Header params, was I meant to.

Hyperbytes · November 22, 2018, 11:12am

Have, you it the same problem I had with Google Api. I was hoping the imminent server connect version of api connect would resolve this.

psweb · November 22, 2018, 11:52am

Well I had the same CORS problem when connecting to one of the geoPlugin API’s but @geoplugin fixed that from his side, I assume Wappler will have to make an alteration on their end for this one too.
I have only really connected to the Maps API from Google and never had any issue with that though.

Hyperbytes · November 22, 2018, 1:39pm

I couldnt get google geolocation to work due to CORS issue.

George · November 23, 2018, 11:01am

We just enabled CORS for all domains - so everybody should be able to use the forum API here now.

Go for it @psweb, @Hyperbytes and @drymetal !

Hyperbytes · November 23, 2018, 11:40am

Would love to join in @George but I an being forced to lay on a beach in 26 degrees heat.

Teodor · November 23, 2018, 11:51am

Be careful, Brian, with that rain in the forecast for the next 10 days!

patrick · November 23, 2018, 3:37pm

The discourse API can be difficult, requires a lot of requests to get all required data. So I created a sample that shows how you can nest API sources inside a repeater.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>API Sample</title>
    <script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>
    <script type="text/javascript" src="dmxAppConnect/dmxFormatter/dmxFormatter.js"></script>
    <style>
      body {
        font-family: verdana;
        font-size: 12px;
        margin: 0;
        padding: 0;
      }
      
      ul {
        margin: 0;
        padding: 0;
        padding-left: 1em;
      }
      li {
        list-style: none;
      }
    </style>
  </head>
  <body is="dmx-app" id="app">
    <dmx-api-datasource id="api1" is="dmx-fetch" url="https://community.wappler.io/site.json"></dmx-api-datasource>
    <dmx-api-datasource id="api2" is="dmx-fetch" url="https://community.wappler.io/c/docs.json"></dmx-api-datasource>

    <dmx-api-datasource id="api4" is="dmx-fetch" dmx-bind:url="'https://community.wappler.io/t/' + showTopic.value + '/posts.json'"></dmx-api-datasource>

    <dmx-value id="showTopic" value="2790"></dmx-value>
    
    <div style="display: flex">
      <div style="flex: 1; padding: 10px; border-right: 1px solid #666;">
        <ul>
          <li dmx-repeat:repeat1="api1.data.categories.where(`parent_category_id`, 28, &quot;==&quot;)">
            <dmx-api-datasource id="api3" is="dmx-fetch" dmx-bind:url="'https://community.wappler.io/c/docs/' + id + '.json'"></dmx-api-datasource>
            {{name}}

            <ul>
              <li dmx-repeat:repeat2="api3.data.topic_list.topics"><a href="javascript:void(0)" dmx-on:click="showTopic.setValue(id)">{{title}}</a></li>
            </ul>
          </li>
          <li dmx-repeat:repeat3="api2.data.topic_list.topics"><a href="javascript:void(0)" dmx-on:click="showTopic.setValue(id)">{{title}}</a></li>
        </ul>
      </div>
      <div style="flex: 2; padding: 10px;" dmx-html="api4.data.post_stream.posts[0].cooked">
      </div>
    </div>
  </body>
</html>

psweb · November 23, 2018, 3:52pm

You not kidding @patrick, that discourse API was a nightmare, wish I had this when I was trying to figure the thing out, haha. Must have taken 4 hours to get the parts i wanted out of it.

Thank you for this, great help indeed.

drymetal · December 1, 2018, 9:39pm

Is there a way to make each item in the repeat have its own Id? Like the category repeat?

psweb · December 1, 2018, 9:44pm

You can use dmx-bind:id="‘yourid’+$index" which will increment the ID by 1 from the values in the repeat itself if that helps. Hope I understood what you meant.

drymetal · December 2, 2018, 3:38pm

Is there a way to get the dmx-bind on it without looking at the code or is that the only way?

Also, how do you suppose you collapse each section? See screenshot. In my mind, you could make each section have its own ID, and toggle based on that. Any thoughts @psweb

psweb · December 2, 2018, 3:49pm

To get what you have means that you must have a repeat region. Inside that you have another repeat so a nested repeat. You can add a variable that gets set on click and add it inside the first repeat which means that it will have as many variables as their are in the category repeat.
I started working on this challenge but unfortunately got too busy with normal work.
If you want to look at that in the meanwhile to look at the code see. https://www.learnwappler.com/playing.php

Sorry wrong link I fixed it. Open the file manager to see the listing like you might want.