Can sections of code be no-oped via action

Wappler General
1

I’m pretty sure I already know the answer is no but just in case I have to ask.

Is it possible to mark sections of code so they are either executed or remain inoperable via some dynamic action by the user?

Let me explain - based on a selection from a list or a selection of a button, a section (or sections) of the code is (are) dynamically inserted or removed from the active code on a page.

One way to think about this would be to have a way to mark a section(s) of code as comments if a certain user action was invoked (I’m only using comments as an example - since that is the affect I’m talking about) . Or the opposite would be possible. Lines of code that were marked as non-executable could then become active lines within the code.

This seem like it would be very powerful - kind of like “if, then - else” statements are handled in normal code?

2

What would be a use case for this? Like a real world example.

3

It would give you the power to do some of the things you could only do if you wanted to write a ton of javascript but w/o all the complexity of code.

Anytime you want a section of the screen to show or behave differently is an opportunity for something like this to pay dividends.

Don’t get me wrong - I’m sure there are ways to have the same things happen w/o out it - but I think it would be a lot harder.

I think one example would be a site that displays real estate - maybe based on your location you want to show houses on the market that are in the price range of the neighborhoods in a 2 mile radius - as the user moves the displayed info changes.

That might not be a great example but it is one…

4

App Connect already has conditions, so the code you place inside your condition will not run until the condition is met.
As an example I have a page with 10 images on it, all images have a src attribute of either
image-name-xl.jpg, image-name-lg.jpg, image-name-md.jpg, image-name-sm.jpg, and image-name-xs.jpg

If I loaded this page without using the condition it would load 50 images in one go and only display the 10 i want to show at that size, however that would be a waste of bandwidth, time, and resource, and more importantly for me make the page really slow. I load the images into a condition based on the viewport width rather, so only 10 images load and 10 images display, if i change my browser window width then the src attributes change too.

With your real estate example this is already possible with Wappler and their Google Map solution together with the GeoLocation component it can track you in real time moving around and can already change the page content or the markers based upon an X mile radius. I could add a condition that has code that would only run when the user was at latatude x and longatude y if i wanted, it would be alot of conditions and a massive database but i suppose this would be something like how pokymon go would have worked.

I hope this clarifies things a little, but basically there is no need to comment out code as an App Connect condition is basically the same thing, I could have 1000 lines of code in the condition that does not load in the browser at all until the condition is met.

5

Thanks I’m still learning Wappler so your information really helps - I’m going to mess around with conditions tomorrow and see if I can start to understand it better!

6

No problem, happy to help, while playing around here is one situation i use conditions in.

<body is="dmx-app">
    <div is="dmx-browser" id="browser1"></div>
    
    <dmx-value id="var_pic_size" dmx-bind:value="(browser1.viewport.width <= 575).then('xs') || (browser1.viewport.width.inRange(576, 767)).then('sm') || (browser1.viewport.width.inRange(768, 991)).then('md') || (browser1.viewport.width.inRange(992, 1199)).then('lg') || (browser1.viewport.width >= 1200).then('xl')"></dmx-value>
    
    <div id="conditional_check_loaded" is="dmx-if" dmx-bind:condition="var_pic_size.value">
      <div class="d-flex flex-column">
        <div class="container order-4">
          <div class="row">
            <div class="col-12">
              <dmx-value id="var_width_itinerary_preview_images" dmx-bind:value="var_pic_size.value.replace('xs',543).replace('sm',238).replace('md',328).replace('lg',288).replace('xl',253)"></dmx-value>
              <dmx-value id="var_height_itinerary_preview_images" dmx-bind:value="var_pic_size.value.replace('xs',407).replace('sm',178).replace('md',245).replace('lg',216).replace('xl',189)"></dmx-value>
              <div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
                <a href="/south-african-travel-itinerary-packages/cape-town-and-the-garden-route-travel-itinerary/" title="Cape Town, Garden Route and Safari Travel Itinerary Package">
                  <div>
                    <img class="card-img img-fluid" dmx-bind:src="africa-and-indian-ocean-holiday-destination-images/africa-collection-itinerary-previews/cape-town-garden-route-and-safari-itinerary-preview-{{var_pic_size.value}}.jpg" dmx-bind:width="var_width_itinerary_preview_images.value" dmx-bind:height="var_height_itinerary_preview_images.value">
                    <div class="card-img-overlay row align-items-start px-3 py-0">
                      <div class="col"><h5 class="card-title btn btn-primary p-2">SELF DRIVE HOLIDAY</h5> . </div>
                    </div>
                    <div class="card-img-overlay row align-items-end px-3 py-0">
                      <div class="col"><p class="btn-block btn-primary card-text p-2">CAPE TOWN, GARDEN ROUTE &amp; SAFARI</p></div>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>
  1. The var_pic_size variable will be set to either xs | sm | md | lg | xl depending on the users browser viewport width
  2. The var_width_itinerary_preview_images variable will check if var_pic_size is set to lets say md and replace md with 328
  3. The var_height_itinerary_preview_images variable will also check if var_pic_size is set to lets say md and replace md with 245

