App initialization

Transcript

With our Adobe Developer console project for our content fragment console extension created, we can now use the AIO CLI to generate the app itself. So for this, let’s head over to the command line. So first, make sure that you have the AIO CLI installed. This is an MPM module, so we can check the version of our AIO CLI and we can see here that we do have it installed.

So from here we’re going to create our new app so we can simply execute AIO app in it. And this is going to take us through a small CLI based wizard that lets us associate this app with our Adobe Developer Console Project we just created. So the first step here is to select the Adobe org and since we created our project in our Adobe production tech marketing demos org we can select that.

This will now list all of the Adobe Developer Console Projects in the org. And as you can see, I actually have a lot of projects in here and this is why it’s really important to semantically name your project to make sure that you understand which project is actually associated with your extension. So we can see here this is the project that we created that we’ll be using for extension. So I’ll go ahead and make sure that’s highlighted and select that. Next, since this is an extension we’ll select all extension points. And since this is an extension for the AEM Content Fragment console we’re going to select this first option the AEM CF Admin UI EXD temple. And we can see here in the description that this is the extension point that we in fact want. So I’ll tap the space, it’ll select this, we can skip the others, hit enter and it’ll begin creating our project for us. Note that when executing the AIO app and IT command above if you have not been logged into Adobe developer console already, the CLI will open up a browser prompting you to log in to the appropriate Adobe org with your Adobe credentials. So if that flow does automatically pop up make sure you follow through with it. All right. Before extension app can be finalized we do have to provide some information to the template.

We can also select what type of extension this is if we’re going to be, if this will contain an action bar, a header menu, or a server side handler, which is an Adobe I/O runtime action.

So let’s select add custom button to action bar.

We can also specify if this button should open a modal. So let’s select yes here.

We can do the same for header menu if we want a header menu button in this extension as well. And we can even add an Adobe I/O run time action. Let’s add one of those as well. By default, this action is called generic but you can of course name it whatever you want. And when we’re finished, we can select I’m done.

Instead of using the ad options above and you select I don’t know the CLI wizard will give you an option to create a demo project or get some extra help. So typically the I don’t know is used for more novice developers that are exploring the extensions but if you’re creating a real extension you’d want to use the add options above.

And it looks like our app has just about finished initializing and so we’ll be able to start developing on the generated app.

And we can see here, that we have a number of auto-generated files and we can open this up on our favorite JavaScript editor and start developing our extension. -