Hello everyone - I've made my own search box and I'm sharing the code here.

Features:
Searches your blog title and subtitles for the user inputted keywords. If it matches the title, return it. If it matches the sub title (meta description) of the blog post, label it with a special indicatory, like "(related)".

Automatically opens a new tab towards that blog post when selected.

Demo:
https://www.visigo.fr/blogsearch.html

Three steps:

Step 1 (Setup):

a) Add a simple "Searchable List" component to your page.

b) Give that Searchable List component an identifier (I recommend "blog-search" - you will have less settings to change later)

c) Add a "jQuery Source Code" object to your page.

d) Add some blog posts if you don't have any:)

Step 2:
Open the jQuery Source Code, replace EVERYTHING by pasting this code.
You MUST modify the first two parameters or else it will not work. You must also modify the BLOG_SEARCH_SELECTOR and BLOG_SEARCH_LANGUAGE to reflect your actual use case.

Step 3:
Save your page, load it up and try it out!

If you want to change the action taken after the user selects an option, modify line ~48 "window.open(data.url)" and change it to whatever you'd like.

Additional info:

• This does not allow you to search categories or tags. This could theoretically be implemented, but I'd need your help to understand the best use cases.

• Accented characters:
  I've decided to disregard accented characters when making the comparison. This is to allow people to choose how they search for topics, especially if they are searching in a language that is not the default one on their keyboard. The details of how this is processed is in the removeDiacritics function.

• FYI, AppDrag's blog API returns the results in this format, which you can access using the data variable returned after user selection:

{
            "id": "9", // Integer of the blog post ID number
            "appID": "your-app-id",
            "title": "The Title of your Blog Post",
            "subTitle": "The meta description of your Blog Post",
            "imageUrl": "uploads/url-of-your-blog-photo",
            "tags": "blog-post-tags",
            "category": "[\"4\",\"5\"]", // Blog post categories as JSON stringified array
            "author": "John Doe",
            "nbReads": "152",
            "previewID": "b2b6bxd2-exxe-480c-abf4-a2908s2b4829", // GUID of blog preview ID
            "totalRead": "152",
            "isPublished": "True",
            "PublishDate": "2020-10-20 09:34:05",
            "formattedDate": "20 octobre, 2020",
            "lastUpdate": "2020-08-31 13:56:39"
        }

Hi Dick,