So now I have 3 variables set that all have a value assigned from the viewport width, so i can load my image with them
My image src attribute will look like src=“folder/image-md.jpg” width=“328” height=“245”
So it will never load the other 4 versions of that image which would be image-xs.jpg | image-sm.jpg | image-lg.jpg | image-xl.jpg

It is quite powerful so just fiddle around and see what you can do.

1 Like
7

Been trying to work that one out for ages, please do tell me how. I assume you are not just simply talking about changing zoom level to limit view rather than actual filter the maskers on a radius

8

Well it depends which one you want to do, I have already done the
Change Page Content based upon location, but that is not to a 2 mile radius, that is more like if the user is in Spain then change currency symbol as well as base price to target country price, and i can also alter what content is on the page on the same basis. In my case it was quite simple i just needed to hide certain parts of the page unless the user was in the UK. For this i user an IP Location service API and tied it in with App Connect.

I have not done this one as yet, but after watching every dmxzone google maps, directions, and geolocation video the other day I would assume this is very possible.
The change map markers based upon location I would start by using the Geo Location in App Connect and turn on the tracking option, maybe even the high accuracy if you want to use the device gps if the person is on a phone or tablet possibly, then if you combine the Google Maps and maybe even the google directions using origin and destination.

Maybe give me an example of what you are trying to get to in your project and i will try give a more detailed answer though.

9

I already have a formula to calculate the distance between 2 points but i have to embed it into a page as php.
Using property as an example, i want to be able to find all properties within a specific radius from a fixed point so i can map them or list them. The properties are pre-geocoded with lat/ lang coordinates
At the moment i use a complex sql query to insert results into a user table then read them back via server connect but i would obviously prefer a fully wappler solution.

10

I think I would need to test this out on my side to be honest, what could you possibly share with me that i could use for my testing.
Feel free to PM me some stuff so i can try it on my side.

11

Don’t worry mate, you have enough to do. I have looked into this extensively and some time ago asked about the query and it was agreed it is too complex for wappler at this stage (haversign formula if you want to look it up) . I Just thought you may have spotted something within the geocoder or maps that I had missed.

12

I tell you what I can do for you, I have been saving a tip and tricks idea I got working that I think might very well help you with this particular issue. I will start working on posting that and I am sure with a little messing around you will be able to use the concepts to make something like this work

13

Not adding anything here, but didn’t they say they are going to add the ability to create custom functions in the future?

14

Yes, custom functions or custom queries would simplify this but i am not too concerned as i have a working fix, just though Paul had spotted something i had missed

1 Like
15

I have posted my little tip, hope it might help with what you might need to do.

1 Like
16

reading it now thanks Paul