Multilist in Sitecore JSS App

For the list data, Sitecore JSS offering "ContentList" as a field datatype. When you deploy it in Sitecore, it converts into "Treelist".

But what to do if you need "Multilist" instead of Treelist at Sitecore side?

Solution:
 
You have to specify "MultiList" as a string type when you define the Sitecore field definition for the component as

{ name: 'content', type: CommonFieldTypes.RichText },

{ name: 'articleList', type: 'MultiList'},

As you can notice here I defined "ArticleList" field as a "MultiList" datatype.

You can also set the datasource or query with this Multilist field definition as

{ name: 'articleList', type: 'MultiList', source: `query:./Articles/*`, },

Here I have set the datasource as a child folder "articles" of current Sitecore context item.

I hope this quick tip help you in Sitecore JSS App development.

Problem with Sitecore GraphQL on Azure

We have deployed JSS App on Sitecore instance running on Azure.

For one of the component we are using GraphQL which is perfectly working on local machine.

But when we deploy it on Azure our GraphQL query was not returning anything.

Our query was

var query = `{

search(fieldsEqual: [{name: "_fullpath",

value: "/sitecore/content/myjssproj/Content/BlogsCollection/ContentListField/*"}

])

As you can note, we have used "fieldsEqual" parameter and pass the name and value. You will get this query result on your local machine but this is not going to work on Azure.

I think this is because we are using "Azure Search" and Azure have limitation of 1000 fields index. It may be possible that Azure search not indexed system fields.

So if you want to use Azure Search with GraphQL you should rewrite your query with "rootItem" parameter as

var query = `{

search(rootItem: "/sitecore/content/myjssproj/Content/BlogsCollection/ContentListField/*"

)

Other alternative is to use SOLR as a search on Azure. I find this link is very simple and handy to install SOLR on azure.

Fixed : Access Issue while importing JSS app

If you are getting error when you fire Sitecore JSS command jss deploy app -c -d

Exception thrown while importing JSS app
Exception: Sitecore.Exceptions.AccessDeniedException
Message: AddFromTemplate - Add access required (destination: {0DE95AE4-41AB-4D01-9EB0-67441B7C2450}, template: {061CBA15-5474-4B91-8A06-17903B102B82})

Solution:-
 
Id "{0DE95AE4-41AB-4D01-9EB0-67441B7C2450}" is for "/sitecore/content" while "{061CBA15-5474-4B91-8A06-17903B102B82}" is for "/sitecore/templates/Foundation/JavaScript Services/App".
 
Basically JssImport service unable to create item under "Content" item. So this is the permission problem.

To fix it, provide access to user "sitecore\JssImport" to "Sitecore\Content" and its descendant items as

Permission to user JssImport

 

Certificate : Sitecore JSS Fundamentals 9.2 certificate

I just love the Headless concept of Sitecore with full OmniChannel capabilities. To make myself more comfortable with JSS, I just completed Sitecore JSS certification by completing the course "Sitecore® JSS Fundamentals 9.2" from https://elearning.sitecore.net .

Here is the certificate for the same.

Sitecore JSS Fundamentals 9.2 certificate

Search in Sitecore JSS

Happy to share that SUGCON India 2019 videos are published on Youtube. I conducted session on "Search In Sitecore JSS". I am sharing here recorded session on the same.

Sitecore Headless architecture in Ravana ways

With version 9.1, Sitecore officially started to support JSS(Java Script Services) which bring a capability of true headless CMS.

 

But headless is still a new concept for many developers and if you questioned them during interview what is headless, many developers just started to feel uncomfortable.

This article may help you to understand headless architecture through Ravana(Wikipedia) way.

In India we have one of the greatest epic called Ramayana.

In short it's an epic about lord Rama, Sita, Ravana etc. This Ravana is very interesting mythological character and help me to understand headless architecture.

In many temples, Ravana showed with all his weapons and with 10 heads as

Ravan

Ravana kidnapped Sita, so there was a war between Rama and Ravana. During that war Rama cut his head as

Headless Ravan

But Ravana was blessed with boon from Brahma and nobody can kill him in normal way.

Here you can imagine Ravana legs as Sitecore databases, his middle body as Sitecore XP and his all weapons represented as xConnect, Sitecore analytics and services, etc. 

But any living creature can't be survive well without any head. Similarly Sitecore can be headless but your final product or website can't be headless. It must have at least one or more head. It's something like

Depicting Sitecore and Ravan

Ravana had 10 heads which were different in look and shape. Each head was master in one field but ultimately, they all were face of Ravana. 

Similarly there are different front-end technologies with different features and uses. Where front end technologies can be angular, React, Vue.js, knockout, ASP.Net, MVC, Ruby etc. 

In short Ravana body represent Sitecore backend parts while his heads represent front end technologies.

That’s it.

I hope Ravana's character help you to understand Headless architecture. So next time someone ask you about headless explain him through Ravana's way.

Happy headless.

Image courtesy -https://www.123rf.com/photo_63287350_stock-vector-india-god-with-ten-goals-ravana-holding-a-sword-and-shield-.html

Batch file to create empty app from Sitecore JSS boilerplate app

If you are new to Sitecore JSS app and want to develop any website from it, then best place to start working on this is to restore sample Sitecore JSS app.

Default Sitecore JSS app comes as boilerplate.

Understand how it is functioning and how to write the code. Once you understand sample app, then remove all the default sample content (the Styleguide and GraphQL files) from below paths:

1.            Delete /src/components/Styleguide* and /src/components/GraphQL*

2.            Delete /sitecore/definitions/components/Styleguide*, /sitecore/definitions/templates/Styleguide*, and /sitecore/definitions/components/GraphQL*

3.            Delete /data/component-content/Styleguide

4.            Delete /data/content/Styleguide

5.            Delete /data/routes/styleguide and /data/routes/graphql

6.            Delete /data/dictionary/*.yml

If you like you can remove these files and folders manually. To make your life easy, I have created a batch file which remove all these contents and give you perfect empty app in just two click. 

Just copy the batch file in your JSS application root directory as "CleanupApp.bat" and run it.

Sitecore JSS App clean up batch file

Batch file looks like

REM Batch file to remove all of the default sample content (the Styleguide and GraphQL routes)

FOR /D %%p IN (".\src\components\Styleguide*") DO RMDIR "%%p" /s /q

FOR /D %%p IN (".\src\components\GraphQL*") DO RMDIR "%%p" /s /q

DEL /q ".\src\components\Styleguide*"

DEL /q ".\sitecore\definitions\components\Styleguide*"

DEL /q ".\sitecore\definitions\components\GraphQL*"

DEL /q ".\sitecore\definitions\templates\Styleguide*"

FOR /D %%p IN (".\data\component-content\Styleguide") DO RMDIR "%%p" /s /q

FOR /D %%p IN (".\data\content\Styleguide") DO RMDIR "%%p" /s /q

FOR /D %%p IN (".\data\routes\styleguide") DO RMDIR "%%p" /s /q

FOR /D %%p IN (".\data\routes\graphql") DO RMDIR "%%p" /s /q

DEL /q ".\data\dictionary\*.yml"

That’s it.

You can also refer this batch file from github https://github.com/alexksharma/JSSCleanupBatch/blob/master/CleanupApp.bat