(Disclaimer, I'm not an AppDrag representative, just a user and fan, but my opinions are my own)

The AppDrag Whitepaper has some good information about their own security.

But, part of the AppDrag's power in allowing you to design and build your own 'back-end' to a site is giving you the flexibility how much (or how little) security you need.

In this sense, it's almost as if you are renting a storefront in a mall. The mall (AppDrag) mops the floors, maintains the public restrooms, manages the parking lot, etc.

But you have to decide what kind of door and what kind of locks you put on or in your store.

AppDrag prevents 'unauthorized' access in the default state. Meaning, nobody can change your website or access your data directly.

However, as soon as you start using their tools to build other ways of accessing the data, the responsibility for security falls under your scope.

For example, if you build an API function to access confidential or private data, you should also build-in tests or checks to ensure that the API caller is authorized to access that information.

This is obviously part of a much larger conversation about application security in general, but I wanted to get the ball started by defining and distinguishing the 'scopes' of your responsibility vs. AppDrag's.

Hi Julien,

By using Chrome inspector / dev tools, it looks like your page is loading the same script from heyoliver 14 times! And each time it is taking between 2-6 seconds.

See screenshots here:

Hi Evan,

I'm not with the @App-Drag team, nor am I a Laravel expert... but a quick check shows that Laravel is a PHP framework. AppDrag is a platform that hosts static HTML/JS/CSS files (+their API and DB backend, of course), but they do not support PHP.

So, the short answer is no, I do not believe AppDrag would be compatible with an existing Laravel project, unfortunately.

@Wassim said in Sending html mail from API:

https://stackoverflow.com/questions/41412512/node-js-promise-request-return

@Dick-Honing I've used the package 'request-promise-native' which allows you to await a request.

I recommend checking it out, it's been working great for me:
https://www.npmjs.com/package/request-promise-native

Hello all,

My team asked me to figure out how to alternate the layout of the blog posts, so the image would go between being on the right, then the left.... and I wanted to share the code!

Before:

After:

Steps:

1. On the Blog Listing page, add a "CSS Source Code embedded object" above or below the Blog Listing element.
   
2. Copy/Paste the following into the CSS Source Code you just added (double click to open):

Code:
NOTE: This assumes you don't have any existing padding or margins set on your images or text div's.

    .appdrag-blog-listing .row {
        flex-flow: row;
    }
    
    .appdrag-blog-listing .row:first-child {
        /* Keeps the margin consistent between text and image */
        margin-right: 80px;
    }
    
    .blog-article-container:first-child .blog-article .row {
        /* Needed because the clearfix div messes with the :nth-child count */
        flex-flow: row-reverse;
    }
    
    .blog-article-container:not(.clearfix):nth-child(even) .blog-article .row {
        /* reverse even-numbered blog posts */
        flex-flow: row-reverse;
    }

Hello Thomas!

These are SQL parameters.

AI: Auto Increments the field on each new insertion
PK: Primary Key - this is the field that will be used when doing joins (like linked fields)
UQ: Unique - the SQL operation will fail it would cause two rows to have the same value in this column. This is best used for things like social security numbers, customer id numbers, and other things that are VERY IMPORTANT never to have conflict or duplicated.

Hope this helps!

@Wassim-Samad or @Joseph-Benguira, it'd be really nice to have these as tooltips.

In case you haven't found this out yourself yet, you can access it from within a CloudBackend function using:

event["HEADERS"]["CloudFront-Viewer-Country"]

Hope this helps!

@Wassim said in Is the AppDrag function name (or URL?) available from within an API Function?:

Seems a very good and practical way to do it. You can also manually define it in your API functions while setting sentry up no?

Yes, I could, but I'm looking for reusable / template code I can copy/paste very quickly between functions and/or use in my template library... so I don't want to think about it each time, just want it to work every time

For reference, here's my final code to get the function name both during testing "Try" in CloudBackend and also when the function is called 'normally':

module.exports.getFunctionInfo = (event, context) => {
    let fInfo = {};

    // Try to extrapolate function info
// sometimes the from-url is not available, so wrapping this in a try/catch block
    try {
        const httpMethods = ["GET", "POST", "PUT", "DELETE", "PATCH"];
        var functionHandle = event.HEADERS['from-url'].split('/').slice(-1)[0]; // Get from URL if it's been called from the web
        for (let method of httpMethods) { // Get from parameters if it's been called from "Try" method, because above method will not work. Could also ignore errors if running from Try Now as they are likely development errors....
            if (event[method] && event[method].APPDRAG_FUNCTION_NAME != null) functionHandle = event[method].APPDRAG_FUNCTION_NAME;
        }
        fInfo.functionHandle = functionHandle;
    } catch (e) {
        fInfo.functionHandle = "";
    }

    fInfo.functionVersion = context.functionVersion;
    fInfo.functionName = context.functionName;
    return fInfo;
};

Can we have more information (ideally, baked into the UI about the response types for Cloud Backend functions?

Hi @Wassim, while we were waiting for the fix, I switched one of the fields back to linked 'field' (singular), but unfortunately, now that column is blank in CloudDB (but not in CB).

The data in each field is just an integer, no brackets, etc., and it shows up correctly in CloudBackend.

Thanks Wassim ! I will check it out and hopefully I can make everything work now for my scripts

Hi Olivier,

If you share the link to the page I'll be able to better investigate.

My first instinct is to add padding/margin to the search box, or revisit its position in the page - something is forcing it to be that small.

Thanks for trying it out!

@Pablo-Garcia

I'm confused by the word VALUE in your query. I am pretty sure that is causing the issue.

If you're coming from a different SQL platform, you should be aware that CloubBackend uses MySQL 5.8 via AWS Aurora, so your queries have to adhere to that syntax.

I think if you simply removed "VALUE" from most of your queries above things might start working

Hi Pablo, I'm not sure what you mean. Are you trying to find rows where a certain column is empty?

I usually use:

SELECT * FROM Table WHERE Column IS NULL OR = ""

Perhaps related to the other dropdown issue

It seems Cloud Backend's UI and CloudUI treat the multi-select fields differently.

CloudBackend escapes the integer Primary Keys, but the CloudDB UI does not. I ended up with something like this if you use both on a single row:

Also, because the dataType in SQL is medium text, not JSON, it's very difficult to parse.

Can you please make it consistent (integers alone, without quotes, is preferred but any consistency is better than this) and also can you tell us if it's possible to add a JSON data field type? Aurora SQL supports MySQL 5.7+ now including JSON field types

Hi @Joseph-Benguira and @Wassim-Samad thank you very much.

Can you please update the prettier/magic wand function to support the new Syntax ? It broke my code when I tried to use it

Thanks!

While you're at it, I have a second (perhaps related) bug:

When using the "Linked fields by reference" column type, no data shows up ?

Hello,

When creating a table with "Dropdown Multi" type selected, it works fine in the regular CB table view, but in CloudDB I can't input anything. Is this a bug?

https://prod.appdrag.com/Database/database.html?shared=b3a2521d-686a-4eac-96de-1ade6cfab274

my current best solution:

$("[blog-component=blog-title] span:last-child").each((id, el) => {
            $(el).html(el.innerHTML.replace(":", ":<br>"))
        })