Add a second entry point

Step 1 a

Suggest Edits

A plug-in can have several entry points, allowing the plug-in developer to offer different views for specific audiences. A page admin can select which entry point to display in the the widget he is configuring.

Update the manifest

Let's add another entry point and see how it behaves.

📋
Manifest with two entry points
Open Recipe

Our new manifest could look similar to this: 

{
  "manifestVersion": "2.0.0",
  "pluginVersion": "0.1.0",
  "name": {
    "en": "Demo Plugin - Step 1a",
    "de": "Demo Plugin - Step 1a"
  },
  "description": {
    "en": "A simple demo plug-in",
    "de": "Ein einfaches Beispiel-Plug-in"
  },
  "entryPoints": [
    {
      "id": "510e9e0c-e3b8-44a8-8db1-5185d3d844ce",
      "name": {
        "en": "View 1",
        "de": "Ansicht 1"
      },
      "description": {
        "en": "Displaying view 1",
        "de": "Ansicht 1 wird angezeigt"
      },
      "url": "/ep1.html"
    },
    {
      "id": "4f434887-9289-48ac-986d-4ff1f37ab618",
      "name": {
        "en": "View 2",
        "de": "Ansicht 2"
      },
      "description": {
        "en": "Displaying view 2",
        "de": "Ansicht 2 wird angezeigt"
      },
      "url": "/ep2.html"
    }
  ]
}

📘

Updating a plug-in

Please be aware that at current Haiilo Home versions (v33.0) it is not yet possible to update a plug-in in the administration area.
You will have to add your updated plug-in as a new plug-in.

Create the new entry point's content

Now we need to serve those new referred html files, of course.
They are plain html again, with some styling so you can differentiate between them.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Haiilo Home Demo Plug-in</title>
    <meta content="A simple demo plug-in" name="description">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Sans Pro">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<html>
<body class="bright">
<h1>Hello Haiilo Home - Entry Point 1</h1>
<p>Welcome to our first static plug-in :)</p>
<p>This is View 1.</p>
</body>
</html>

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Haiilo Home Demo Plug-in</title>
    <meta content="A simple demo plug-in" name="description">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Sans Pro">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<html>
<body class="shady">
<h1>Hello Haiilo Home - Entry Point 2</h1>
<p>Welcome to our first static plug-in :)</p>
<p>This is View 2.</p>
</body>
</html>

body {
    font-family: 'Source Sans Pro' ;
}

.bright {
    background-color: #AFD62D;
}

.shady {
    background-color: #B366FF;
}

If you are sticking to the demo project's structure, just put them in your /public folder.

👍

Demo project

The result of this step can be seen at branch 1-static of our demo project

Updated almost 2 years ago