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?

my current best solution:

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

Sadly, this is even worse, it is now displayed in the title!

Any suggestions very welcome...

@Academy-for-Certification-Training-Ltd I posted too quickly, didn't even think about that!

@Joseph-Benguira How do you feel about creating a "Tutorials and Tips" category?

@Academy-for-Certification-Training-Ltd Updated my tutorial with the missing steps

Bump

Hello all,

We're having trouble with titles that we want to have line breaks, like this:

We managed to put a <br> in the title text itself, and it works to create the line break... but now the title of the window shows the <br> in it.

URL for reference:
https://www.goodvibes.news/preview/blog/9-Soft-skills---de-quoi-on-parle-vraiment--.html?t=3

What is a good way to do this?

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;
    }

Hi Christopher,

It depends on how your form is configured to send the email, but you could perhaps look into including a "reply-to" address.

This allows you to instruct your client's email program to reply to a different address than the address (yours) that sent the email.

A second option might be to alter your email template that you email to the client including a big "REPLY TO CUSTOMER" button that includes a mailto:client@clientemail.com link. This will open a new email window with a blank email pre-addressed to the client.

Hope this helps!

Hi Linda,

Have you tried searching from Code Editor? It has to be in there somewhere!