

How to Create a Content Block for the Object Content Integration

The content block is created using standard HTML. The object content data is inserted with Vue syntax. Read more about Vue here.

Required HTML-attributes:

• data-editor-query-name: The name of the query defined in the Lime Admin config.

• data-editor-contentblock-editor-type: Must be set to BizWizard.CMS.Editors.LimeCRM.

• data-editor-get-content-as-list: This determines if the data should be fetched as the first limeobject matching the lime-query filter or a list of all matching objects.

Example

The query for this contentblock looks like this:

  "queryname": "deals_query",
  "query": {
      "limetype": "deal",
      "responseFormat": {
          "object": {
              "_id": {
                  "_alias": "dealid"
              },
              "name": null,
              "value": null,
              "coworker":{
                  "_id": {
                      "_alias": "coworkerid"
                  },
                  "firstname": null,
                  "lastname": null
              },
              "company":{
                  "name": null
              }
              }
      },
      "filter": {
          "op": "=",
          "key": "coworker._id",
          "exp": "{0}"
      }
  }

And the HTML for the contentblock:

<table data-editor-contentblock align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td data-editor-contentblock-editor data-editor-contentblock-editor-type="BizWizard.CMS.Editors.LimeCRM" data-editor-query-name="deals_query" data-editor-get-content-as-list="true" data-editor-contentblock-editor-name="LimeCRM Content">
      <table align="center" border="0" cellspacing="0" cellpadding="0" width="100%">
        <tr>
          <td align="center">
            <table style="margin: 10px 40px;">
              <tr>
                <td v-for="m in objectContent" data-editor-contentblock-editor data-editor-contentblock-editor-name="Deal" data-editor-contentblock-editor-type="BizWizard.CMS.Editors.Text">
                  <table style="padding:10px; margin: 0px 5px; background-color:#FFFFFF">
                    <tr>
                      <td>
                        <table style="line-height:1.3em; padding-top:10px">
                          <tr>
                            <td ><span id="content-body"><strong style="color: #00b3a7">{{m.name}}</strong></span></td>
                          </tr>
                          <tr>
                            <td><span id="content-body">{{m.value}}</span></td>
                          </tr>
                          <tr>
                            <td>
                              <span id="content-body">{{m.coworker.firstame}} {{m.coworker.lastname}}</span>
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <span id="content-body">{{m.company.name}}</span>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

To insert the data you can use the Vue viewmodel objectContent. This will either be an object or a list of objects depending on the value of the data-editor-get-content-as-list attribute.

Use dot-notation on the viewmodel to access data from a single object result:

<span>{{objectContent.name}}</span>

Use vue syntax on the table data tag to loop through list results:

<td v-for="m in objectContent"></td>

Access data from iterated objects through dot-notation on the alias ('m'):

<span>{{m.name}}</span>

Remember that Vue can not have properties starting with '_'. Any underscores will be cleaned automatically from the object content model if you forget to create an alias in your lime-query.

To insert an image to your contentblock you will need to access the image through an url as a property on the limeobject. Then you use the Vue method v-bind:src to display the image:

<td align="center"><img v-bind:src="m.imageurl" alt="Image of coworker" width="150"></td>

Content Block Structure

A breakdown of the required structure, based on the example block above.

The Container

<table data-editor-contentblock align="center" border="0" cellspacing="0" cellpadding="0">
.
.
.

• data-editor-contentblock: Used to identify the table which contains the content block.

The Editable Data

<td data-editor-contentblock-editor data-editor-contentblock-editor-type="BizWizard.CMS.Editors.LimeCRM" data-editor-query-name="deals_query" data-editor-get-content-as-list="true" data-editor-contentblock-editor-name="LimeCRM Content">
    .
    .
    .
    <td v-for="m in objectContent" data-editor-contentblock-editor data-editor-contentblock-editor-name="Deal" data-editor-contentblock-editor-type="BizWizard.CMS.Editors.Text">

• data-editor-contentblock-editor: Identifies a section which should be editable in the right hand menu.

  The example above contains two instances of this attribute. The outermost, in combination with the data-editor-contentblock-editor-type="BizWizard.CMS.Editors.LimeCRM"attribute, adds the main editor in which you execute your search.

  The inner adds a text editor for each company-table created from the search results in order to enable editing of the individual table data blocks.

• data-editor-query-name: The name of the query defined in the Lime Admin config.

• data-editor-get-content-as-list: Determines if the result should be fetched as a list or as a single object.

• data-editor-contentblock-editor-name: Sets the name of the content block editor.