{"id":1351,"date":"2018-04-16T01:52:02","date_gmt":"2018-04-16T01:52:02","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=1351"},"modified":"2018-04-16T01:52:02","modified_gmt":"2018-04-16T01:52:02","slug":"exploring-kaizala-card-view-scenarios","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/exploring-kaizala-card-view-scenarios\/","title":{"rendered":"Exploring Kaizala card view scenarios"},"content":{"rendered":"

In the Developing a custom action for Kaizala<\/strong> blog post, I introduced Kaizala custom actions \u2013 which has 4 views (creation view, chat card view, response view and results \/ summary view). In this post, I’ll explore different scenarios where each of the views can be used for a different purpose. While this post intends to give you an idea of card view customization and not an exhaustive list! Your creativity can take you way beyond.<\/p>\n

While a Kaizala action \/ card has 4 views, they are not mandatory and are upto the developer to pick and choose based on the scenario at hand. Below are a few example scenarios I have picked to showcase a mix and match of the available views.<\/p>\n

\n\n\n\n\n\n\n\n\n\n\n\n
\n

USER SCENARIO<\/p>\n<\/td>\n

\n

CREATION<\/p>\n

VIEW<\/p>\n<\/td>\n

\n

CHAT<\/p>\n

CARD<\/p>\n<\/td>\n

\n

RESPONSE<\/p>\n

VIEW<\/p>\n<\/td>\n

\n

SUMMARY<\/p>\n

VIEW<\/p>\n<\/td>\n

\n

SAMPLE \/<\/p>\n

REFERENCE<\/p>\n<\/td>\n<\/tr>\n

\n

1) User initiated survey requesting for details<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

\u00a0link<\/a><\/p>\n<\/td>\n<\/tr>\n

\n

2) Survey type without summary view<\/p>\n

<<no real use case \u2013 hypothetical>><\/em><\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

X<\/p>\n<\/td>\n

\n

PENDING**<\/p>\n<\/td>\n<\/tr>\n

\n

3) Response only form<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

X<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

link<\/a><\/p>\n<\/td>\n<\/tr>\n

\n

4) Sharing a news bite \/ update<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

X<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

PENDING**<\/p>\n<\/td>\n<\/tr>\n

\n

5) API initiated survey<\/p>\n<\/td>\n

\n

X<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

PENDING**<\/p>\n<\/td>\n<\/tr>\n

\n

6) API initiated news bite \/ update<\/p>\n<\/td>\n

\n

X<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

X<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

PENDING**<\/p>\n<\/td>\n<\/tr>\n

\n

7) API initiated info card<\/p>\n<\/td>\n

\n

X<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

X<\/p>\n<\/td>\n

\n

X<\/p>\n<\/td>\n

\n

link<\/a><\/p>\n<\/td>\n<\/tr>\n

\n

8) Informational view in single screen (non-transactional)<\/p>\n<\/td>\n

\n

\u2713<\/p>\n<\/td>\n

\n

X<\/p>\n<\/td>\n

\n

X<\/p>\n<\/td>\n

\n

X<\/p>\n<\/td>\n

\n

PENDING**<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

In the subsequent sections, I will be exploring each of the above scenarios in detail with the purpose of the screens.<\/p>\n<\/div>\n

# 1 \u2013 User initiated survey requesting for details<\/h2>\n

In this kind of action\u00a0 \/ card, there are 2 parties (at least) involved. The sender \/ requester who sends the survey and the responder who responds to the survey. An ideal example for this scenario would be the out-of-box survey card.<\/p>\n

Creation View<\/h3>\n

Allows the sender to capture the title of the survey and the questions that need to be asked. On confirming, an instance of survey \/ action is created.<\/p>\n

Chat Card View<\/h3>\n

As soon as the survey is created (in the creation view above), the chat card is created on the group. The chat card typically has the title of the survey, the expiry information, etc. Clicking on the chat canvas would take to the response results view and clicking on the Respond button would take to the response view.<\/p>\n

Response View<\/h3>\n

Response view allows the user to respond to the questions in the survey.<\/p>\n

Response Results View \/ Summary View<\/h3>\n

The summary view shows the responses to the survey. Either only the user\u2019s response \/ all responses based on how the card is designed.<\/p>\n

\u00a0# 2 \u2013\u00a0Survey type without summary view<\/h2>\n

This is very similar to #1 except that it would have the summary view disabled. (I don\u2019t have an example handy \u2013 will post one soon).<\/p>\n

# 3 \u2013\u00a0Response only form<\/h2>\n

This scenario is where the user taps on an icon and adds a response directly. It is also known as a form type action. It is like a survey with the difference that there would only be one instance of the survey and responses would be aggregated at group level. Example for this is feedback form (try\u00a0this<\/a>). Looking at the views involved for this kind of action:<\/p>\n

Creation View<\/h3>\n

