Versions Compared

Old Version 9

changes.mady.by.user Ertan Tike

Saved on

compared with

New Version Current

changes.mady.by.user Selahattin Bostanci

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

With embedded forms, you can display emakin forms in easily integrate Emakin forms into other applications in using an HTML iframe <iframe>. Emakin uses responsive layout to automatically fit in frame size.Embedded views requires Emakin’s responsive design ensures that the form automatically adjusts to fit the frame size, providing a smooth and consistent user experience across different devices and screen sizes.

To access embedded forms, you can choose between a valid authentication method or allow anonymous access, depending of on your choicesecurity requirements.

Anonymous Access

Initiating of a new process anonymously

Please follow these steps to enable anonymous access.

...

Copy link of initiate process link and replace '#' character with '?' and add generated API Key parameter to end of address.

Updated address link should be similar like to following address 

...

Anonymous access allows users to interact with forms or generate reports in other applications without needing to log in to Emakin. This can be achieved by using API Keys, providing a seamless and frictionless experience for users who do not require authentication.

Info

Test Mode

Please note that anonymous access is only available for processes in an "Active" state. If you attempt to use anonymous access while a process is in "Test" mode, Emakin will silently ignore the operation, ensuring that test processes are not unintentionally exposed.

Initiating a New Process Anonymously

To enable anonymous access for initiating a new process, follow these steps:

  • Enable Anonymous Access: Ensure that anonymous access is enabled for the process you want to initiate or share. This setting allows the process to be accessed without requiring user authentication.

    Image Added

  • Generate an API Key: Create an API Key with the "login" scope and any other necessary scopes. Be cautious and select only the mandatory scopes, as allowing anonymous access can increase the risk to your system.

  • Update the Process Link: Copy the initiation link of the process. Replace the # character in the URL with ?, then append the generated API Key as a parameter at the end of the address.

The updated URL should look similar to the following example, with the "apiKey" parameter added:

Code Block
languagehtml
https://mydomain.emakin.com/app/?/initiate/

...

55....6b/c2...18/08...c8&apiKey=58ea0f3d.....90b984be905a

Sharing a

...

  • Enable anonymous access of screen
    Image Removed
  • Generate a API key with "login" and other required scopes. Please only select the mandatory scopes because of anonymous access may risk your system.
  • Copy address of screen and replace '#' character with '?' and add generated API key parameter to end of address.
  • Updated address link should be similar like to following address;

Embedded form layout can be accessed from "http(s)://<mydomain>.emakin.com/app/embed" url. Embedded layout does not show any side bar and only shows the main content of the form with optionally actions. Example view of the embedded layout of a form.

Image Removed

Authentication

Embedded forms need valid authentication, so if the user is not logged in before, browser automatically redirects to the login page. Alternatively, you can specify an authentication token to login user automatically and skip login page.

Example embedded page url with authentication token;

...

Screen with Anonymous Access

To share a screen view anonymously, follow these steps:

  • Enable Anonymous Access: First, ensure that anonymous access is enabled for the screen you wish to share. This setting allows users to view the screen without needing to log in.

    Image Added

  • Generate an API Key: Create an API Key with the "login" scope and any other required scopes. It’s important to only select the necessary scopes, as granting anonymous access can increase the system’s vulnerability.

  • Update the Screen Link: Copy the screen's URL. Replace the # character in the address with ?, then append the generated API Key as a parameter at the end of the URL.

The updated URL should look similar to the following example, with the "apiKey" parameter included:

Code Block
https://mydomain.emakin.com/app/embed?/workitem/d4c1adc7-c9d2-4af0-a2b3-b6d61d88df6d&auth=41AA3CE3CAFBreport/55....c8&apiKey=58ea0f3d..........BF8114

You can generate required authentication token with getToken method in rest service. 

Generated authentication tokens are limited to configured based time period and they can get expired. Please always generate new tokens as long as it's needed, and do not store in any place like disk or code.

Embedding Form

...

90b984be905a

Authenticated Access

To secure access, you can generate authentication tokens using the GetToken method from the REST API service for a specific user identity. Once the token is generated, include it as an "auth" parameter in the URL.

Please note that these authentication tokens are valid only for a configured time period and will expire after that. It is essential to generate new tokens whenever needed, and ensure that they are not stored on disk or hardcoded in your application.

The updated URL with the "auth" parameter should look similar to the following example:

Code Block
languagehtml
https://mydomain.emakin.com/app/?/report/55....c8&auth=41A....114

