Overview

Apptex Designer is a SharePoint App that acts as a framework to facilitate the process of styling your SharePoint pages with minimal effort. It uses Client Side Rendering - known as CSR - which is introduced in SharePoint 2013 to hook your SharePoint list views to their design. So no more custom solutions that take a lot of time! No new mechanism for applying styles and design, just SharePoint out of the box functionality provided by Apptex!

Beta

Beta version 0.1 is the initial release of Apptex, and It contains minimal features as we want to get feedback from the community so more features will be added soon, and existing features will be enhanced in upcoming releases. Feel free to contact us on our Codeplex page and provide us with your comments, issues, suggestions for desired features.

How to use Apptex templates with SharePoint list views?

Once you open Apptex, you will need to click proceed, so Apptex will create a library inside your host site and copy some files to it, when the copy is finished you will find a list of templates on the left hand side of the App as can be seen in the image below.

left menu (templates)

This is a list of templates you can choose from to style your views categorized by the type of templates. Once you choose a template, you will have more info about the template such as how it would look like, the list's required schema, the usage of the template and other info as well.

After getting to know the App, you can click Apply to start applying your desired template to your list view. Below is a description of the sections available in the Apply tab.


Select page

In this section, you can select the page you wish to style, and you have different ways of doing so (more ways will be available in upcoming releases).

The first way is to go to Apptex directly, and select the template you want to apply to your page, once you open the template, and you go to the Apply tab; the first option will be to select the page that contains the list view you need to style, as shown in the figure below:

featured screenshot

Here, you can either

  • Paste the url of your page or list view, if you need to style the view inside the list itself, you won't find the AllItems.aspx by using the "select an asset" dialog, so you can paste the link to the list view directly in the text box, for example, if your list url is: http://<<servername>>/sites/yoursite/lists/mylist/allitems.aspx then you can paste the portion: lists/mylist/allitems.aspx. This method works both for lists and pages.
  • You can also use the ellipses (...) to select your pages and you will see a pop up window that enables you to select which page you need from the host site in a dialog called: Select an Asset (Same as the out of the box SharePoint dialogs), as shown below:

    featured screenshot

    Important Note:

    If you want to style a page inside a subsite, you need to deploy Apptex to that subsite, and open Apptex from within that subsite. Don't use the select an asset dialog from the host site to style a page in a subsite



The second way to select the page is to go to the pages library itself, and from the Call Out Menu for the page, you will find the option to go to Apptex App, as shown below:

featured screenshot

Once you click Apptex, you will be redirected to the Apply tab with your page selected by default, then you can choose which list view you need to style.


Select list view

The second option in the Apply tab is the View option, here you will have a list of all the list views available on the page, so you can select the desired list view you wish to style!

featured screenshot


Field Mappings

The Field Mappings section in the Apply tab is dedicated to map fields you have in the list with template fields used by the template. You can have multiple lists with different column names in each one, but you may want to apply the same template to all these lists, so in the fields mappings section you can map each list field to the template field used in the template. Keep reading till the end to know how the Apply section works for each list.

featured screenshot


Variables section

The Variables section in Apply tab is dedicated to set settings for the current template for that target view selected earlier. This section will depend on the type of template you're choosing as each template will have its own variables. For example, Slider Templates may have "Speed" and "Interval" variables, but Map Templates will have "centerLatitude" and "centerlongitude" plus some other variables.

featured screenshot


Clicking Apply!

Now after you chose the page along with the view you want to style, mapped your fields, and set some variables values for the template, you will click on Apply. All these settings will be applied only for the selected view, it won't affect any other views or pages. That's how you can change field mappings from one view to another and use the same template for multiple views.

Important Note:

If you wish to make some changes on the template itself and have them reflected on all views, then the Customization tab is your friend!

Customization

Customizations will affect all upcoming views, so you don't need to worry about the views that you've already styled. For any upcoming view that you want to style, Customization will affect them all, that's why once you open Customization page, you will be prompted to confirm if you really want to do this or not!

Customization page

To customize a template, Open the settings menu from the top right side of Apptex as shown below:

featured screenshot

Then click "Templates Customization", you will be redirected to a page that looks the same as the page for applying templates to views, except this page will allow you to select the template you wish to customize. Once you click on a template, you will be asked to confirm if you are sure that you want to continue with customization or not. Remember that customizing a template only affects the upcoming styled views, existing views won't be affected.

Template

The first section in the Customization page is the Template, here you will see the HTML for the template, you can tweak it by adding any HTML you want to appear in your template. Make sure you read the "Required Customization Skills" section to know the required knowledge that you need to have to change the templates.

Customize template


Pre Render & Post Render

These sections in the Customization tab are dedicated to any JavaScript code you wish to add at the stages stated by their names. If you wish to add any JS code in the PreRender of items, you place it in the Pre Render section and if you wish to add code at the Post Render stage, place it in the Post Render section.

Required Customization Skills

If you are comfortable with JavaScript, and you have an idea of how templating in JavaScript works, then you would find it easy to know your way in the Customization page, as it requires a basic understanding of JavaScript.

Note that applying styles to list views was done using HandlebarsJS, so when you edit the templates using the Customization page you will find tokens that look like this: {{token}}. This means that this is a variable that will be changed by an item column's value in handlebars. So a basic understanding of handlebarsJS is required in order to be able to change settings in the customizations page.


Apptex handlebars custom helpers

The App contains helper methods that you can use in the Customization section. You can use these out of the box methods to do specific tasks, an example is the following:


GetFirstImageSrc & GetFirstImageSrcWithoutQuery: these methodes are used to extract the image source from the returned image tag, for example, when you want to get the image from a publishing page image field, it will return the image tag itself, like the following:

<img src="image.png" alt="some text" src="{{#GetFirstImageSrcWithoutQuery}}{{MapFields.fldImage}}{{/GetFirstImageSrcWithoutQuery}}/>
So when using this function, it will extract only: image.png so you can use it in your template. You can use it like the following:

Add/Remove paging

Templates will use the SharePoint's OOTB list views for their data filters, sorting and item limit, so by default your Apptex views will have paging enabled unless you set the item limit from your view.

Edit template files

If you want to have more control over the styling of your template, such as changing the Next and Previous buttons in a slider, or playing with CSS styles, you can always do so by going to the Apptexfiles Library on your host web where the App's files were copied when you first deployed the App. You will find two folders inside the Apptexfiles Library.

Beta: It specifies the version release, and contains a folder for each template with its own images and css files that you can play with.

Instances This folder will contain multiple instances, each instance contains a code needed to make styles work for the styled view.

SharePoint Version Support

Apptex is tested on SharePoint Online (Office 365). In upcoming releases we'll make it supported on other SharePoint editions.

Upcoming Features

There will be upcoming features that we're going to work on, some of them but not all are like the following:

  • Support for SharePoint On-Premises
  • Create new template, and copy from existing template
  • Adding more 50 predefined templates for upcoming releases [Based on your feedback and suggestions ...]
  • Display Templates for Search [In progress..]
  • Support for right to left orientation

Give us your feedback!

Again, we would like to hear from you and get to know your feedback to improve upcoming releases, don't hesitate to communicate with us for any questions or feedback!

Credit

This App was made by utilizing many libraries and plugins as listed below:





Last edited Sep 18, 2015 at 3:19 PM by Muawiyah, version 7