Device class support in a migrated theme | HCL Digital Experience
You can use the new device classes and equation support to modify your themes from previous versions so they are more efficient.
With the two new features, you can remove or modify certain aspects of a prior theme that you migrated. These changes are optional, but these new features are more powerful and simpler to use.
This version of Portal supports ios
, android
, blackberry
,
and worklight
in addition to the smartphone
and tablet
themes
it already supports. You can also use equation support to combine
individual device classes to check for multiple client conditions.
For example, if you were manually integrating with MobileFirst® in
a previous version, and manually created some combination device
classes, such as smartphone-ios
, tablet-ios
, smartphone-android
, tablet-android
, your combination device classes
are no longer needed. The individual device classes can be combined
in equations, such as smartphone+ios
, tablet+ios
. If you had a combination device
class such as hires-tablet-ios
, you
can change to define the singular hires
device
class. Then, use equations to combine with the other default singular
device classes, such as hires+tablet+ios
.
In these equations, use +
for AND, /
for OR, !
for
NOT and parentheses to group items together. For more information,
see Device Class Equations.
In your .jsp logic, for example, you can change
the previous version syntax with <c:if>
against deviceClass
. Here is an example of code from
a previous version:
<c:set var="deviceClass" scope="request" value="${wp.clientProfile['DeviceClass']}" />
<c:set var="isMobile" scope="request" value="${deviceClass == 'tablet' || deviceClass == 'smartphone'}" />
<c:if test="${isMobile}">
...
</c:if>
You can change that to a new equation syntax with <portal-logic:if>
with the new deviceClass parameter. For example:
<portal-logic:if deviceClass="tablet/smartphone">
...
</portal-logic:if>
You can now use device class equations in module subcontributions in theme contributions .json files. For example:
}, {
"value":"/css/my_css_smartphone_ios.css",
"type":"smartphone+ios"
}, {
Dynamic content spots in theme templates can now also be varied entirely with device class equations. For example:
mvc:res:/hello.jsp,smartphone+ios@res:/hello_smartphone_ios.jsp,(smartphone/tablet)+android@res:/hello_mobile_android.jsp
In this example, you can use res:/hello.jsp
as
the default URI, res:/hello_smartphone_ios.jsp
as
the URI for iOS smartphones, and res:/hello_mobile_android.jsp
as
the URI for Android smartphones and tablets.