Embedding a Form

You can easily embed Emakin forms using a basic HTML <iframe> tag, as shown in the example below:

Example:

Code Block
languagehtml
<html>
	<body>
        Hello!
		<iframe src="httphttps://ertanmydomain.emakin.com/app/embed?/workitem/d4c1adc7-c9d2-4af0-a2b3-b6d61d88df6dinitiate/55..c8&apiKey=58ea0f3d.....90b984be905a" width="100%" height="600300" frameborder="0"></iframe>
	</body>
</html>

Default configuration prevents the use emakin in IFrame tag because of security. If you get any error please try to remove "X-XFrame-Options" header from your web configuration file to allow to use emakin in an iframe tag.

Action Toolbar

...

Return Address

You can specify a returnUrl parameter in the query string to redirect the user to another address after they have completed the form.

Example:

Code Block
languagehtml
<html>
	<body>
        Hello!
		<iframe src="httphttps://ertanmydomain.emakin.com/app/embed?/workitem/d4c1adc7-c9d2-4af0-a2b3-b6d61d88df6d&actions=1initiate/55..c8&apiKey=58ea0f3d.....90b984be905a&returnUrl=http://localhost" width="100%" height="600300" frameborder="0"></iframe>
	</body>
</html>

Return Address

You can specify "returnUrl" parameter in the query string, to redirect user the another address after the form is completed. This parameter is only meaningful if an action toolbar is visible.

Example:

...

IFrame Size

For some forms, the height of the interface may change dynamically. If you want the IFrame size to adjust automatically according to the form's content, you can use an additional JavaScript library to apply these size changes dynamically.

Code Block
languagehtml
<html>
<body>
<iframe id="frame" src="https://mydomain.emakin.com/app/embed?/workitem/d4c1adc7-c9d2-4af0-a2b3-b6d61d88df6d&actions=1initiate/55..c8&apiKey=58ea0f3d.....90b984be905a&returnUrl=http://localhost" width="100%" height="600300" frameborder="0"></iframe>
	</body>
</html>
<script src="https://static.emakin.com/r/IFrameResizer/JS?c=en-US"></script>
<script>iFrameResize({ minHeight:300 }, '#frame')</script>
</body>
Note

Unlike other examples, make sure to assign an ID to the IFrame element that you want to monitor, as this is essential for tracking and dynamically adjusting its size.

Sending Parameters

When embedding Emakin forms, you may need to submit additional values to the Emakin form data. Emakin supports receiving parameters through query strings, allowing you to set values directly within the process instance.

How to Submit Parameters

To specify a parameter, add it to the embedding URL using the following format:

  • Query String: Use ?parameterName=value to pass parameters as part of the URL.

Note: For nested nodes, you can specify the exact path using path segmentation. Structure the parameter name as nodeName/nestedNode/nestedNestedNode to target a specific field within the hierarchy.

Example

Suppose you want to submit a CompanyId parameter, represented as a GUID. This can be done by appending the parameter to the URL:

Code Block
languagehtml
<iframe src="https://mydomain.emakin.com/app/?/initiate/55..c8&apiKey=58ea0f3d.....90b984be905a&CompanyId=123e4567-e89b-12d3-a456-426614174000" width="100%" height="600px"></iframe>

In this example, the CompanyId parameter is assigned a unique identifier (GUID), which will be used in the process instance upon load.

Info

As a best practice, we advise keeping the number of parameters passed through the URL to a minimum. Instead, consider submitting a single identifier (such as an Id parameter) and handling any additional data retrieval within the process’s prework section. For instance, by passing only an Id, you can use it within the prework to query necessary details, ensuring the process is streamlined and secure.

Sending the Culture Parameter

When embedding forms, you may sometimes need them to display in a specific culture or locale, which determines the language, date formats, and other region-specific settings. This can be particularly useful in applications serving a global audience or in situations where the user’s culture is known and you want to provide a seamless experience.

How to Send the Culture Parameter

To specify a culture when embedding a form, you can include the culture parameter in the embedding URL. The culture parameter should be a valid IETF language tag, such as en-US for English (United States) or fr-FR for French (France).

Code Block
languagehtml
<iframe src="https://mydomain.emakin.com/app/?/initiate/55..c8&apiKey=58ea0f3d.....90b984be905a&culture=en-US" width="100%" height="600px"></iframe>

In this example, the form will be displayed in the English (United States) culture.