Opens up a form where the user can submit his input \/ response.<\/p>\n

Chat Card View<\/h3>\n

As soon as the user submits the response, the chat card is created on his group view. The chat card typically has the title of the survey. Clicking on the chat canvas would take to the response results view.<\/p>\n

Response Results View \/ Summary View<\/h3>\n

The summary view shows the user\u2019s response shared in the form earlier.<\/p>\n

#4 \u2013\u00a0Sharing a news bite \/ update<\/h2>\n

In this scenario the user shares a news article with the members in the group. (this is very much like the out-of-box announcement action).<\/p>\n

Creation View<\/h3>\n

Opens up a form where the user can enter the news bite details, probably an image and a link to the news article.<\/p>\n

Chat Card View<\/h3>\n

As soon as the user submits the card, the chat card is created on his group view. The chat card has the news summary, image, etc. Clicking on the chat canvas would take to the response results view.<\/p>\n

Response Results View \/ Summary View<\/h3>\n

The summary view shows the detailed news or opens a link to the complete news article.<\/p>\n

#5 \u2013\u00a0API initiated survey<\/h2>\n

This is very much like scenario #1, except that the survey type of card is sent programmatically using API \/\u00a0Flow<\/a>\u00a0\u2013 eliminating the need for a creation view.<\/p>\n

Chat Card View<\/h3>\n

As soon as the survey is sent, the chat card is created on the group. The chat card typically has the title of the survey, the expiry information, etc. Clicking on the chat canvas would take to the response results view and clicking on the Respond button would take to the response view.<\/p>\n

Response View<\/h3>\n

Response view allows the user to respond to the questions in the survey.<\/p>\n

Response Results View \/ Summary View<\/h3>\n

The summary view shows the responses to the survey. Either only the user\u2019s response \/ all responses based on how the card is designed.<\/p>\n

#6 \u2013\u00a0API initiated news bite \/ update<\/h2>\n

This is very much like scenario #4, except that the news bite is sent using API, eliminating the need for a creation view.\u00a0(or the same card in #4 could also be used here \u2013 just that creation view does not have a role while being sent using API.)<\/em><\/p>\n

Chat Card View<\/h3>\n

When the news bite is sent using API, the chat card is created on his group view. The chat card has the news summary, image, etc. Clicking on the chat canvas would take to the response results view.<\/p>\n

Response Results View \/ Summary View<\/h3>\n

The summary view shows the detailed news or opens a link to the complete news article.<\/p>\n

\u00a0#7 \u2013\u00a0API initiated info card<\/h2>\n

Certain times, all we need is to pass a short information that fits in the chat canvas itself \u2013 not requiring an immersive view at all. In this case, we could just use the chat card view. This was demonstrated in the post,\u00a0Customer ticketing solution on Kaizala<\/strong>\u00a0\u2013 where a service ticket was sent\u00a0(and updated)<\/em>\u00a0to the customer on Kaizala.<\/p>\n

Chat Card View<\/h3>\n

When the information is sent using API, the card is created on the group and has the information that was sent (and designed to display<\/em>).<\/p>\n

#8 \u2013\u00a0Informational view in single screen (non-transactional)<\/h2>\n

This scenario is not much of a Kaizala scenario, but in case you don\u2019t have any transaction \/ conversation involved and just want to display some information \u2013 for example, class time-table in the class group, you could design a card that is pinned \/ associated to the group palette that shows the time-table in the creation view. No other views are required.<\/p>\n

Creation View<\/h3>\n

Query \/ fetch details required in the scenario and render it in the immersive view itself. Since no survey \/ form is created \/ submitted \u2013 an instance of action is not created. As a result of this, no chat card would be created, hence no entry points to the response view \/ response results view.<\/p>\n

Hope this post was helpful in taking you through few possibilities \/ scenarios that you could model Kaizala action cards around. Let me know if you have any feedback \/ questions through the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"

In the Developing a custom action for Kaizala blog post, I introduced Kaizala custom actions \u2013 which has 4 views (creation view, chat card view, response view and results \/ summary view). In this post, I’ll explore different scenarios where each of the views can be used for a different purpose. While this post intends to give you an idea of card view customization and not an exhaustive list! Your creativity can take you way beyond.\u00a0????<\/p>\n","protected":false},"author":69216,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11],"tags":[87],"class_list":["post-1351","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-office-add-ins","tag-kaizala"],"acf":[],"blog_post_summary":"

In the Developing a custom action for Kaizala blog post, I introduced Kaizala custom actions \u2013 which has 4 views (creation view, chat card view, response view and results \/ summary view). In this post, I’ll explore different scenarios where each of the views can be used for a different purpose. While this post intends to give you an idea of card view customization and not an exhaustive list! Your creativity can take you way beyond.\u00a0????<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/1351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69216"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=1351"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/1351\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/25159"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=1351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=1351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=1351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}